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.
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.
Modernize Yang Chow's website
design and include online ordering as
Yang Chow's iconic signage
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.
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 .
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.
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?
Using agile methodologies and design thinking, I incorporated multiple UX tools into my process.
• Heuristic Analysis
• Competitive &
• Persona Development
• Journey Mapping
• Feature Prioritization
• Card Sorting
• Design Studio Sketching
• Site Mapping
• Low Fidelity Wireframes
• Mood Board
• High Fidelity Wireframes
• Paper Protype
• Clickable Protoype
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
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.
It is currently not possible to order takeout online. The only way to order is calling on the phone.
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.
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."
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.
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.
Menu redesign including photos
UPdated visual design
Integrate social media, ratings and reviews
Update website outside of menu(not MVP)
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.
Order online CTA and phone number prominent and above the fold
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.
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.
People had trouble reading my sketches.
Move to mid-fi wireframes for usability testing.
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.
• Clear calls to action
• Visually reflects old
school LA glamour
• Header is actually
restaurants iconic signage
• All info is above the fold
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