Five Guys App Redesign | UX Case Study | 2 week design sprint
Conceptual Group Project | Roshni Mahtani, Erika Rasoilo, Kanishka Sinwar & Sam Smith
Process overview:
User research: Contextual inquiry, Guerrilla interviews, Affinity mapping
Define: Usability test of current app, Persona, Problem statement
Ideate: Design studio, Feature prioritisation, User flow, Initial sketches
Design, Prototype, Validate and Iterate: Paper prototype, Usability testing, Mid-fidelity prototype, High-fidelity prototype.
Software used: Sketch, Adobe Suite, Keynote, inVision
My Role: I took on a facilitator role; I conducted the design studios and ensured that all deadlines were met. I created an affinity map of our research findings and I was in charge of our sketch file and creating the mid-fi prototype. I led usability tests and incorporated the comments from the paper prototype (such as how to create a group, group status information and menu items) into the mid-fi. After testing the mid-fi, I worked on one more iteration of the mid-fi prior to it going to hi-fi. After the project was finished, I worked on the hi-fi prototype a little bit more to add some screens that we had discussed but were not created.
Brief: The current Five Guys app has many glitches and is unused. The main goals are to allow customers to order and pay in the app to avoid in-store queues, and to split a bill during the ordering process. None of the competitors currently offer the option to split a bill, so this added efficiency would entice users to choose Five Guys over other fast food restaurants.
User research:
Research the problem and understand what users are doing, thinking and feeling
Contextual Inquiry:
One of the first things we did after receiving the brief was to conduct a site visit to a Five Guys in Angel to learn more about the company, the users (and observe demographics), the brand and the values. We also wanted to interview people at the restaurant to learn about their habits, and how frequently they eat out and where. We found two types of people that went there, some that went for a quick meal on a lunch break and some that went for the experience. The process of ordering food at the restaurant was simple and effective. One interesting thing we noticed was that there was no mention in store that they have an app and none of the users we interviewed knew about it.
Guerrilla interviews and affinity mapping:
We conducted 13 interviews, 4 at the restaurant and 9 scheduled, because each type of interview could provide us with the different information. The interviews at the restaurant were useful to gain insight about Five Guys and the ordering process, whereas the other interviews were focused on current apps that they use and the pain points within them. I merged all of our results into an affinity map, shown below.
Two key findings were that 8 of the 13 interviewees highlighted that they find themselves using mobile applications to make individual and group orders, and 12 of the interviewees said that customisation is a key part of the burger ordering process.
Define:
Identify pain-points and prioritise user goals and design objectives
Usability test of current app:
To understand the current app better, we ordered food from the app and compared that to our seamless in-store experience. The process of ordering food through the app was not as pleasant as the in-store experience because the queue moved fast and the restaurant provided a pleasant interior with snacks to keep users distracted about time. We created an experience map of the process to look at the user flow and assess the length of the process.
Pain point: Customisation in the app created a tedious and long process, causing the user to get hungry and impatient while using it.
A main finding was that there is a real disconnect between the happiness of those at the restaurant and app users. A big aim was to reconnect the two and design an app that creates as pleasant of an experience as the restaurant itself.
Persona:
To sum up all of this research we created a persona, David, that incorporated the different concerns and goals of our users. David is a Junior Lawyer who works in the area and wants to pick up Five Guys for lunch for him and some co-workers, but does not want to foot the whole bill.
Pain Point: David does not want to pay for everybody’s order, as he is often not paid back.
Problem Statement: David needs a way to share the bill because he often organises lunch for the office and is stuck getting owed money
Hypothesis: We believe that by integrating splitting the bill into the ordering process of the application that Sam won’t lose money or time and will organise more lunches at Five Guys. We will know this to be true when everyone successfully pays for their own lunch in a large group order.
Ideate:
Brainstorm creative solutions and define designs that answer the objectives.
Design Studio:
Our next phase, ideation, began with a design studio that I conducted. We did this to get all members to generate ideas to see the different features and ideas that the team had and to create a large list of design options. During the design studio, we generated ideas individually and then critiqued and voted as a group- concluding in us sketching one final design together.
Feature prioritisation:
From the design studio, we generated a large list of features that we wanted to include in the app. To meet the deadline and begin testing, we needed to prioritise which features to include to maximise our efficiency. We prioritised the features based on the time it would take and how essential the feature was- both for the business and the user. We mapped this onto a graph, and decided that the Most Viable Product (MVP) must have the ability to split the bill for a group order, customise an order and pay on the app to pick up in the restaurant.
User flow:
After we had a clear understanding of the scope of the application and the process that we needed for our MVP I created a user flow for David and how he would use the app.
Prototype, Validate and Ideate:
Design and build a model of the best solution, test it to get feedback and then go back and refine design based on feedback.
Paper prototype:
We created a paper prototype from the wireframes that we generated during the design studio. This was a quick way to put our final ideas together so that we could test them and see if the users understood our process.
Usability testing:
To validate our design we conducted usability tests of each iteration of our prototypes. This was essential to see where the users had issues and to discuss and design ways to fix them.
After testing the paper prototype it was immediately apparent that our process to split the bill was not clear. To research solutions, we looked at some apps that split bills as well as real world situations. The best example was a cafe setting where each person orders and pays for their own food and it is placed on a group table number so that the server knows where everyone is sitting. This led to the idea that after starting a new group, a person would be given a code to share, and anyone who used this code in a set time frame could add their meal to the group order for it to be picked up together. We prototyped this option and tested it on 6 users.
Mid-fidelity prototype:
Summarising the results from the paper prototype tests and implementing them in a mid-fi digital prototype was a large role that I had within the project. We tested this mid-fi on 6 users and wrote out all of the comments and grouped them into communal themes to create solutions.
Usability testing findings:
- Timer: Caused stress so we removed it.
- Creating a group: Users did not like the code, they wanted to add names from contacts
- Menu: Hard to tell what was clickable as it was greyed out
- Group Ordering: Users wanted to see the groups process and orders
- Confirmation: Users were not explicitly told that their order would not be placed immediately after ordering as they were waiting on their group
High-fidelity prototype:
After identifying all of these issues we came up with solutions for each of the main topics. I then solved these in another mid-fi prototype before I passed the sketch file onto a different group member to start the hi-fi and integrate Five Guys branding into the application.
The image below shows the iterative process of choosing how to split the bill.
We tested the high fidelity prototype and came up with some future steps that we wanted to achieve that would not fit into the 2 week sprint. Since the sprint I have worked on those changes and below is the final walk through of the hi-fi prototype with my changes.
Reflection:
Looking back and reflecting on the process and outcomes
I learnt how a UX progress could be divided in a group and how to lead a small group of people. Our interviews were vital to understand how people use food apps in general as well as what the users at Five Guys expect from the brand. Our brief was very specific about wanting to split the bill, and this required a lot of research and testing to figure out how to integrate it into the app seamlessly, without an addition of too many steps.
After the project finished, I added more information about tracking, and changed the layout of some of the menu items following usability testing of our hi-fi prototype and questions from the final presentation.
If you have any additional questions about this project and my process, please reach out to me- Thank you!
