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 new and 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.

___

I uncovered that Gao had a huge Instagram following, and that’s where customers primarily interacted with the brand online.

I uncovered that Gao had a huge Instagram following, and that’s where customers primarily interacted with the brand online.

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:

A Local Restauranteur Expands His Instagram Brand to Responsive Web

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.

A Local Restauranteur Expands His Instagram Brand to Responsive Web

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?

___

A Local Restauranteur Expands His Instagram Brand to Responsive Web

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.

A Local Restauranteur Expands His Instagram Brand to Responsive Web

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:

A Local Restauranteur Expands His Instagram Brand to Responsive Web
The final design captured the Instagram experience and improved usability by 25%.

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.

A Local Restauranteur Expands His Instagram Brand to Responsive Web

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.