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.
Research
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.
When asked about the online ordering services, the patrons were not aware that they can order through the delivery partners.
Concept
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:
The websites all had large buttons flanking the hero section. They provide quick and easy access to the important pages (e.g., menu).
The websites had the menu items organized neatly. The menu provided graphics to indicate different attributes (e.g., spicy, vegetarian).
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.
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.
Live Design
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.