Embedded Files
DurationJune - October 2023
RoleSolo student project
ToolFigma
- Project Overview -
- Project Overview -
The Challenge
As part of my Google UX Design Certificate program, I decided to take on a challenge to design a food (sushi) ordering flow for a hypothetical Japanese restaurant specializing in sushi and other Japanese dishes. The Challenge
The Solution
Oishi (Japanese pronunciation for "delicious") is a mobile app that allows users to seamlessly order food from their mobile device for a quick pickup or delivery with features like food customization and tracking. In addition, the app also favors a social feature that enables for a more collaborative environment where users are able to share what they ordered and draw inspiration from other users. The app was designed for an easy and "craving" to use experience for all types of users, with accessibility in mind. The Solution
Onboarding
A simple sign up process to get the user's appetite going.Onboarding
Ordering
From browsing your nearby restaurants to selecting and customizing an item for delivery or pickup. Ordering
Inspiration/ Posting
Who says you can't be social through food? Looking for inspiration and posting your favorite dish has never been easier with the social feature. Inspiration/ Posting
So... why did I chose this prompt?
Sushi has been growing in popularity over the past few decades, especially in the United States. Not only is it a healthy and an affordable snack or meal (whichever you prefer), but it is also very delicious with endless sorts of customizable options and food complements to go with it. In the line chart below from Google Trends, we can see the growing interest popularity of sushi globally from 2005- 2021. According to the JETRO (Japan External Trade Organization), the number of Japanese restaurant businesses in the United States has also grown by almost 24% from 2018 to 2022. With this in mind and as a sushi lover myself, I thought it would be fun to design a food ordering flow for sushi cravers so that they would have a more convenient way to order their favorite sushi combinations without the wait.So... why did I chose this prompt?
- My UX Design Process -
- My UX Design Process -
- Empathize With Users -
- Empathize With Users -
In the first phase of my UX design process, it is all about placing the attention on my users. From understanding my users' needs and pain points by conducting user research, identifying my main target audience, developing empathy maps, user personas, user stories, and finally finishing it off with a user journeys to guide me to the next step in the UX process.
User Research
Conducting user research is crucial in the UX design process as it formulates the basis of understanding about the potential users that will be using the product. UX design is all about designing a product suitable for the users' needs and it all starts with researching about what the user really needs (not assuming) and truly understanding their problems/ pain points. My research goals simply consists of gaining a deeper understanding of what the ordering process is like for the participants, their day to day schedule for preparing meals, and the challenges/ frustrations they face when they want to order food. When preparing my research questions for the interview, I tried to make open ended questions so that participants wouldn't feel restricted and are able to freely express their concerns. I also narrowed down my target audience that are relevant to the questions I will be asking. For this research, I decided to interview 5 participants, some from my friend group and some colleagues of mine. Below are my questions and insights gathered.User Research
Empathy Maps
I also created two empathy maps based off from my user research. The empathy maps are a great way for me to better understand my users and their needs. An empathy map is divided into four sections: what the user says, thinks, does, and feels. All of these sections allows designers like me to truly empathize with the user from their perspective. Empathy maps could also be used throughout the entire design process, not just in the first phase. Empathy Maps
User Personas
During the interview, I have noticed a lot participants wanted a mobile app for the convenience since everyone has a phone nowadays that they carry all the time. Some of my participants also suggested a social feature in the app to share food and gain inspiration from other sushi lovers which I thought was a cool feature!Alot of participants would sometimes go into a restaurant and have no idea what to order or just don't know what's good. So, having a social feature that allows users to share each others food and customization can really help crave their appetite and actually know what they want!I used the information I gathered from my user research to create two distinct user personas to better represent my participants. User Personas
User Stories
After the personas, I wrote two one-sentence user stories told from the personas' point of view to inspire and inform my design decisions. The main goal of creating user stories is to capture the needs of my users. User Stories
User Journeys
With knowledge and understanding about my users from user research interviews, creating empathy maps, personas, and user stories, I was able to formulate two user journeys that correlate with my two personas. By creating user journeys, I was able to truly understand my users, emphasize with their emotions, and let it pave my way to the ideation phase!User Journeys
- Define The Problem -
- Define The Problem -
In the second phase of my UX design process, I had to define what the main problems my users are having and coming up with a hypothesis from the problems. With this in mind, I created two problem statements and hypothesis statements for my user personas.
Problem Statement
The purpose of creating a problem statement is to really understand the users' goals and the constraints they are having in reaching that goal. By creating a problem statement, I can reflect back on it throughout the entire design process, making sure that I have solved the problem for my users through design. Problem Statement
Hypothesis Statement
A hypothesis statement is simply an educated guess of what I think the solution to the problem statement might be and how it would help them solve their pain points. In this case, from the users' suggestion, designing a dedicated sushi ordering mobile app might be the right fit. Hypothesis Statement
- Ideate Solutions -
- Ideate Solutions -
With my problem and hypothesis statements created, it is finally time to start my favorite (third phase) of my design process, ideating solutions! From creating a competitive audit that will assist me in my crazy eights sketches, to formulating a goal statement that describes the app, user flow, storyboards, and information architecture (site map). It is going to be a long ride!
Competitive Audit
The main purpose of conducting a competitive audit is to gather insights from existing competitors (direct or indirect) of their services to see what is working and what is not. From this insight, I can design a better experience for my users that my competitors don't have. I audited two popular food ordering applications: DoorDash and Snackpass. I have also got design inspiration from some of these applications for when I create my sketches. After the audit, I have found out that none of the applications had a feature where users can look for inspiration. Although Snackpass had a gift feature that allows you to send gifts to your friends, it doesn't allow users to really draw or share inspiration by posting videos or images of what they ordered. Competitive Audit
Crazy Eights Sketches
This is one of main reason why I love the ideation phase, to be able to sketch out any idea/ interface that comes to my head without the thought of having to be perfect or good. Before I started sketching, I did have to find some inspiration of some examples of good design from existing applications so I can get a sense of common design layouts but also trying to design outside the box. Below are a few user interfaces I have drawn for my potential app.Crazy Eights Sketches
Goal Statements
Goal statements are simply the solution to the problem statements back in the define process. Unlike the hypothesis statement, which is just an educated guess of what the solution can be, the goal statement goes into more detail of what the app really does. The app I will be designing must reflect upon the goal statements. Below are the two goal statements based off my personas: Jenny and Marcus.Goal Statements
User Flows
The user flow demonstrates the most common path a user using the app would take. In this case, I designed two user flows: one for ordering food for delivery, and ordering food from inspiration with an alternate flow of making a food post as well. I could use this information to design my prototype as it will follow the path of the user flow diagrams. User Flows
Storyboards
Another reason why ideating is so much fun is the opportunity to sketch out how the product will be experienced when it is used by people in real life, in other words, making storyboards! In this activity, I drew two big picture storyboards, one for Jenny and one for Marcus and how they would use the app. As a UX Designer, understanding my user's experience is crucial, storyboards allows me to visualize that experience. Storyboards
Information Architecture- Sitemap
After making my storyboard sketches, it it finally time to complete the last part of the ideation phase, a sitemap! A sitemap basically lays out the entire information architecture of the app and what sections are related to or fall under a parent section. It is also a helpful tool for developers to understand how the app's information is laid out when coding the application. Information Architecture- Sitemap
- Prototype -
- Prototype -
Now with ideation intact, I will start the fourth phase of my design process, designing some of main interfaces. From paper wireframes to digital wireframes, and its prototype. This is where the real design happens.
Wireframe
After the initial sketches from Crazy Eights, and with the help of my user flows, goal statements, storyboards, and site map, I started designing wireframes for my low fidelity prototype of the app in Figma. Wireframe
Low- Fidelity Prototype
I then connected all the wireframes together to make an interactive prototype. The link to the interactive low- fidelity prototype of the Oishi app can be accessed here.Low- Fidelity Prototype
- Usability Testing -
- Usability Testing -
After designing my low- fidelity prototype, the final phase of my design process is to conduct a usability testing with participants to test the basic flow of the app and how it can be improved based on the users' experience. My usability testing steps is as follows.
- Create a testing research plan
- Conduct the test on several users
- Gather all the data and organize them with affinity mapping
- Come up with insights based on themes from affinity mapping to inspire iteration
Testing Research Plan
Before I began conducting my usability test on my low- fidelity prototype, I had to write up a research plan. The usability research plan can be accessed here. Testing Research Plan
Affinity Map
From the data I gathered by conducting usability testing, I came up with an affinity map in which all of my data from users are organized and placed into themes (problems) and coming up with insights (solutions) from those themes. Affinity Map
- Iteration -
- Iteration -
After conducting all the testing and affinity mapping/ analyzing data, I had to do a major redesign to turn my low fidelity into high fidelity mockups and prototype. The following are the common user flows that I've designed in high fidelity with description based off the wireframes.
Onboarding Flow
Onboarding Flow
Ordering Flow
Ordering Flow
Posting Flow
Posting Flow
- Final Designs -
- Final Designs -
Onboarding
Onboarding
Ordering
Ordering
Posting
Posting
- Closing -
- Closing -
Project Successes
After completing the final designs and its prototype, I sent out a link to some of my friends, co-workers, and classmates. Almost all of my participants had a good experience with it. Some did complain that they didn't had the freedom to tap whatever they want similar to a real app, but since it is only a prototype only the main user flow are connected. As this is my first full case study that I have made with the knowledge from the Google UX Certificate program and watching a ton of UX videos, I will have to say that I have done quite a lot and am proud of my work. However, I believe Oishi is nowhere done as design can always be improved, tested, and iterated on. Keeping up to date with the current design trends. Project Successes
What I Learned
This project is a major stepping stone for me in UX design and I have to say, I learned a lot. Researching, analyzing, designing (learning how to use Figma), iterating, and building this case study all by myself, it was challenging but rewarding at the same time. In UX design, I feel like it is more about researching and understanding my users more than actually designing as majority of this case study is from the first three stages of UX process (emphasize, define, ideate). This really shows me as a designer that users are my number one priority. I'm not designing for myself, but for the people that will be using my product. Although I understand it is not ideal to "assume", sometimes I believe assuming is fine if it is based off the knowledge from interviewing and understanding my users, with psychology also playing a huge part. Before I began designing, I always panic as I would say to myself, "Is this layout/ design good enough? Is this perfect?" something along those lines. As imposter syndrome kicks in, it would put a delay in my designs. I had to challenge myself and just start putting pen on paper and just DO IT! Typically, my first design would be the worst ones because well it's my first, but with each testing and iteration it gets better and better. What I Learned
Next Steps
I would like to conduct another usability study, this time with my high- fidelity prototype and maybe even add some additional features as suggested by my participants. Of course, the later stages of testing/ iteration is usually more time consuming and expensive since the app is more developed. Prioritization is key in this aspect. Some additional features I would add is: Next Steps
- The onboarding process should have the option where it lets the user add friends from their contact list.
- Adding reviews on the dishes so potential customers can get an insight of what the food is like. So many things to add yet so little time.
- Visuals -
- Visuals -
Here are some of the extra visuals that inspired my designs as well as a sticker sheet (or design system) that I followed for all of my high fidelity mockups.
Sticker Sheet
When making the design system for my app, I want it to be simplistic and modern. I tried making everything feel consistent, especially with the icons, buttons, spacing, and typography. For typography, since this is my first UX project, I had to choose the most simplistic font that we all know, Arial. Since it is a san serif font (the font style that is most legible when read), I chose it. Sticker Sheet
Moodboard
As a designer, I couldn't hold myself back but to add a moodboard that basically inspired my design colors and the overall theme of the entire app. Let's say red and black dominates everything, these two colors just go well so good together! A moodboard really helps me get into that design mood and immerse myself within it. Moodboard
Branding Mockups
Not only am I a UX designer, but I also love doing branding, it is just so much fun building consistency of the entire brand like they belong in one big family! Since this app is based off of a restaurant, I added logo store signs, designed merchasize, tote bags, business cards, and countertop QR code for customers to order from. All done in Photoshop. A flyer would probably be next. Branding Mockups
Page updated
Google Sites
Report abuse