FOODIE
CAFE'
An App Design
UX/UI
Case Study
Discover
Define
Foodie Cafe' was an UX and UI project to design an app for a defined fast food restaurant. The main feature of this restaurant is the option of customizing the meal. So, the most important marketing target for this food industry was encouraging their costumers to customize their own meal.
This app made a very user-friendly environment and pleasant user journey with a highlight of customizing food in all sections. Also, the eye-catching, clear and straight forward instructors for the meal customizing, encourages the users to experiment this feature rather than picking ready receipt food on the menu.
We as the design team did all the process of UX design, and based on the data, gathered information and most possible users, decided to make an illustrated-based design for this app.
My role in this project was in both parts of UX and UI. In UX part, I regulated the survey and interview, and suggesting the best branding name. All the UI parts were done by me from designing the logo and the mood board to usability test and deliver the app.
Problems:
1. There are some fast food restaurant where offer food customizing but this feature is not very obvious and prominent on their apps to encourage the clients to make their own meals rather than picking ready-recipe items.
2. Most of the fast food apps are designed with real photos or a combination of photos and illustrations that ruined the persistency of design.
Solutions:
1. Designing an environment to show the feature of food customizing with a clear and easy instructor was the main goal in design of this app.
2. Creating an illustrated based design brought not only the persistency of design to this app, but also encouraged the users to make their own food because of the playful feature of the animated illustrations.
Survey
Interview
Affinity Diagram
What is your platform to
order meals? Mobile or desktop?
How do you trust an app?
What are your favorite
food apps and why?
What makes you think a
food app well designed?
Do you like to order
customized food?
How do you like to customize
your meal? Any idea?
Which items are critical to you
on ordering a meal on an app?
Competitor Analysis:
Result:
Two main apps that interviewers have mentioned:
(However they are basicley delivery app with a bunch of collection of resturant or fast food, Foodie Cafee can be one of them.)
It presents that delivery option plays an important role for users.
1. Uber eats
2. DoorDash
“McDonald's” would be the first competitor based on our search
“Chick-fil-A” with good rate and about 600K of downloading app would be one our direct competitor due to having customised order.
Information Architecture
Hybrid & Closed
Card Sorting:
For the information architecture, we decided to do the card sorting by using 50 cards and doing the research with 5 users. For preparing the cards, we analyzed competitor apps, performed a survey, interview, affinity diagram and also interviewed different users.
Site Map:
Develop
Persona:
Scenario:
Visual Scenario:
User Flow:
User Flow- Tasks:
Design
Mood Board:
Wireframes:
UI Kit:
Iterative
Development:
Usability Test:
User #1:
- The place of the icon of the S/M/L in pizza customized section
- Adding the tracking order on a map
- Making the review file more editable
- Adding a ketchup sauce on the pizza bread in its illustration
- Using color accent in instructors
- Having no scroll down action in the part of customizing food
- Adding the options of Rare/ Medium/
Well-done for the burgers
-Skipping into option
- Ordering as a guess and tracking order by order number
- Do not change options while selecting sauce or dressing, I might want to add something more or change quantity
User #2:
- Adding the options of Rare/ Medium/Well-done for the burgers
- Adding the tracking order on a map
- The place of the icon of the S/M/L in pizza customized section
- Making the step of the salad dressing more obvious
- Using a larger font for the salad dressings
- Having no scroll down action in the part of “add to the cart” in customizing salads
- Adding an item edit on the review of the shopping cart
Prototype:
Interaction Designs:
Deliver:
© 2022 by Maryam Zadeh.