Designing a fast food app
(Customize your meals by using Foodie Café)
Fast Food App
UX Case study
Winter - 2021
What is Foodie Café?
My responsibilities
A fast food mobile application that allows the user to customize their own meal, the restaurant prepares and delivers it to the user.
-
User Research
-
Competitor & Data Analysis
-
Interaction Design
-
Storyboarding
-
Prototype Testing & Iteration
Duration:
-
Four weeks UI
-
Eight weeks UX
The team:
-
1X UI designer
-
1X UI/UX designer
Tools used:
-
Figma
My role:
-
UI/UX designer
Goals
-
Creating a food app that lets users customize their meals.
Understanding the challenge
Giving access to users to pick ingredients to make their own meals might sound easy. But, according to my research, the more choices you present your users with, the longer it will take them to reach a decision. Hence, we cannot give too many options to users. The challenge is to decrease the number of choices and still get enough input from the users to customize their favourite meal resulting in their satisfaction.
Discovering hypothetical solutions
Creating an app that lets users hit ingredients and add the preparation method to any meal they want might help people with different food restrictions such as allergies. However, according to user research, I learned that our target users mostly tend to order healthy meals. Therefore, we decided to prioritize healthy ingredients in the customize section to better understand the users thinking in the test phase.
01 UNDERSTANDING
THE USER
Key findings from user surveys & interviews
“ I'd like to explore more healthy fast foods; however, I always have to pick one from the ready menu. “
– Shadi, 33, Programer
I conducted user interviews with six fast-food fans and surveyed 25 individuals with different food restrictions from different demographics (all users were Foodie Café clients). Afterwards, I conducted card sorting with five potential users. Fortunately, one of them was a chef who is a fan of fast food. Her points of view helped me to convert our data into information architecture.
Why would the user choose Foodie Café?
03 DEFINE
Meet Patricia
Breathing life into our persona to identify expectations.
“ Don’t make me think; I’m starving! “
– Tila, 29, cook
Meal customizing journey
Discovering the user journey & the pain points.
02 ANALYSIS DATA
Card sorting
Translating information into the sitemap.
These grouping of cards are from the perspective of a developer, a chef, and a graphic designer who all are fans of ordering fast food.
03 DEFINE DESIGN SOLUTION
We generated affinity diagrams by gathering data (ideas, opinions, interview results, competitive analysis) and organizing them into groupings based on their relationships. Then we went through the survey results where the persona Patricia was born. Next, we created a key path scenario. We joined Patricia on her journey of using the app to place orders.
02 ANALYSIS
Affinity diagrams
Planning the best design solution.
Turning a scenario narrative into a visual narrative
Come along with Patricia through her very first journey in purchasing an order which includes four items.
04 STARTING THE DESIGN
I started turning my ideas into life and giving birth to our information through visual design. Afterwards, we brought some color into our design by creating our mood board. Following that, we focused on five interaction flows based on the key path scenarios to figure out the flow for ordering.
Sketches of potential landing pages
A/B testing, 5 users
Transforming information into visuals
Creating the first version of the proposed solution.
Why a dark theme?
Inspired by the nightlife of big cities where people tend to order fast food and by the color of the most popular fast food items.
We were lucky since no user complained about utilizing dark themes or illustrations.
Interaction flows
Time to think about the user flows and interactive design.
Here are five tasks to get from ordering to tracking the order.
05 USABILITY STUDY | FINDINGS
We started giving birth to our information and turning our ideas into life. Afterwards, we brought some color into our design after creating our mood board. Following, focused on five interaction flows based on key path scenarios.
After forming a solid understanding of this project's requirements and passing the design stage, I conducted 12 usability tests with fast food fans who ordered the most from Foodie Café to see what works and what does not. After testing, I again modified and prioritized the project's features regarding the consequence of usability tests.
I requested users to think aloud during passing tasks and talk out their thoughts. In total, I had six revision rounds. After each revision, I tested outputs with two users, then revised my design based on the users' insights.
Testing hypothetical solutions
Running think-aloud usability test sessions.
Focusing on measurable results, N=12
Time to step back and optimize the customizing process by leveraging usability tests output.
Combination of qualitative (from user interviews) & quantitative data ( from data analytics)
Buttons are too far apart
4 out of 8 participants had trouble using the app as buttons are too far apart. Moreover, they couldn’t use the app conveniently with one hand.
“ It’s kind of tough to use, as I can’t reach the buttons with my thumb.”
– Amir, 32, Graphic designer, Test over Android version
Revision - Behind the scenes to approach User-centric design
Wondering how we didn't break the Figma file with our comments.
Final output
Achieved 75% user satisfaction for customized ordering process after six rounds of revision.
Final look
Key takeaway
-
Inspiring by users, not competitors.
-
Deciding on priority topics to meet end-user satisfaction.
-
Conducting frequent tests and update research
-
Keeping bias under control.
Next step
The user experience of this app has been a fantastic experimental. There are always ways to make ordering more effective and fun! I'm considering verifying the accessibility of the app.