© NADAV MARKEL 2019

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. 

Home Page

Order online CTA and phone number prominent and above the fold

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