Foody
UX Design | Google Certificate Project | Figma | April 2022
Foody is a food delivery app to target customers like commuters and workers who care about their health but lack the time or ability to prepare a proper meal.
Problem
Busy workers and commuters lack the time necessary to prepare a healthy and proper meal.
Goal
Design an app for Foody that allows users to easily order and get fresh, healthy meals delivered.
Design Process
Research
Summary
I conducted interviews and created empathy maps to understand the users I’m designing for and thei needs. A primary user group identified through research was working adults who don’t have time to cook proper meals.
This user group confirmed initial assumptions about Foody customers, but research also revealed that time was not the only factor limiting users from cooking at home. Other user problems included challenges that make it difficult to get groceries for cooking or go to restaurants in person.
Pain Point
Persona
The insights I gathered during my research helped me develop two personas.
Starting the Design
Outline an User Flow
To outline the user’s needs in the process of using the app, I created a user flow that is the anticipated path taken by users on an app, so they can complete a task from start to finish.
Creating a storyboard
For ideation that helps outline an ideal flow of the design, I created a storyboard imagining the user using the app. There are two types of storyboards. Big picture and Close-up.
Big-Picture storyboard
To understand the entire user experience, including the different challenges, potential pain points, and types of interactions the users will encounter, I created a big-picture storyboard first, which focuses on how people will use the product throughout their day and why the product will be useful..
And then, created a close-up storyboard, which focuses on the details within the product, like screens of an app to think through practical ideas about improving the product.
Creating wireframes
Based on all the research and ideas that I’d came up with, I created wireframes to establish the basic structure of a page and to highlight the intended function of each element. To get my idea out fast and explore a lot of ideas, created paper wireframe first, and then developed digital wireframe later.
Paper wireframes
Close-Up Storyboard
Taking the time to draft iterations of each app screen on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. After drawing, I reviewed the versions of the wireframe I came up with and added a star next to the pieces that would most effectively solve the problems.
Digital wireframes(w/figma)
As the initial design phase continued, I made sure to base screen designs on feedback and findings from user research.
Easy navigation was a key user need to address in the designs in addition to equipping the app to work with assistive technologies.
To demonstrate a complete user flow, from the home screen to the ordering process screens, to the checkout and confirmation process, I created a total of eleven screens for the digital wireframes.
Low-fidelity Prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype.
The primary user flow I connected was Selecting and ordering foods,
so the prototype could be used in a usability study.
Refining the Design
Building a research plan
To test the early concept of the design, I decided to conduct a research to get some insights to improve the low-fidelity design. First, I built a research plan to test my prototype.
To evaluate how easy it is for participants to complete core tasks in a design, I conducted a usability study.
Usability Study
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
First, I conducted an unmoderated usability study for the app. I had five participants test our low-fidelity prototype and provide feedback from the comfort of their own homes.
I used a spreadsheet to take notes about the entire usability study in one place, and here are the results.
Getting insights from observations
First, I gathered all of the data from our usability study in one place. And I organized the data using a method called affinity diagram. Third, found themes in the data to identify common themes among participants
and come up with insights for each theme.
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Categorized findings into themes
Based on an affinity map I created, identified 3 themes that needed to be solved.
Insight Identificaiton
I figured out 3 main research insights that I need to handle. Based on that, I updated the design of the prototype.
Insight #1. Clarify the time standard of fast delivery in the first place
Insight #2. Change the landing page when clicking the category option so that
the repeated screen is not popping up.
Insight #3. Make it possible to edit shipping and payment information.
Creating high-fidelity mockups and prototype(w/figma)
Key Mockups
High-fidelity prototype
The final high-fidelity prototype presented cleaner user flows for selecting the menu and checkout. It also met user needs for an editing ordering information option.
User Journey Map
To figure out obstacles that users might face while using the app, created user journey map.
Tina’s user journey map
Goal: Order foods customized for vegetarians to get them delivered easily and quickly.
Problem Statement
Based on the persona and the user journey map, I defined the problem statement that should be addressed.
Tina’s Problem Statement
Tina is a busy working adult who needs easy access to healthy food ordering options because she has no time to cook dinner for herself.
Value Proposition
Based on users’ needs I’ve found out, I came up with value propositions of the app that will meet those users’ needs.
Competitive Audit
To come up with a lot of ideas before deciding on one solution, I explored an overview of competitors’ strengths and weaknesses to learn about what has worked and not worked.
This includes: Identifying key competitors, Reviewing the service that competitors offer, Understand how competitors position themselves in the market, Examining what competitors have done well and what they could do better, How competitors talk about themselves.
Takeaways
Impact
The app makes users feel easy to use and helpful to their lifestyle.
One quote from peer feedback:
“I think it's easy to navigate in general. Because it is organized by the types of food, I'll be easily browsing and finding what I want to order. And the fast delivery option seems to be useful as well. I'll use this app."
What I learned
While designing the Foody app, I learned that design is not just about making something visually appealing. User-centered mind is key to design the product. By understanding user’s needs and pain-point via usability studies, I’ll finally be able to make the product that is really helpful to the actual users.
