Ocean Seafood is a renowned restaurant serving over one hundred kinds of Dim Sum, fresh seafood, and specialty Chinese cuisines. With luxurious decorations, high ceilings, and spacious accommodations, it is a perfect place to have public gatherings, birthday parties, wedding receptions, tour group parties, and company events. But the out-of-date website is a totally bad influence.
Evaluating the Initial State
The color combination is terrible and outdated. The pictures are not attractive, the messy layout is a little bit annoying. This website is not responsive, its menus are unreadable, and one page is blank.
User Interviews
My two main hypothesized user types were first time customers and returning customers. I prepared several interview questions for these two kinds of customers respectively then went to Ocean Seafood Restaurant to interview customers, tried to better understand their needs and behaviors.
First Time Customer
1. Do you like Chinese food or just want to try it?
2. What is your primary focus about a restaurant?
3. How many different Chinese restaurants have you tried in LA before?
4. What features on a website would encourage you to come to a restaurant?
5. Do you prefer ordering food online or making a phone call?
6. When choosing a restaurant, food quality/ distance/ price/ special activities, how would you rank them from the most important to the least?
Returinng Customer
1. How often do you go to this restaurant?
2. How many other Chinese restaurants do you typically go to? Follow up: Have you ever tried authentic and traditional Hong Kong-style food in China?
3. What stands out about this restaurant that makes you return?
4. How often do you visit this restaurant's website? Follow up: Have you ever tried to order food on the website?
5. What additional features on the website would encourage you to visit the website? Follow up: Do you think if there is an accessibility menu on the website will help you a lot?
6. Have you ever considered to hold group events or family gatherings in this restaurant?
Primary Persona
Based on the result of the user interview, I decided that the primary persona were returning customers as they they had a greater contribution towards the business and its revenue. Especially some returning customers would like to hold parties in Ocean Seafood Restaurant, that is the most profitable part.
Context User Scenario
Then I created a context user scenario to show how the website could help the returning customers achieve their motivations, needs, and goals while using the site:
Amy is planning to hold a special family gathering party providing her beloved Hong Kong-style food. She googles "Hong Kong-style food restaurant" and finds the website of Ocean Seafood Restaurant. She opens the website, sees a nice layout and user friendly home page.
she clicks the "Menu" button to jump to the menu page. In the menu page, some greatest-hit dishes coming with pictures and ingredients explanations. The she clicks the "Gallery" button to check the video and picture examples of holding parties in this restaurant. After roughly determining what she wants, she creates an account and fills out the information (party event, party date and number of gusts) in the reservation page. Then she clicks "Send" button, she gets a confirmation email and views party event information in the confirmation page.
Her personal planner will contact her in 12 hours to help her order the food and try his best to make her party better than her expectation.
Use Cases
Next, I wrote up use cases of the three most important things a user should be able to do on this website.
Having an access to menus
1. User browses the home page and clicks "Menu" button to jump to the menu part
2. User chooses one menu by clicking "Chef Menu", "Dinner Menu", "Dim Sum Menu" or "Holiday Menu" button
3. User can enlarge pictures of hot dishes
Ordering food online
1. User browses the home page and clicks "Order Online" button to jump to the food detail page
2. User clicks the picture of the food that he is interested in to check out the details of the food
3. User clicks "Add to Cart" button to add food to his cart
4. User clicks "Place the Order" to finish the shopping
5. User will see a confirmation page and receive a confirmation email
Making a reservation
1.User browses the home page
2. User clicks "Menu" to go through the menus to see if this restaurant has something looks good
3. User clicks "Gallery" to check out the successful examples of holding parties in this restaurant
4. User clicks "Reservation" button to fill out the important information
5. User clicks "Submit" button
6. User will see a confirmation page and receive a confirmation email
Site Map
After figuring out the primary use cases and important features needed on the website, I began to work on the information architecture by way of a site map.
Creating the Design
Tools: Sketch & Adobe XD
Wireframes
Next, I created skeletal framework of each page by building out the wireframes in Adobe XD. Firstly, I built the wireframes for the desktop version of the website, and then moved on to the responsive version.
I have included the desktop wireframes for the top-level pages.
Responsive
Then I moved to the responsive version.
Visual Design
The restaurant manager told me that they wanted the website with traditional Chinese characteristics. So I chose a red dragon as the logo, then I used red as my main color to have a consistency.
Prototyping
I transformed my visual designs into a clickable prototype by adding prototyping links in Adobe XD. As seen below, the dark grey links connected the different pages and elements together.
Testing the Usability
With the prototype complete, I moved on to the usability testing to identify any pain point, problems, or confusion that the users had while interacting with it. Then I created a research plan to outline the goals of the test, basic questions that established who the participant was, and tasks that the participant needed to do.
Goals
1. Users will be able to browse menus to find food they are interested in
2. Users will be able to check if they have coupons
3. Users will be able to order online and use coupons to save money
4. Users will be able to make the reservations if they wants to hold parties in the restaurant
Ideal User
People love Chinese food and would like to order food online or hold a party in a Chinese restaurant
Establishing Questions
1. Do you love Chinese food or would like to try it?
2. Have you ordered food online? Do you have a favorite site to order food?
3. How often do you visit a restaurant's website? What do you typically do on there?
Tasks
1. Explore the home page (please tab the hamburger button to find something you are interested)
2. Explore the menus (please see all the different menus)
3. Please get available coupons, given you have an account on this site
4. Please order food online then use a coupon to save money, given you have already copied the coupon
5. You want to have a family gathering party, browse the menus and gallery, finally make a reservation
Usability Testing Results
I used Validately to conduct my unmoderated usability testing with 5 participants who passed my screener questions.
Below is a table to quantify the results of the usability testing. A video with the highlight reel of my usability test can be found here.
Findings
The test results showed great insight into how usable my prototype was:
1. 100% of the participants liked the design of the home page, they thought it was simple and easy to use
2. 75% of the participants passed all my tasks, I did not have to make a major change to the website. But based on the feedback, I would change reservation page and menu page
3. 25% of the participants were confused about how to copy the coupon, so I would add a copy button
Updated Prototype
In conclusion, the entire study has taught me a tremendous amount about interaction design and usability testing! I felt like a new world was opened before my eyes! If you are interested in my work, please check out my final prototype here and give me some feedback.
