Hop Li Seafood Restaurant
Re-designing the website for a local Chinese restaurant in Los Angeles to attract new costumers and drive customer engagement
Project Overview
Problem
Hop Li Seafood Restaurant is a local Chinese restaurant in West Los Angeles that has been operating for over 15 years. They have an existing website that is outdated and only has limited functions. They rely heavily on word of mouth from existing customers or their Yelp page to spread awareness of their restaurant.
Solution
A re-design of Hop Li’s existing website that includes all the necessary features that users look for as discovered through conducting user research.
My Role
UX Researcher, UX/UI Designer
Project Duration
June-July 2023 (80 hours)
Tools
Figma
RESEARCH
Competitive Analysis
I first wanted to have a solid understanding of the way that typical restaurant websites function and look. In order to accomplish this, I examined the websites of 3 Asian restaurants located in the same vicinity as Hop Li. This process helped me identify the strengths and weaknesses of each website as well as understand what features would be beneficial to also include in Hop Li’s website.
Survey
I administered a 9 question survey to 7 participants in order to gain better insight into these topics of interest:
Key features that customers look for when using a restaurant website
Customer preferences about dining in or ordering takeout
The apps, websites, or other sources that customers are using to find out more information about a new restaurant
Previous positive experiences using a restaurant’s website
What were the results?
100%
of participants expect to see the full menu included in a restaurant website
85%
of participants expressed that they appreciate when prices are included on the menu
71%
of participants prefer to dine in over ordering takeout
User Interviews
I interviewed 3 participants between the ages of 20-30 who have ranging experience with either dining in or ordering takeout from restaurants. Some use restaurant websites as their first point of reference when looking into a restaurant while others rarely look on the websites and instead rely on other sources like Yelp.
Research Objectives:
Understand each participants experiences using restaurant websites
Identify factors that constitute a positive or negative experience when using a restaurant website
Better understand the factors that lead to a positive dining experience and also makes participants want to return for future meals
DEFINE
Affinity Mapping
All data collected from the user interviews were affinitized and used throughout the rest of the design process. Major insights gained from the user interviews were users’ motivations, expectations and frustrations when it came to using restaurant websites.
POV and HMWs
To clarify my findings from the user interviews and better understand my user’s needs, I created a problem statement and HMWs to aid in the process of generating solutions.
User Personas
I created 2 user personas: Ben “The Takeout Customer” and Robert “The Dine in Regular” who both showcased the goals, frustrations, and motivations that I discovered through my research.
DESIGN
Feature Roadmap
I developed a feature roadmap to guide me through the features that I needed to prioritize. These features needed to align with my user personas’ needs and help them meet their goals.
Sitemap
I formed a sitemap to better make sense of the site’s information architecture. I created an initial sitemap but after speaking with interview participants during a follow up, they offered feedback that improved the site’s overall organization.
Before
After
User Flows
I created 2 key user flows: viewing the menu and making a takeout order. These user flows helped me see the path that users were going to take and whether these paths led them to their intended goal.
Mid Fidelity Wireframes
Having a good foundation of how each screen will connect, I went on Figma to create my mid-fidelity wireframes. I had two ideas for the home page regarding the FAQs and About Us portions so I created two versions of the wireframes. I conducted concept testing with 4 participants and asked them which version they preferred.
What were the concept testing insights?
100%
of users voted for version 2, noting that the about us section appeared less cramped and the FAQs section seemed more fitting to have at the end of the page.
75%
of users preferred each section of the FAQs dropdown menu to open one at a time. Users explained that this makes the overall design more organized and less overwhelming by limiting the amount of information they see at once.
Style Tile
To ensure that the UI and branding stays consistent throughout the website, I created a style tile. When speaking with the stakeholder, they wanted to keep the original logo of the business. I also stayed true to the restaurant’s color palette however I added a few more secondary colors that accented the overall website.
High Fidelity Wireframes
My research led me to understand that users value having access to the full menu and prices before stepping foot into the restaurant. Since this was high priority I made sure to include these features in my wireframes.
Usability Test
A usability test was conducted with 3 participants. The testing was done in person and each participant was asked to complete a set of 4 tasks: view either the lunch or dinner menu, look through the FAQs section, read the About Us section, and examine the contact form.
Final Prototype
Overall the prototype was well received and all participants were able to complete the 4 tasks asked of them. I incorporated the feedback about the interactive map into my final prototype. You can view a video of the prototype in action or click through the prototype yourself and try out the tasks!
Conclusion
Previous
What’s next?
It would be helpful to have more participants test out the prototype and hear their thoughts on the overall experience. I will continue to work closely with the stakeholder and possibly a developer to bring the prototype to life. The stakeholder has also mentioned exploring the possibility of creating an online takeout ordering system in the future.
Personal Takeaways
Overall, getting to work with a real life stakeholder helped me learn how to present my work, collaborate on a team and defend my design decisions. I honed in on my communication skills and found that getting feedback in any form was crucial in each step of my design process to help me validate my solutions.
Next