An authentic taste of Chinese cuisine in Fremont
Founded in 2003, Species! is a modern Chinese restaurant specializing in traditional Hunan cuisine, They provide high-quality and inspired dishes from super-skilled chefs of China. The restaurant has been elected as the Best Spicy Chinese Restaurant in San Francisco.
- UX Designer
- Visual Designer
- Front-end Developer
- Back-end Hosting Setup
- Production Manager
- Project Plan
- User Profiles
- Site Map
- Coding Files (PHP, HTML, CSS,
THE OLD WEBSITE
WHAT CONSTITUTE A GOOD RESTAURANT WEBSITE?
To redesign the website, I conducted research on key components that constitute a good restaurant website.
I looked through a couple of great restaurant websites and here are what I found:
1) Must-haves for top navigation: reservation, about, menu, contact.
2) Good-to-haves for top navigation: image gallery, news/ blogs.
3) Homepage (from top to bottom): display exquisite food image --> a short blurp to introduce the restaurant --> reservation with obvious call-to-action button --> contact information.
4) Well-organized image gallery to showcase the food and interior décor of the restaurant.
Based on my findings, key components have been discovered for the restaurant website. However, Spices is a Chinese restaurant with its own characteristics and I am also faced with the following challenges to consider:
- QUANTITY: the restaurant features a long menu list with over 80 dishes and 10+ categories of food. How to display such large quantity of menu items in an online environment without overwhelming the users?
- COMPREHENSIBILITY: many people don’t understand what each dish is about even the name is in English. How to make the dishes comprehensible to users from all cultural backgrounds?
- EDIBILITY: the restaurant specializes in traditional Hunan cuisine and many of the dishes are spicy. What if people cannot eat spicy food and are looking for something mild or not spicy?
Considering the challenges above, I came up with the following concepts to guide my design solutions:
Menu items must be split into different categories displayed in separate pages. Combine some categories together and put them in a drop-down menu rather than a separate page.
Save time and number of clicks users take to reach targeted menu items by utilizing a drop-down menu. Create icons to each food category to delight users and speed up the selection process.
Add hover-over images to menu items and help users understand what the dish is about. Create spicy level icons to help users choose the food that meet their flavors.
In the design phase, I spent a lot of time iterating the menu page since there are too many information. After organizing the information and creating hierarchy, the interaction on this page evolved from “endless-scrolling”, to a “two-step” process, and then shortened to just one click. The number of steps that users need to take to see menu items finally reduced to just one click.
The interaction of hover-over image next to menu items also transformed from a block view to a simple icon to keep the page clean and easy to scan.
How can a restaurant website sell without tantalizing food images? I cropped and photoshoped every food image for the restaurant, especially the banners on the homepage to make them visually appealing.
CLICK TO CHECK OUT THE LIVE WEBSITEGo
Page views per day increased from less than 10 to over 800.
Each user has an average 5-min stay on the website. User bounce rate also decreased.
The website is more accessible from both the search engine (nearly 50%) and social media (30%), and across multiple devices including desktop, tablet, and mobile phones.