Yopo Logo

Website Overhaul (Design + Developement)

Project Details


Stefan Guan - Web Designer

(User research, wireframing, prototyping, mockups, developer)

Febrary 2022 - August 2022


Yopo Sweet Mandarin is a restaurant serving up traditional Chinese food. They are located in the heart of Yaletown, Vancouver BC.


To revamp Yopo Sweet Mandarin's online presence. Around this time, COVID-19 hit local businesses and restaurants especially hard. With many places limiting walk-in service, I noted that having a strong online presence is a key to success. When I looked at Yopo's prior webiste, I found that it had accessibility and usability challenges. Thus, I set out to redesign Yopo's website, while maintaining their brand identity.


I kicked off the project by conducting user surveys. I got in contact with some of the patrons through the owners. Some of the inqueries included: frequency of visiting the website, intent, roadblocks, and more. The survey resulted in important challenges that the new design has to solve.

User Challenges


The users browsed the website through their mobile phones. They found that the site was not mobile friendly. For example, they had to frequently zoom in and out.


The users found it difficult to find dishes via categories. For instance, they had to manually scroll to find the main category of the dish.

Online Ordering

When asked about the online ordering services, the patrons were not aware that they can order through the delivery partners.


With the user challenges in mind, I then investigated restaurant website designs. For example, I looked at restaurants like Miku and Blue Water Cafe. I noticed some patterns:

Prominent Call to Action

The websites all had large buttons flanking the hero section. They provide quick and easy access to the important pages (e.g., menu).

Simple Menu Structure

The websites had the menu items organized neatly. The menu provided graphics to indicate different attributes (e.g., spicy, vegetarian).

Contact Information

The websites always made it easy to find contact information. Social media links and phone numbers were easy to find (e.g., in the footer, in a contact page).

Given the feedback from patrons and knowledge from other restaurants' sites, I drafted up a quick diagram for the information architecture. Which consequently helped me with the initial prototype.

The information architecture for the website Mobile layout for the website Rough sketch of the app design

User Testing

I gave the prototype to the owner and some of their patrons to test out the new design. They generally liked the visual refresh but found some minor issues. For example, the mobile navigation menu elements were placed too high and the map was too small on the desktop view. Provided with the feedback, I created high-fidelity prototypes both mobile and desktop.

Second wireframe with considerations to the insights Second wireframe with considerations to the insights

Live Design

Click on the "window" to cycle images

Concluding Thoughts

I initally offered to overhaul the website as I noticed the user experience was sub-optimal. I leveraged my Google UX Design Course knowledge to conduct user research and see how I could improve the website. Through iterative design and data-driven decisions, I was able to develop and deploy a static website befitting of the restaurant.