CLIENT

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.

MY ROLE

  • UX Designer
  • Visual Designer
  • Front-end Developer
  • Back-end Hosting Setup
  • Production Manager

DELIVERABLES

  • Project Plan
  • User Profiles
  • Site Map
  • Wireframes
  • Prototypes
  • Coding Files (PHP, HTML, CSS,
    JavaScript, etc.)

THE OLD WEBSITE

  • MENU: displayed in big-sized images instead of inline HTML.
  • IMAGES: Upside-down images with no styling or photoshoping.
  • CONTENT: Irrelevant content with Chinese as the only language.
  • UNRESPONSIVE: Website was not responsive across different devices.

RESEARCH

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.

CHALLENGES

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:

SOLUTIONS

Considering the challenges above, I came up with the following concepts to guide my design solutions:

Information Architecture

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.

Interaction

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.

Visual Aid

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.

DESIGN

ITERATIONS

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.

design iterations

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.

design iterations

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.

design iterations

FINAL DESIGN

Color Palette

Color palette Spices Fan Sun

Logo

Logo of Spices Fan Sun

Homepage

Screens Spices Fan Sun

About page

Screens Spices Fan Sun

Menu page

Screens Spices Fan Sun

Gallery page

Screens Spices Fan Sun

Gallery page

Screens Spices Fan Sun

Reservation page

Screens Spices Fan Sun

PRODUCTION

CLICK TO CHECK OUT THE LIVE WEBSITE

Go

PERFORMANCE DATA

Menu Spices Fan Sun

Page Views

Page views per day increased from less than 10 to over 800.

Wait Time Spices Fan Sun

Time Spent

Each user has an average 5-min stay on the website. User bounce rate also decreased.

Lenguage Spices Fan Sun

Accessibility

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.