Jump to ↯
Takashi Sushi
Takashi Sushi
Discovering the ins and outs of restaurant chain e-commerce. (Personal Project)
Discovering the ins and outs of restaurant chain e-commerce. (Personal Project)
Hats I wore
UX Designer
UX Researcher
Timeline
Dec 2023 — Jun 2024
Skills
Personal Project
End-To-End
Mobile App Design
UX/UI
Online e-commerce
Who?
Who?
Takashi Sushi is a large chain sushi restaurant that fosters a playful family-friendly environment with cute, artistic visuals. Their mission is to present Japanese cuisine in a fun way while providing quality catering.
Takashi Sushi is a large chain sushi restaurant that fosters a playful family-friendly environment with cute, artistic visuals. Their mission is to present Japanese cuisine in a fun way while providing quality catering.
The Challenge
The Challenge
They want to support their own online system and don’t want the fees current platforms require. The business needs an app that allows customers to order pick-up and delivery and make reservations.
They want to support their own online system and don’t want the fees current platforms require. The business needs an app that allows customers to order pick-up and delivery and make reservations.
User Research
User Research
Sample User Persona
Sample User Persona
Mary is a secretary for a tech company CEO. At work, she is always busy running errands and has little time to herself. After work, she attends to her child and takes courses online. She exercises on weekends and tries to watch her diet.
Goals
Spend more time with friends and by herself
Get better at her job while taking care of her child
Stay healthy but still not spend much time on food prep.
Goals
Spend more time with friends and by herself
Get better at her job while taking care of her child
Stay healthy but still not spend much time on food prep.
Frustrations
Spends too much time on choosing food options.
Has hard time reading while multitasking
Does not get food in time.
Hard to find healthy options
Frustrations
Spends too much time on choosing food options.
Has hard time reading while multitasking
Does not get food in time.
Hard to find healthy options
“I’m a busybody so I need to manage my time efficiently. My food choices are rather spontaneous.”
“I’m a busybody so I need to manage my time efficiently. My food choices are rather spontaneous.”
“I’m a busybody so I need to manage my time efficiently. My food choices are rather spontaneous.”
Sample User Journey Map
Sample User Journey Map
Pain Points
Pain Points
1
1
Not able to translate from English to another language
Not able to translate from English to another language
2
2
Too much small text and not enough images
Too much small text and not enough images
3
3
Inaccurate delivery time
Inaccurate delivery time
4
4
Food recommendations don’t line up + no nutrition facts
Food recommendations don’t line up + no nutrition facts
Starting the Design
Starting the Design
Research to Flows
Research to Flows
Research to Flows
I researched applications such as the McDonalds app, Door Dash, and other Japanese restaurants' apps to learn strengths and weaknesses.
I researched applications such as the McDonalds app, Door Dash, and other Japanese restaurants' apps to learn strengths and weaknesses.
User Flow 1 + 2: Place an Order + Make a Reservation
User Flow 1 + 2: Place an Order + Make a Reservation
To accommodate users who are in a rush and users who prefer ordering via phone call, a call button is displayed as one of the main action buttons
To accommodate users who are in a rush and users who prefer ordering via phone call, a call button is displayed as one of the main action buttons
User Flow 3: Editing an account
User Flow 3: Editing an account
The interaction between the ordering process and the user’s account will play a large role in testing.
The interaction between the ordering process and the user’s account will play a large role in testing.
Initial Wireframes
Initial Wireframes
I followed a sequential flow when drawing paper wireframes.
I followed a sequential flow when drawing paper wireframes.
Initial Wireframes
Initial Wireframes
Instead of the usual multiple sections in one page, I predicted that users would navigate more efficiently if each section had its own page instead. This would allow jumping between sections more efficient.
Instead of the usual multiple sections in one page, I predicted that users would navigate more efficiently if each section had its own page instead. This would allow jumping between sections more efficient.
Instead of the usual multiple sections in one page, I predicted that users would navigate more efficiently if each section had its own page instead. This would allow jumping between sections more efficient.
Usability Test 1
Usability Test 1
Users had trouble checking out, making reservations, and interacting with the restaurant.
Users had trouble checking out, making reservations, and interacting with the restaurant.
Affinity Diagrams
Affinity Diagrams
“Confusing because I don't think I need to see my address at the top”
- Participant A
“Confusing because I don't think I need to see my address at the top”
- Participant A
Iterating and Iterating
Iterating and Iterating
Points System
Points System
Why would users use the app? What makes it valuable to customers?
Points & Rewards System
Points & Rewards System
Users earn points with each order, which they redeem for free rolls, beverages, and more!
Users earn points with each order, which they redeem for free rolls, beverages, and more!
Usability Test 2
Usability Test 2
I wanted to test the points system as well as all the changes I made previously.
I wanted to test the points system as well as all the changes I made previously.
“I'd like to check how many points I have in the account information. I want to see how many points I can earn from each order. If I click the bento or roll, I can see how many points I can earn by ordering the item...”
-Participant C
“I'd like to check how many points I have in the account information. I want to see how many points I can earn from each order. If I click the bento or roll, I can see how many points I can earn by ordering the item...”
-Participant C
Let's Redesign the Checkout Process.
Let's Redesign the Checkout Process.
Reimagining Checkout
Reimagining Checkout
The Final Product
The Final Product
What I learned
What I learned
Doing lots of research before wireframing allows one to predict a lot of issues, but rapidly testing and iterating is a MUST.
Doing lots of research before wireframing allows one to predict a lot of issues, but rapidly testing and iterating is a MUST.
Making designs that feel familiar to users lets the designer make better predictions when conducting usability studies and increases usability. Don't try to reinvent the wheel.
Making designs that feel familiar to users lets the designer make better predictions when conducting usability studies and increases usability. Don't try to reinvent the wheel.
Frequently revisiting the initial goal and challenge keeps one from getting sidetracked in the smaller details. For example, accessibility may take higher priority than a simple animation.
Frequently revisiting the initial goal and challenge keeps one from getting sidetracked in the smaller details. For example, accessibility may take higher priority than a simple animation.
Don't use red as a main button color. It signifies error.
Don't use red as a main button color. It signifies error.