Home of the world-famous Slippery Shrimp!
Yang Chow, with three locations throughout Southern California, will delight any diner with our fine cuisine, our elegant atmosphere, and our quality of service.
OVERVIEW
Case Study - Redesigning a Restaurant Website
What is Yang Chow?
Yang Chow Restaurant is a fixture of classic Chinese-American cuisine in Los Angeles. It's a popular tourist destination for dining in and has been successful for decades.
Why is Byton different?
Yang Chow is famous for its Slippery Shrimp recipe which sets it apart from other Los Angeles Chinese restaurants.
What's the problem?
The restaurant wants to expand its business to include takeout. It does not currently offer this service.
What are the obstacles?
Yang Chow's website is outdated and does not incorporate any current best practices including online ordering.
Solution
Modernize Yang Chow's website
design and include online ordering as
a feature.
Yang Chow's iconic signage
Current website
Slippery Shrimp
OVERVIEW
My Role: UX Designer | Art Director
Through research and synthesis I determined the problems diners face when they order food for takeout.
With this information I designed and tested an updated website for Yang Chow that will allow them to successfully expand their business into the takeout market.
I utilized design thinking and agile methodologies throughout the full UX process, which I've documented in the case study below.
SOFTWARE USED
DISCOVERY
The Opportunity
Yang Chow is recognized as one of LA's top Chinese restaurants.
It has the opportunity to leverage its brand recognition and grow its business in the takeout market.
Recognized by Eater as one of the best Chinese Restaurants in LA .
DISCOVERY
The Challenge
Yang Chow is currently not well positioned to succeed in the takeout ordering market.
Most restaurants that offer takeout ordering have websites that feature online ordering as well as features that help customers in making ordering decisions. Yang Chow has an outdated website design with very few of the features that consumers expect.
Example of outdated design. More examples in heuristic analysis below.
DISCOVERY
Problem Statement
People who order takeout food from restaurants are concerned that their order will not meet their expectations.
How might we help people order takeout food with confidence?
THE PROCESS
Using agile methodologies and design thinking, I incorporated multiple UX tools into my process.
RESEARCH
• Interviews
• Surveys
• Heuristic Analysis
• Competitive &
Comparative Analysis
• Persona Development
• Journey Mapping
• Feature Prioritization
• Card Sorting
DESIGN
• Design Studio Sketching
• Site Mapping
• Low Fidelity Wireframes
• Mood Board
• High Fidelity Wireframes
TEST
• Paper Protype
• Clickable Protoype
RESEARCH
Key Learnings
I surveyed 15 people and interviewed 5 others about their takeout ordering concerns and preferences. I learned that when ordering from a new restaurant, people worry that their order will be disappointing. Different people rely on different features to gain confidence that their order will meet their expectations.
People have a wide variety of concerns about their orders but for various reasons
RESEARCH
Heuristic Analysis
I conducted a review of the features (or lack thereof) of the existing website that may prevent Yang Chow from successfully launching their takeout business. Below are some of the main issues I discovered.
CATASTROPHIC
It is currently not possible to order takeout online. The only way to order is calling on the phone.
RESEARCH
Competitive Analysis
I first looked at direct competitors - websites of Chinese restaurants in Los Angeles that offered takeout ordering. I quickly discovered that Yang Chow was far behind the competition when it came to features that users wanted.
Many use photography, especially in the form of a hero carousel.
RESEARCH
Comparative Analysis
I also wanted to see what features were widely used for websites that specialized in takeout ordering
Persistant order ticket
RESEARCH
Persona
David
Graphic Designer
Age: 27
Status: Single
David has had a lot of restaurant takeout deliveries arrive with something wrong. Wether it’s the wrong item, a missing item, or even his own mistakes, he has been burned so many times that he is very picky about what restaurants he will order from.
Behavior and Habits
-
Foodie and likes to try new things
-
Spends time at friend’s houses all over the city
-
Orders takeout food 2-3 times per week
-
Has 2-3 drinks with friends before dinner
-
Paranoid he will mess up the food order
Goals and Needs
-
Only orders food online, will not use phone
-
Wants to know as many details about the food as possible
-
Relies heavily on social media and reviews to choose a restaurant
-
Ordering process needs to be simple enough to do it while slightly tipsy
"I expect everything to go wrong."
RESEARCH
Journey Map
I created a takeout ordering situation to test Yang Chow's current website against my persona's needs and preferences. It confirmed to me that the current site needed some major improvements both with features and visual design.
RESEARCH
Feature Prioritization
MoSCoW METHOD: Now that I understand the needs of my persona and the problems that arise while ordering food, I can determine the features that should be included.
I chose to use the MoSCoW method because it allows me to quickly organize the features I want to include and easily identify the most important ones to incorporate into my designs.
MUST
-
Online ordering
-
Menu redesign including photos
SHOULD
-
UPdated visual design
COULD
-
Integrate social media, ratings and reviews
WON'T
-
Update website outside of menu(not MVP)
DESIGN
Initial Sketches
To increase confidence in the ordering process that was clearly lacking in the persona's journey map, I incorporated the features highlighted in feature prioritization.
DESIGN
Mood Board - A Golden Age of LA Glamour
Yang Chow was around during the era when Chinese restaurant menus had a really graphic and memorable style. I looked to this era for inspiration.
The signage of the original Yang Chow restaurant is bold and iconic. I'd like to incorporate this element into the website design too.
TESTING
Paper Prototype
Highlighted below, usability testing with paper prototypes helped identify problems and led to solutions. I conducted in-person testing on 5 people and made adjustments to the design based on feedback.
Problem:
People had trouble reading my sketches.
Solution:
Move to mid-fi wireframes for usability testing.
PROTOTYPE
High Fidelity Screens
Below are examples of the new designs with updated features and a look & feel that aligns with the heritage of Yang Chow Restaurant as a Los Angeles icon. View clickable prototype and video walkthrough for additional screens.
Home Page:
• Clear calls to action
• Visually reflects old
school LA glamour
• Header is actually
restaurants iconic signage
• All info is above the fold
PROTOTYPE
Video Walkthrough
LEARNINGS:
Experience and insights gained from this project
• Validation through usability testing is very powerful
• It's kind of exciting when patterns start to emerge when synthesizing research
• It's important to remember that the user is always right