Taste Good Beijing
My Role
Product Designer
Team
Danial Tahir, Matthew Li
Timeline
2 weeks (Feb. 2024 - Mar. 2024)
Tools Used
Figma, Adobe Photoshop
Overview
This project was done in collaboration with a software engineer after we had taken on the challenge of creating a website for a local restaurant we both enjoy. I was tasked with designing a desktop and mobile web app for the restaurant. Initially given brand colors and a rough blueprint created by the developer as a starting point, our primary goal was to create a website that was scalable, informative and easy to use before handing off to Matthew for development and eventual product launch.
Problem
Taste Good Beijing would greatly benefit from a well designed, scalable website in order to maximize business goals through increased digital exposure and order volume.
My Solution
Taste Good Beijing Mobile and Web App
Primary User Research
Starting Point
Notable issues from usability testing:
The header bar is large and distracting, the Yelp bar is an inconsistent size compared to other website sections
The locations and hours are present but the typography could be improved to make them easier to read
The user would have to look up the Yelp reviews through a search engine rather than being able to find them all on the landing page (they were not properly linked)
What Makes A Good Restaurant Website?
How might we create a website that provides an engaging, valuable experience to the user while growing our customers?
How might we optimize scalability to show the most important information user’s actually want on both platforms?
How might we measure the design’s success to ensure we created a good product that benefits both potential diners and increases revenue for the restaurant?
We began the research process with a list of How Might We questions to establish our user and product goals:
We polled 8 users ranging from ages 15-62 to find out what features they valued most when researching potential restaurants:
Secondary Research & Competitive Analysis
77%
of diners visit a restaurants website before deciding to dine
- MGH
89%
of restaurant research before dining is done on mobile devices
98%
of consumers read reviews before visiting or ordering from a restaurant.
Marugame Udon
Clear locations section showing the hours of operation, address and contact information
Minimal, cohesive UI offering few visual distractions and keeping key info prominent
Jade China
Clear product(food) shots advertising a popular dish
Prominent hero section featuring a clear call to action prompting the user to view the menu or order online immediately after landing on site
Key Research Insights
The features outlined above also converge with the needs we discovered through our user survey and secondary research. With our findings, we created a list of necessary services our website would feature:
The website must be branded and feature menu item images, as food is the most important product a restaurant provides.
2)
3)
The menu, restaurant locations, contact information and hours of operation must be clear and prominent.
1)
Taste Good Beijing’s website must be mobile friendly as well as functional on desktop to account for both user groups.
Low Fidelity Designs
Initial Wireframes
We sent these designs out the same sample of 8 target users for usability testing. I tasked our users with finding the menu, the closest location to them and reading all 3 included testimonials. Additionally, I asked them to rate their satisfaction while completing these tasks and measured the time it took to complete all the tasks. I used observational usability testing to provide immediate feedback on my design and assess any pain points to be iterated upon.
Result of Initial Test:
100%
task success rate
4/8
users found the web + mobile app intuitive
8.3 s
Average time to complete all tasks
Pain Points
Text containing info about the restaurant’s hours/location was too small on desktop making legibility difficult
The mobile version did not have smooth navigation options
No option to read more testimonials for the restaurant’s particular locations, if a user wanted to find Cupertino reviews they would have to manually search on Yelp
Key Iterations
Hours and Locations Section Redesigned
Key information made cohesive and more legible
Reservation button added for both locations
100% of users preferred the new design
Mobile Navigation Redesigned
Locations button changed to pop up navigation window to create a more familiar interaction
User engagement with the mobile app increased by 2 clicks on average, time spent on the app increased by 2 seconds
100% of users preferred the new design
Testimonial Section Redesign
CTA to directly access reviews for both locations built into the website section
Individual reviews turned into carousel to increase user interaction and retention with the website
100% of users preferred the new design
Final Screens
Evalution
Final User Testing Results
Once the redesign was completed, we sent the completed hi-fi prototypes out to the 8 users we had sent the initial wireframes to with the same tasks of finding the menu, the closest location to them and feel reading all 3 included testimonials. Additionally, we asked users how intuitive the process felt and once again kept the time to complete the task, as a restaurant website should both advertise food properly and be a positive experience for users.
Key Performance Indicators
“The new website has a much smoother feel, and all the essential information is clear and easy to find.” - J.L.
“I love the new design, it’s very functional and easy to use.” - C.B.
“I appreciate how minimal the website design is while still having all the relevant information I’d want, and the maps are a nice touch.” - T.H.
Notable User Testing Quotes
Reflection and Closing Thoughts
Takeaways
This was both my first design project done in collaboration with an engineer and my first responsive design project. As a result, I had to work around the constraints of designing elements that would be effective on two interfaces while not going overboard to the point where the features would be too difficult to implement during development. Frequent, clear communication between my teammate streamlined the design process and allowed us to prevent future headaches later on.
Communication is Key!
Since the website is not yet live, we cannot measure its performance using tools like Google Analytics or analyzing cookies. If we did have access to these tools, the main things we would be looking out for are time spent on the website, the amount of actions taken from the landing page and the amount of time spent on the website which pairs with the most frequently clicked buttons. This data would help us continue to improve the design to fulfill our business and user goals.
Moving Forward
Given more time…
We would like to partner with the restaurant to obtain official product shots of the restaurant food to incorporate into the landing page to entice diners who have never eaten here before to visit the restaurant. We did not have access to many images for the creation of this project
Design an actual menu page (not a PDF) which we can directly incorporate into the website.
Work with the business to design and develop a functional order online feature for the restaurant to further increase sales and create a more loyal customer base through the convenience of online ordering and loyalty programs.
Once the site is developed and published, we would shift our focus to iterating the design based on site traffic data and work to improve SEO.