Designing a fast food app
(Customize your meals by using Foodie Café)
Fast Food App
UX Case study
Winter - 2021
What is Foodie Café?
Goals
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.
-
Create a food app that lets users customize their meals.
-
User Research
-
Competitor & Data Analysis
-
Interaction Design
-
Storyboarding
-
Prototype Testing
-
Iteration
Duration:
-
Four weeks UI
-
Eight weeks UX
The team:
-
1X UI designer
-
1X UX designer
Tools used:
-
Figma
My role:
-
UX designer
Why would the user choose Foodie Café?
Understanding the challenge
Giving access to users to pick ingredients to make their own meal might sound easy. But, according to our 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 favorite meal resulting in their satisfaction.
Proposed solutions
Creating an app that lets users hit ingredients and add the preparation method to any meal they want might help some people with different food restrictions such as allergies. According to our user research we learned that our target users are mostly the ones who 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 RESEARCH
Key findings from user surveys & interviews
" Don't make me think, I'm starving! "
I conducted user interviews with six fast-food fans and surveyed 25 individuals with different food restrictions from different demographics. 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 did we pick a mobile app over a website?
Why did we add a ready menu in addition to a customize menu option?
Card sorting
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.
02 ANALYSIS
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.
Affinity diagrams
Meet Patricia
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.
03 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
Moodboard
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.
Interaction flows
Time to think about the user flows and interactive design.
Here are five tasks to get from ordering to tracking the order.
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.
04 EVALUATION
In total, I asked twelve users to test our prototype. They usually order meals by using a food app. I requested them to think aloud and talk out their thoughts. We had six revision rounds. After each revision, I tested our output with two users, and then I revised my design based on the users' insights.
Running think aloud usability test sessions
Revision - Behind the scenes
Wondering how we didn't break the Figma file with our comments.
Design iterations
Based on users’ feedbacks covering our home screen:
-
We simplified the navigation bar to make it more accessible.
-
We modified the customize section more extensively than other sections.
-
We set a base price for customizing items.
-
We prioritized custom items based on users’ ideas.
-
I have modified messages to establish a greater visual hierarchy.
-
Changes show in purple.
Changes display in purple.
According to the user’s feedback:
-
The word “Bag” turned to “Cart.”.
By observing the word “Bag,” a user felt like shopping for a dress. He suggested utilizing “Cart” instead.
Regarding users' feedback:
-
Split up seasoning and sauce in two separate steps.
Some more adjustment involving results of user testing (Relating to three below shapes):
-
Shape 1
-
I developed the clickable text with the label "Save Recipe" to a heart icon.
-
-
Shape 2
-
I reordered "Edit" and "Favorite," recognizing the users' priority.
-
We added tomato sauce to the pizza dough.
-
(one user liked to see a pizza dough with tomato sauce to sense like ordering a tasty pizza.)
-
Shape 3
-
I revised the message after the completed payment due to confusion about the message without payment confirmation.
-
Final look
Key takeaway
I learn something new every time I design a new digital product. I love being able to iterate on my learning process weekly. The user experience of this app has been a fantastic experimental space for me to try new things. There are always ways to make ordering more effective and fun!
Next step
I'm considering verifying the accessibility of the app.
I'm always looking for new ideas, so don't hesitate to reach out if you want to brainstorm together or if you are a fan of fast food and you are interested in testing this app as a potential user.
Discover more works
DibaSustainable Fashion Brand | Foodie Café(You are currently here.) Fast Food Application | Suzanne CollinsAuthor's Website Redesign |
---|