Google UX Design Certificate — Case Study: Fast Food Menu & Mobile Ordering App (Fastsaji)
In this article, I will share the first (out of three) case study project that I worked on while taking the Google UX Design course. I will follow the Google UX Design structure for outlining this case study.
Design Prompt
Design a food menu & mobile-ordering app for a large fast food chain.
Project Overview
1. The product
Fastsaji is a food delivery app that connects users with various large fast-food restaurant chains around them. Fastsaji targets customers such as workers and students who lack the time or ability to prepare meals.
2. The problem
Workers and students who lack the time or ability to prepare meals.
3. The goal
Design the Fastsaji app that allows users to easily order from various large fast-food chains, with an easy process of customizing the menu in large quantities.
4. My role
UX designer, UX researcher. Designing Fastsaji app from conception to finish.
5. Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Understanding the user
1. User research
Summary
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was employees who don’t have time to cook, and high school students who want to order customized menus with large quantities for their family members.
This user group confirmed initial assumptions about Fastsaji customers, but research also revealed that other user problems included ineffective ways to download multiple fast-food restaurant apps, difficulty customizing food in large quantities, estimated delivery time not accurate, only providing few payment options, and menu availability information. There are still many other challenges that make it difficult for them to cook by themself or go to restaurants in person.
Pain Points
- Time: Busy working employees who have no time for cooking. The estimated delivery time isn’t accurate.
- Complex: The process for order food online without apps can be too complex and ineffective. Especially when customizing the menu in large quantities.
- Lack of Features: Platforms for ordering food still lack features which makes it difficult for users.
- Accessibility: Many other people have difficulty with apps that only support one language.
2. Personas & Problem Statements
- Persona: Richard
- Problem statement: Richard is a busy employee who needs to order food quickly and delivered it on time because they have no time to cook and wants to focus on work.
- Persona: Natalie
- Problem statement: Natalie is a high school student who needs a delivery app that is able to order a customized menu with a large quantity because it’s often the orders don’t arrive correctly and they worry about ingredients.
3. User journey maps
Mapping Richard’s user journey revealed how helpful it would be for users to have access to a dedicated Fast Food Menu & Ordering App.
4. Competitive audit
The competitive audit goal is to compare the ordering experience of each competitor’s app.
Starting the design
1. Paper wireframes
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. I prioritized a quick and easy ordering process to help users save time.
2. Digital wireframes
From the paper wireframe, I turned it into a digital wireframe using Figma.
3. Low-fidelity prototype
Using a completed set of digital wireframes, I added some details to define and create a low-fidelity prototype. The primary user flow was ordering food from fast food restaurants. I use this prototype for usability studies.
4. Usability studies
I conducted two rounds of usability studies. The first study used a low-fidelity prototype to test and improve features, flow, and functionality. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Research Goals
- Determine if users can complete core tasks within the prototype of the fast food menu & ordering app. Determine if the fast food menu & ordering app is difficult to use.
Parameter
- Study type: Unmoderated usability study
- Location: Indonesia, remote
- Participants: 5 participants
- Length: 5–10 minutes
Findings
- Delete button on the cart page is difficult to find for almost all users
- It’s not immediately clear how to enter the page to give ratings and tips
- Users want the availability of the menu on the app in sync with the restaurant
- There’s no clear information on what stage order progress has reached
Refining the design
1. Mockups
- Usability studies show that many users misunderstand removing the menu from the cart by pressing the “-” button. So that in the new design the quantity increase/decrease buttons will be removed, so the user can try to swipe until they find the delete button.
- The previous design of the rating button appears in the modal after the order arrives. However, many users have missed this step. So I made the button rate and tip clear on the same page if the progress bar shows delivered.
- Usability studies reveal confusion on the order progress screen, users don’t know when the restaurant is preparing food or being delivered. So I added a progress bar along with brief information and illustrations.
- In the previous design, there was no information on the availability of the menu at the restaurant. So that the design is improved by adding availability information that is in sync with that in the restaurant.
Key mockups
Design Component
- For color, I used the color palettes generator here. It’s a fun experience to find your own palettes!
- For typography, I actually followed Apple’s Human Interface Guidelines you can visit here. I just changed the font to Inter.
- For icons, I used Material Icon.
- For illustration, I used storyset on freepik you can visit the link here with some modifications by me.
- And for other components such as buttons, navbar, cards, etc. You can look at the image below. It might look complicated, but actually it isn’t! And if you are on Figma and don’t apply components yet, this is your sign.
2. High-fidelity prototype
The latest high-fidelity prototype provides a cleaner user flow from selecting and custom menus, checkout and payment, monitoring the delivery process, to giving rates and tips.
3. Accessibility
- Used both icons and text to help make navigation easier.
- Provided multiple languages to users who have language limitations.
- Used detailed imagery for menus and include illustrations to help all users better understand the designs.
Going forward
1. Takeaways
Impact
The Fastsaji app makes users complete the process easily, is enjoyable, and has a visually appealing design.
One quote from peer feedback:
“The process from start to finish is very clear and enjoyable as the design is visually appealing.”
What I learned
While designing the Fastsaji app, I learned that it’s very important to iterate the design periodically because it will find flaws and improve them for the better. Usability studies are also very important to gain insight from others.
2. Next steps
- Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
- Conduct more user research to determine any new areas of need.
- Re-check the color and font size selection whether it meets the standard or not to ensure that it provides the best user experience for various groups.
