I uncovered that Gao had a huge Instagram following, and that’s where customers primarily interacted with the brand online.
Responsive Web Design:
Gao Viet Kitchen
Instagram-Famous Restaurant Extends its Social Media
Brand to Web
Instagram-famous restaurant, Gao Viet Kitchen elevates its brand experience with responsive web design
Background
Established in 2018, Gao Viet Kitchen is a family-owned "Instagram-famous restaurant," in San Mateo, CA that serves creative Vietnamese dishes with high quality ingredients. The recipes are an evolution of recipes from the owner’s family. Gao Viet Kitchen is consistently ranked in the top 3 on Yelp for Vietnamese food in the Bay Area.
Problem
Gao’s website is currently not much more than a menu with photos and dining policies. The owner, Viet Nguyen, wants to create a responsive website that is an extension of the Instagram brand and also enhances the in-person dining experience. As a small business owner, he is constrained by time and technical capabilities.
Solution
I designed a responsive website that enabled customers to find the information they were seeking when dining at Gao, including a new filter for dietary restrictions, increasing the usability rating of the site by 25%.
Tools
Figma
Figjam
Balsamiq
SurveyMonkey
Team
Solo project
My Role
UX/UI design
UX research
Timeline
Overall: 8 weeks
Discovery & Research: 2+ weeks
Design & testing: 6 weeks
Design Process
___
Discovery is the journey; insight is the destination.
___
Understanding the client
I started with a project kickoff to understand what the client's goals were. After spending a day shadowing Viet in his restaurant, I felt like I had a good understanding of what his day-to-day was like and what he was capable of technically.
I uncovered that he had a huge Instagram following, and that’s where customers primarily interacted with his business.
His goal was to create a web experience that was an extension of his Instagram brand that would also improve the customer's dine-in experience.
He also needed to be able to manage the website on his own once the site was built. As a small business, he didn't have a team to manage the web content.
Customer Surveys
I kept his goals in mind and created a research plan with the objectives of understanding the customers' needs and designed an online survey using SurveyMonkey. I then recruited participants on Yelp and Instagram and selected 8 participants who represented current customers, potential customers, and food influencers. The survey included open-ended, ordinary scale, and multiple choice questions, including usability ranking and satisfaction scores. From the survey responses, I was able to draw the following. key insights:
Finding #1
A robust menu is key
Survey participants shared that the menu was the most important information they were seeking when visiting the website.
They found the photos and pricing helpful when deciding whether to go or what to order when at the restaurant since the restaurant uses a QR code that directs customers to their web menu.
Finding #2
Information is missing and disorganized
The biggest pain point users had when visiting the website was being able to find the information they were seeking.
63% of participants rated the website a 3 out of 4 for usability. We want to get this number up to 4.
Over ⅓ of participants shared that the menu was confusing to navigate and missing dietary info such as allergen info.
___
How might we reduce the friction for customers planning to dine at Gao and choosing what to order when using the website?
___
Sitemaps help to visualize how information is related to each other
Before designing any screens, I built a sitemap to address the issue of the content being disorganized. The sitemap helped me organize and visualize where all information would live on the website and the relationships between them. I chose to use a flat structure to enhance the discoverability of content because there are fewer levels to click through.
Sketching to validate designs
Once I defined the relationship between all the different pages, I started sketching ideas for the landing page and the menu for desktop. By sharing my sketches with a peer, I was able to quickly vet my designs. Feedback helps you improve on your original ideas by pushing you to think beyond the initial problem.
The main critique was that the user had to click to see the different menu sections instead of scrolling. I brainstormed off and landed on a sticky sidebar menu design where the user could scroll (or click) and the sidebar would update to what section the user was in. See the before and after wireframe sketches here:
Peer feedback improves designs
Once I was happy with the sketches, I moved on to mocking it up and showed them to a couple of designers. Below you can see my before and after. One feedback I received was that the main message didn’t seem right, that the diet filter shouldn't be the highlight of the page.
I also received feedback that the sidebar menu and the dropdown menu seemed like they were plopped on top of my design and the colors didn’t seem cohesive.
I revised my design based on their feedback and selected a dark brown for the sidebar and diet filter dropdown for the inactive state and Gao "brown" for the active state, which I think looks much more cohesive.
I also moved the diet filter to be right above the menu, which made more sense as the customer could see they were related when choosing what to order. After that, I was pretty happy with the final desktop design.
Translating desktop designs to mobile
Next I translated the desktop wireframes into mobile mockups. One particular challenge was how to reimagine the sidebar menu sections for mobile. I decided on a scrolling menu for the sections.
Once my mockups were defined enough, I conducted a quick usability test with 3 participants. The testing revealed confusion with the scrolling menu sections at the top since it wasn’t intuitive that the menu continued off screen. I made alterations based on this feedback, and after that I found that the issues were resolved. See the before and after here:
The final design captured the Instagram experience and improved usability by 25%.
The final design resolves user pain points
Users were able to find hours and location as well as dining policies easily from the main navigation, reducing the time spent by staff on the phones.
The diet filter was a delightful feature that users reacted positively to in addition to the allergen icons in the menu item descriptions.
After the redesign, 100% of users rated the website’s usability a 4 out of 4.
And lastly, the Instagram experience continues on web
Below you can see the before and after designs of the landing page. I kept the brand ethos from Instagram and the owner's voice present in the new design but toned down the distracting color-blocking and typography choices. Information is housed where customers are easily able to find what they're looking for. I added personal elements that I found were the hallmark of his Instagram brand, including his travels to Vietnam and the family atmosphere of the staff. Overall, the client was very pleased that his "Instagram-famous" personality came through on the website.
Key Learnings
Peer feedback during sketching and wireframing helps avoid costly mistakes in development.
Scrappy testing is an inexpensive way for a designer can improve their designs.
Understanding your client’s needs and working within their constraints can be an opportunity to be more creative.
Thank you for reading my case study!
Want to work with me? Feel free to contact me!
...or just say hello on my social media.