Gourmet Dining Experiences at your Fingertips
SCOPE
Mobile app
ROLE
UX Designer
DURATION
10/21 - 01/22
Overview
Japan-based company Oishii is on a mission to make their services accessible to everyone, whether it be local residents or tourists. They wish to offer an aesthetically designed mobile application showcasing gourmet restaurants in which users can order delivery or create reservations.
Objective
Understand and address current usability issues in food delivery and reservation applications through designing a gourmet Japanese restaurant food delivery and reservation mobile application. Conduct UX research to uncover these usability issues and base the design off of these findings.
Outcome
Now Oishii has an accessible and aesthetically pleasing mobile application, which Japan-based locals and tourists visiting Japan in search of a luxurious meal delivery and restaurant reservation can use.
Speculative design for Google UX Certification.
Getting Started
For this project, I utilized a user-centered design approach which allowed me to efficiently conduct research, analyze results, and create a cohesive design solution. To begin, I formulated key questions to which I later answered through research:
Who are the primary users?
What does this app offer to users?
When and where can this app be used?
Why would users want to use this app?
EMPATHIZE
Research goals
Competitive audit
User interviews
DEFINE
Pain points
Personas
Storyboards
IDEATE
Information architecture
Low-fidelity wireframes
Usability testing, round 1
Mid-fidelity wireframes
PROTOTYPE
UI kit
High-fidelity wireframes
TEST
Usability testing, round 2
High-fidelity prototype
Phase 1: Empathize
Understanding the Food App Scene
During the Empathize phase of the user-centered design process, I gathered data pertinent to current food delivery and reservation services commonly used in Japan. After going through this phase, I was able to draw conclusions which informed the next stage of the design process – Define.
Methodology
Define research goals
Perform a competitive audit
Conduct user interviews
Research Goals
What common features do users prefer in food ordering and reservation apps?
What pain points do users experience when ordering or making reservations via app?
How would foreigners deal with language barriers and currency exchange while in Japan?
How do food apps on the market currently deal with accessibility issues?
Competitive Audit
The goal of this competitive audit was to compare the most popular Japan-based food delivery/restaurant reservation apps or websites. I sought to uncover their strengths and weaknesses in order to figure out what aspects to include in my own design.
Opportunities to improve:
Multiple language translation options.
Voice option for user input.
Consistent font/color options that are WCAG-compliant.
Fully customizable menu items.
Comprehensive filter and sorting.
User Interviews
As my method of hands-on field research, I conducted one-on-one user interviews with a group of 4 diverse individuals. I came up with open-ended questions which I believed would shed light on existing pain points in typical food ordering/reservation apps, as well as what potential users would like to see in this particular app.
Key pain points from interviews:
Having to toggle back and forth between pages.
Lack of food pictures and descriptions in menus.
No translations into other languages.
Not being able to customize orders.
Only showing the final cost of an order on the last screen.
Phase 2: Define
Consolidating Insights & User Needs
Upon completing the Empathize phase of the design process, I moved on to the second phase – Define. For this phase, I consolidated my findings to draw actionable conclusions. The third phase – Ideate – is dedicated to finding the most viable solution to what I've defined in this phase.
Methodology
Identify pain points
Conceptualize personas
Assembled storyboards
Pain Points
Lack of food pictures and ingredient/preparation descriptions in menus.
Not being able to customize food when ordering delivery or creating a reservation.
Inability to translate menu items or other text into a familiar language while abroad.
Outdated and non-WCAG-compliant UIs which don't have accessibility options.
Personas
I utilized both the improvement opportunities from the competitive audit and the pain points from user interviews to formulate personas for Sonali Kapoor and Theo Chan.
These two persona profiles address issues, frustrations, and goals that users have mentioned during interview sessions or that I have found during the audit.
Storyboards
While many food apps on the current market only offer delivery services, Oishii offers both delivery and reservation services. Therefore, it has two completely different use case scenarios.
In order to visualize these two scenarios, I put together storyboards for both Sonali and Theo which also emphasize how Oishii would benefit them as users.
Phase 3: Ideate
Generating App Features
For the Ideate phase of the user-centered design process, I gathered the conclusions I drew from the Understand phase and transferred them into design ideas.
Methodology
Determine information architecture
Create low-fidelity wireframes
Conduct round one of usability testing
Incorporate user feedback into mid-fidelity wireframes
Information Architecture
To better visualize how to design Oishii, I constructed an information architecture diagram. It demonstrates the paths a user could take for either ordering delivery from a restaurant or creating a reservation at a restaurant.
Low-Fidelity Wireframes
Using my information architecture diagram as a reference point, I assembled low-fidelity wireframes. I also incorporated these wireframes into a prototype which I later used in usability testing sessions.
Usability Testing, Round 1
As mentioned, once I completed the low-fidelity wireframes, I used them in a low-fidelity prototype which I then asked a group of 5 diverse individuals to user test. I came up with prompts pertaining to the main actions I wished to observe – logging in to the app, ordering delivery, creating a reservation, and figuring out where to add a new address or payment method. I recorded the user interactions, transcribed comments, and used my observations to formulate further improvements.
Observations from usability testing:
Testers were able to perform all the prompts quickly and easily with little to no difficulty.
Two out of five testers were confused on how to add a new address or payment method but they figured it out in less than two seconds.
Two out of five testers wanted to either increase the text size or have a high-contrast view.
One tester wanted a way to filter or favorite results on the restaurant results page.
Mid-Fidelity Wireframes
Before I moved onto the high-fidelity prototype, I made mid-fidelity wireframes which utilized feedback from the usability testing sessions. Additionally, I wanted to solidify Oishii's branding before progressing further.
Phase 4: Prototype
Adding Visual & Interactive Elements
During the fourth stage of the design process, I iterated on my previous mid-fidelity wireframes, incorporating imagery and relevant text. Once complete, I moved onto the last phase – Test.
Methodology
Put together a UI kit
Create high-fidelity wireframes
UI Kit
Kicking off the final phase of the UX process for Oishii, I assembled a UI kit for the application. It serves as a guideline for accurately maintaining Oishii's branding across all screens.
High-Fidelity Wireframes
Phase 5: Test
Final Feedback from Users
In the last phase of this design process, I put the high-fidelity wireframes to the test and iterated upon the results. In so doing, I ensured that I was able to address the pain points I defined during the Define phase.
Methodology
Conduct a second round of usability testing
Modify the high-fidelity prototype
Usability Testing, Round 2
I asked a group of 5 diverse individuals to user test the high-fidelity mockups in prototype format. I used the same prompts as before to observe changes – logging in to the app, ordering delivery, creating a reservation, and figuring out where to add a new address or payment method.
Observations from usability testing:
Testers were able to perform all the prompts quickly and easily with little to no difficulty.
One tester suggested that using actual photos instead of clipart in the Browse page might make offerings more clear to understand.
One tester commented that the ingredients section on the menu item page didn’t really serve a purpose.
High-Fidelity Prototype
Addressed Pain Point:
Lack of food pictures and ingredient/preparation descriptions in menus.
There are high-resolution photos and detailed descriptions for each food item in restaurants' menus. Oishii allows users to know exactly what they're ordering, both visually and contextually. In addition, labels are provided to mark items which suit particular dietary needs.
Addressed Pain Point:
Inability to translate menu items or other text into a familiar language while abroad.
When logging into Oishii, users have the ability to change their language and currency. Thusly, all text will be translated and all monetary values will be converted to their choice. The languages are written in their native alphabet in order to make the choices more familiar to foreign users.
Addressed Pain Point:
Not being able to customize food when ordering delivery or creating a reservation.
In addition to having food items marked with specific dietary labels on the menu page, users can also fully customize their order by adding notes to the chef. Not only can they do this for delivery orders, but they can also notify chefs and staff beforehand of any allergies or needs while making a reservation.
Addressed Pain Point:
Outdated and non-WCAG-compliant UIs which don't have accessibility options.
Oishii incorporates a clean, modern UI with minimal color, a sans-serif font, and clear iconography which all help to improve readability and accessibility. All the colors used have been tested to meet WCAG standards. If users prefer, they are able to change display options via the Account Information tab.
Browse Tab
Orders Tab
Rewards Tab
Reservations
Order Tracking
Retrospective
Working on Oishii was enriching. I've always admired Japanese culture and aesthetic, and it's been a life-long dream of mine to travel there. While researching during the early stages of design, I was able to live vicariously. Additionally, I learned how to use some of Figma's many tools and features, seeing that this was my first time working with it.
There are definitely still ways in which I can improve Oishii; I couldn't incorporate them all due to time constraints. However, I can definitely try to do so in the future!
