Sakura Sushi App
My Role
UX/UI Designer & Researcher, Visual Designer
Durition
2021.12 - 2022.01
Key Word
App Design, E-commerce App
Tools
Overview
With the development of the fast-food industry, food trucks have become a dining option for many people because of their convenience, but at the same time, there are many problems such as how to save people's waiting time at pickups and how to track the location of food trucks in real-time.
Sakura is a food truck chain store specializing in Sushi. How can we solve the above complex problems for this food truck so that people can experience a comfortable and time-saving dining experience?
Challenges & Solution
From User Side
Lack of Communication
The users and servers doesn't have enough communications through online ordering platform.
Server updates all the changes of order status, so that users can receive the realtime order status.
From Server Side
Find Optimal Location
The food truck owners are unable to know which location has a higher customer influx, in order to attract more customers and increase business income.
Provide and indicate the high traffic historical locations.
User Analysis
We conducted a survey and interview with 20 food truck enthusiasts. They are students and office workers between 17 to 27, and they all have busy and tight schedules.
All participants are restaurants enthusiast, and they have numerous food truck ordering experience.
Part 1. Surveys
80% of all participants use multiple platforms to gather food truck information. They mostly use Instagram to find dishes, google to find the location, and Yelp to review the comments.
Among this 80% of online searchers, 75% of them think the process of finding an ideal food truck dish is time-consuming and complicated.
Besides, 90% of all participants suggested they prefer to dine at a food truck because they have a busy and tight schedule, and the food truck is a time-saving convenient way to eat.
What does that mean?
People think they have wasted their time on finding the ideal food truck dish. Also, they think food the food truck service seems so casual compared to that of the restaurant.
If so, what are the kind of services they want at food truck?
Part 2. Interviews
Grace
Nationality: 🇨🇦
Role: University Student
“My expectations for truck food are not as high as restaurant food, as long as it is clean and healthy.”
“For me, truck dishes should be a more convenient dinning method.”
William
Nationality: 🇨🇦
Role: University Student
“I found that I have wasted a lot of time on the waiting status. I hope I can get real-time updates on my food.”
“If I can track the food status and the time to pick up, then for me it is more convenient for me to schedule my time.”
Overall, User Need is...
The users need a personalized, easy, and time-saving food ordering experience. They want to get real-time updates about the food order.
In order to provide the user with a good food ordering experience, the servers need to know the location that has more users so that the truck can serve more users.
Storyboards
1
2
3
4
5
6
An app that users can not only see dish details, but they can also choose to pick up dishes and select a time that convenient for them to pick up. With these features, users can save time on ordering the dishes, which gives users an intimate, easy and time saving dinning experience.
Persona
Jane is a young and busy data analyst who just graduated. She is a food truck enthusiast. She needs an easy app that could assist her in ordering food truck efficiently and enjoyably.
Jane Joe
Age
23
Job Title
Location
Data Analyst
Toronto
Introvert
Extrovert
Busy
Time Rich
Independent
Team Player
Thinking
Feeling
Goals
-
Eat the ideal dishes quickly and easily
-
Intimate and easy app user experiences.
Needs
-
Find the nearest truck.
-
Have a pick-up option for food ordering.
-
Realtime Order Status updates.
Frustrations
-
Unable to know the truck location and opening hour.
-
Unable to get truck and food info only one app.
Interests
-
Other users' comments can help make decisions.
-
Collect your favorite dishes.
-
Rate and comment on the dishes.
User Flows
A section includes the "best seller" dishes. They are popular because they are tastier, so, if users don't have time to look around but still want the right choice, click "top pick" then.
Open App
Home Page
Screen
Action
Decision
Communication between Client & Server
No time to view menu?
Y
Click
"Top
Pick"
N
Scroll to menu
Top Pick Page
Select a dish
Detail Page
N
Y
Like the dish?
Similar to the "Saved" function. A section includes all user's liked dishes. It is convenient for users who want to buy their saved dishes to review their collects.
Save to
"likes"
Likes Page
Order Updates are sent to Client
Wair for status update from server
See the Pick Up message
Payment page
Payment page
Payment
Preference Page
Enter Pickup Preferences
Order at truck or Pick-up?
Pick Up
At truck
Ready for Pick Up page
Pick Up Order
Go & Order
the Likes
Rate &
Review
Rate &
Review
Review page
Update Order is Ready for Pick Up
Update Order Status
Finish Cooking
Order Details are sent to Server
Server Side Flow
Open App
Home Page
Receive New Order
See Order Details
Order Detail Page
Start to Cook
Information Architecture
Wireframes
1. Find the Dishes
Step 1.
Sign In
Step 2.
Go to the Homepage
Step 3a.
Choose to View "Top Picks"
Step 3b.
Or, choose to View Menu
Step 4.
Tap like if you like the dish
.png)
2. Pick Up Preference & Payment
Step 1a.
Select Food
Preferences
Step 1b.
"Pick Up" Button Notification
Step 2.
Check your item
Step 3.
Choose pick-up time & location
Step 4.
Payment
Step 5.
Order placed
Step 6.
New Order Message Notice
Server
Receive new order
Order Status: Confirmed
3. Check Order Status
Step 1a.
Open Notification
Step 1b.
Check Status
Step 2a.
Received processing notice
Step 2b.
Details
Step 3a.
Received ready to pick-up notice
Step 3b.
See details and notice server you are coming
User Comes and Picks Up dishes
Server
Finish Cooking
Order Status: Ready for pick up
Server
Item has been picked up
Order Status: Finished
Server
Start cooking
Order Status: Process
Server Receive New Order
.png)
.png)
.png)
Logo Design
﹢
＝
Sakura (Cherry)
Sushi
Fonts & Color
EA4B07
FFFFF3
DCA926
Animated Prototype
1. User Side
Save Your Favorite Dish
This function helps the users know which dish to order next time by checking their profile. It's a quick and convenient function that can replace Screenshots and Notes.
Customize Your Dish
Tell the server about your allergies, and other food preferences, and that helps the server meet the personalized needs of the users for food.
Choose a truck and time that is convenient for you!
Users can choose from several branch locations of the truck for their own convenience. After payment, the app can remind you of the latest pick-up time.
2. Server Side
Easily Stock in Low-stock Dishes
In common cases, some dishes are low in stock on the food trucks. With the Stock In Button, the servers are able to tell the back-end about the Low stock dishes in real-time, so that back-end workers can refill the low-stocks quickly.
Determine the next location to sell!
Unlike to store, the food truck can move to any location. In order to maximize the revenue and attract more users, the server-side app can intuitively tell the server the hotspot locations. The shade of the red dot represents the amount of revenue for the week. The server can either tap the red dots on the map or tap the suggested location.
Smooth Interaction between User & Server
Users can immediately receive the latest status about the order, so as to manage and update their schedules as soon as possible based on these messages. This saves the users time. In addition, the server app's intuitive linear UI for updating order status, and the user app's intuitive order progress bar make the entire ordering process more efficient.
1. Confirm
The server receives new order and confirmed it.
Meanwhile, the user received confirm notification.
2. Processing
The server started cooking the dishes and updated the status to "Processing".
Meanwhile, the user received processing notification.
3. Wait for Pick-up
The server finished cooking the dishes and updated the status to "Wait for Pick-up".
Meanwhile, the user is noticed to pick up the order, and the user can also notice the truck when he/she comes so that truck can get prepared early.
The server received the user's notification, the order status changes from "Wait for Pick-up" to "On the way".
4. Finished
_gif.gif)