The challenge

People found it inconvenient when ordering food from Yang Chow. How might we streamline the ordering process to lock down potential customers.

The Solution

Create a user interface that is visually appealing and generates repeat customers. I developed a new and modernized ordering system with take out and delivery features.

I started my research with a website observation from visiting their current website.

Things I found that were problematic:

• Current web page interface is not intuitive, with too much negative space. Can’t adapt to responsive platforms.

• Not many typeface variations. Fonts are too small to read.

• Menu content is unclear, and layout is confusing to operate.

• Only option to place order is to call in.

Based on what I observed from the website, I identified some of the problems by conducted a Heuristic Evaluation using LEMeRS methodology.

We know the website needs a lot of work done. But what are some of the competitors doing?

I conducted a Competitive & Comparison Analysis on 4 other business as Yang Chow’s competitors. They are Panda Express, Phoenix Food Boutique, Newport Seafood and Din Tai Fung. This process allowed me to clearly understand the differences between restaurants and to gather useful information towards my website redesign. Most of the restaurants provide online ordering option and pick up service. Some of them even have mobile app. But Yang Chow has none of them. 

Now that I’ve gotten a basic scope of what needs to be included in the new website, I also need to understand user pain points and frustrations from different perspectives. I decided to collect qualitative data by conducting user interviews and to collect quantitative data by posting online surveys.

I asked the users to do one simple task:

Try to order some food by using Yang Chow website.

The User Persona Rob was generated based on user research to help guide through my design process.

A journey map was put together after 3 usability tests by giving users the task to order food on the website, in order to help visualize user frustrations.

Card sorting

Users found it confusing when looking at the menu. To better categorize menu items, I arranged open and close card sort to 4 participants.

Cart sort findings:

• Users found menu items were redundant and clustered in ambiguous ways.

• Users prefer protein to be grouped then separated.

A site map for the new designed website was generated based on card sorting results. I organized the current website navigation schema into a more fluid and simplified one.

Some of the changes I made were:

• Added Order Online to primary navigation.

• Added Restaurant History section and combined “Notes from the East“ (blog) under About Us.

• Combined all protein into Entrees.

Once I had a solid site map redesigned, I was able to figure out Rob’s user flow based on user scenario.

Yang Chow Restaurant has been opened in the local community for more than 40 years without a solid branding. I want to rebrand the website by giving it a refreshing new look, including redesign the logo, color palette, typefaces, website layout, etc.

Through researches, I’ve learned that the style of blue and white, or blue willow, mainly seen on porcelain China, was originated in YangChow, China.

The blue and white porcelain idea helped me to set the overall color palette to be blues with a contrast color of burgundy. Usually, on the bottom of every porcelain piece, there is always a red seal of a signature stamped on by the maker. I also took inspiration from it and applied into my design.

Paper Wireframe

I began sketching out my ideas on graph papers. With research results in mind, I locked down the features and layouts I wanted to include on the webpages after a few iterations.