Volunteer UX Research & Design · Berkeley, CA · 2021 to 2022
Asian’s
The story in short
A small family restaurant had no online ordering, and language barriers led to wrong orders. We listened to guests and staff, sketched five early concepts and built a prototype. We tested it with at least ten guests. Then the pandemic closed the restaurant before we built the app.
My contribution
What I did
- Led the project and the team
- Ran the survey and interviews
- Built and tested the prototype with 10+ guests
The team and others
- A UX researcher and a visual designer helped with surveys
My backgroundM.S. Information Science (HCI), UNC Chapel HillB.S. Computer Science
The setup
The problem
Staff
Mix-ups happened often
Staff said miscommunication with customers happened often.
Guests
Already ordering online elsewhere
Many guests used online ordering elsewhere and said it would make ordering here much easier.
A guest said
“I’d like to order online because the owner doesn’t speak English, and I’ve gotten the wrong order several times.”
Overview
A Berkeley restaurant with no online ordering, where language barriers caused wrong orders. I led a volunteer team to design an ordering app.
The core constraint
Many guests are not comfortable ordering aloud in English, so the app had to work without talking.
Survey
About 50 answers from a short Google Form. Each one led to a design choice.
90% want an app
So: a simple, clear ordering flow.
77% are fine with English only
So: a language selector, for the rest.
100% want popular dishes
So: a Popular Items section.
70% like loyalty rewards
So: a loyalty badge and credits.
What guests needed
Favorites
Regular guests want to reorder the same dishes fast.
Clear, fair prices
Guests on a budget need to see what they will pay.
Easy categories
Food should be simple to browse, without reading long lists.
VIP badge and rewards
Regular guests like to feel recognized for coming back.
Trade-offs
Early sketches
I sketched five very different concepts and showed them to people.
A · Photo grid
Fast to browse, but hid prices.
B · Category list
Clear like a paper menu, but plain.
C · Popular first
Answered the survey’s ask for recommendations.
D · Language first
For guests who struggle with English.
E · Guided steps
Almost no reading, but more taps.
Why familiar patterns
Guests preferred the simplest, most direct option. The final design built on C, Popular first.
Paper sketches
Then I sketched the full flow on paper: splash screen, onboarding, sign up, login, a home screen and a profile.
Low-fidelity wireframes
I mapped every core flow in InVision, from sign up to checkout.
Moodboard
I looked at food ordering apps with clean layouts and large food photos.
Design system
There was no brand kit, so I built a small system. Orange became the action color: bright, warm and appetizing.
Colors
Orange #FF5200, light orange #FE724C, pink red #FB2D52, green #00B46E, lime #93BC2D, charcoal #272727.
Type
Herculanum for the logo and splash; Poppins for headings and body.
High fidelity
Orange marks the main actions; a green header keeps the address and cart in view.
Key decisions
A Popular Items section
Popular dishes near the top.
Because: everyone wanted recommendations.
A language selector
One tap, from the first screen.
Because: some still wanted other languages.
A short ordering flow
Menu, order and pay.
Because: 90% wanted it easy.
A loyalty badge with credits
A VIP badge shows rewards.
Because: 70% liked loyalty rewards.
Sketch to design
See how each screen changed from paper sketch to wireframe to final design.
Splash
Onboarding
Sign up
Login
Home
Profile
Prototype
I built the high-fidelity screens into a clickable Adobe XD prototype, so testers could try a real order start to finish.
Resolution and impact
Usability testing
A welcome screen
Testers wanted a friendly introduction before the menu.
Address at the top
Testers liked seeing the address at the top of the screen.
Two-step payment
Payment was cut to two steps after Confirm Order.
Card sorting
Card sorting showed four groups. Each became a section of the Menu screen.
Browse the menu
Popular dishes, categories, search, favorites.
Rewards
VIP badge, credit, promo code, invites.
My account
Payment, cards, order history, settings.
Help
Help center, about us, contact.
Information architecture
Here is how the app is organized. The four groups from the card sort sit beside the first screens guests see.
Get started
Splash screen, welcome screen, language selector, sign up, log in.
Ordering flow
Menu → Cart → Confirm Order → Payment (two steps)
A/B testing
For each key screen I drew four versions and asked testers which they could use fastest.
Home
Category rows, chips, search first, or a featured dish.
Sign up
Three fields, social below, social first, or one question at a time.
Onboarding
Image and Skip, full image, three steps, or text only.
Checkout
Items, totals, payment first, or one page.
Testers also liked the warm color palette.
Outcome
- ~50People surveyed
- 10+Guests tested the prototype
- 0Orders measured*
* The restaurant closed in the pandemic before the app was built.
The design stayed a prototype. I am sharing the full process and the prototype as the final result.
Still unfinished
The app never launched, so I could not measure orders or mistakes. Testing gave early signals only.
Takeaways
Start with user research
A short survey of about 50 people influenced every major screen.
Adapt to change
The restaurant closed before the build, so the project stopped at a prototype. I shared the full process and the prototype instead.
Design from what people say
Language, recommendations and rewards came from guests, not my guesses.