Mediterranean Cafe is a small restaurant located in Pasadena, California. It has been there for about 20 years, offering the Mediterranean cuisine with highlights from Greece and Lebanon. It gets 4-star ratings on average on the Yelp and more than 1000 reviews. It is widely praised by the local people.
Current Website State
However, the website of Mediterranean Cafe is not in a good design. The layout is unorganized, and the words are too small to read. The color setting is bad, and navigation bar is not conspicuous. Also, the non-responsive design makes it struggling for users.
2 screenshots of the current website - homepage and menu
Persona Hypothesis
Based on my experience and research, I thought customers go to a restaurant either often or occasionally. Therefore, I categorized the types of customers as the following:
Regular Customers:
- Live or work nearby, and have a constant daily demand for food
- Prefer fast service
- Be able to find personal favorite taste there
One-time Customers:
- Be like travelers and visitors with curiosities
- Prefer high ratings and good reviews on the service and taste
- Want the price under the budget
When I proposed this persona hypothesis, I found that some behaviors need to be explored:
- The frequency of going to a restaurant (from never to very frequent)
- The motivation of buying meals here (from less motivated to passionate)
- The desire to visit the website of a restaurant (from not at all to very willing)
User Interview
In order to build my personas, it is necessary to conduct some in-person interviews in the Mediterranean Cafe. Before that, I prepared my questionnaires for the two types of customers respectively. They are as follows.
Persona Interview | Regular Customers
1. How often do you come to this restaurant?
2. What aspects of this restaurant attract you?
3. Which one do you prefer online ordering or onsite ordering?
4. Will you visit the website first before going to the restaurant?
5. What kind of information do you care about on the website?
6. How likely are you to be interested in the sample of food pictures?
Persona Interview | One-time Customers
1. How often do you have meals in restaurants?
2. How much time do you usually spend on learning a restaurant?
3. How did you learn this restaurant? Website or onsite.
4. Which one do you prefer online ordering or onsite ordering?
5. What is the main reason for choosing this restaurant?
6. What aspects of a restaurant website are more likely to attract you?
Interview Process
I came to the restaurant and did some interviews with customers there. Unfortunately, due to the influence of the coronavirus, there weren't many people, and I had to wait outside the restaurant for customers. Finally, I interviewed 7 people and 5 of them were regular customers. Therefore, I drew a conclusion that regular customers were the primary persona, and one-time customers were the secondary persona.
Here are my records of the interview notes. The left two are one-time customers and the rest are regular customers.
Personas
After the interviews, I did a summary on my notes and finalized the two personas.
Primary Persona - Regular Customers
Leon has a decent job but is still under the pressure of life. He has less attention to pay on his diet although very concerned with it, so he rarely cooks for himself. He usually starts to think about what to eat when he feels hungry, and he has several options of restaurants he likes. Feeling that ordering online is troublesome, he prefers to buy meals onsite very quickly.
Needs and Goals:
- A restaurant serves food very fast.
- Being able to make an order online easily and quickly.
- The food of this restaurant is able to satisfy the personal diet requirement (e.g., big portion or healthy ingredients).
Secondary Persona - One-time Customers
Cindy lives far away, and she comes the area where this restaurant is located for purpose of business or life. She is attracted by the great reviews and high ratings online. Also, the food pictures on the website are really appealing. Therefore, she is curious and would like to try the special flavor. Fortunately, the price there is acceptable as well.
Needs and Goals:
- A restaurant has great reviews and high ratings online.
- The food advertised online is attractive.
- Prices are not beyond the budget.
User Stories
Based on my personas, I can know what are the main customers' needs and goals. Now I want more detailed and straightforward tasks which I am able to accomplish. Here are my user stories.
1. As a regular customer, I want to save my information like address and payment in the account, so that I can place an order easily and quickly.
2. As a regular customer, I want to resubmit a previous order online quickly, so that I can save a lot of time on ordering.
3. As a new customer, I want to see customer reviews and ratings, so that I can have some recommendations about the food choices.
4. As a customer, I want to see the food menu with ingredients, so that I can choose one according to my healthy eating plan.
Use Cases
Create an account
1. Click the "Sign in/Sign up" in the navigation bar
2. Click the "Sign up" option in the login panel
3. Input your information like email, name and password
4. Click the button "Sign up"
Make an order
1. Enter the "Order Online" section from the navigation bar
2. Browse the menu and click the "Order" button of your ideal item
3. Fill out the quantity box and notes box, and click the button "Add to cart"
4. Enter the cart from the navigation bar
5. Click the "Check out" button in the cart
6. Fill out the checkout forms like payment, and click "Place the order"
Resubmit an order from the order history
1. Click the "Sign in/Sign up" in the navigation bar
2. Input your account and password, and click "Login"
3. Browse your order history, choose one, and click the "Order" button
4. Fill out the quantity box and notes box, and click the button "Add to cart"
5. Enter the cart from the navigation bar
6. Click the "Check out" button in the cart
7. Fill out the checkout forms like payment, and click "Place the order"
Feature List
Based on user stories and use cases, I had a basic understanding about the functions that this website needed to accomplish. Hence, I created a feature list as follows.
Sitemap
I already had several features to achieve. Before I went into the details, I needed to have an overview of the website structure. That was the sitemap. I built the sitemap with Sketch.
The sitemap of the new website
Wireframes
Desktop Design
Here are my 5 layouts of the desktop version. From the left to the right are respectively Homepage, Order Online page, Account page, Cart, and Checkout page. It will be easier to design the desktop version because there is more space. And it looks easy to use.
Responsive Visual Design
Here are my 5 layouts of the responsive version. The order corresponds to the desktop design above, and from left to right are respectively Homepage, Order Online page, Account, Cart, and Checkout page. I tried to put everything into the limited space, and obviously the content was crowded. Although I reorganized the layout and cut some text down, it seemed that I needed to do more improvements.
Prototype
When I finished the visual design, I prototyped it. You are able to try this demo which can be found here.
A screenshot of prototype links
Prototype Scripts
Based on my use cases, I created two prototype scripts which specify the exact steps of accomplishing the main tasks when using this prototype.
Prototype Script 1: A new customer makes an order
Screen 1 - Home screen, user scrolls down to the bottom of the screen to the footer. Screen 2 - Hamburger menu screen, user taps the “Order Online”
Screen 3 - Order Online page screen, user taps the order button of “Combo Kabob”
Screen 4 - Notes modal screen, user fills out the notes form and taps “Add to cart”
Screen 3 - Order Online page screen, user taps the order button of “Combo Kabob”
Screen 4 - Notes modal screen, user fills out the notes form and taps “Add to cart”
Screen 5 - Order Online page screen, user taps the cart icon in the header
Screen 6 - Cart screen, user taps “Checkout”
Screen 7 - Checkout screen, user fills out checkout forms and taps “Place Order”
Screen 8 - Confirmation screen, user receives an email message, and goes back to the homepage by tapping “OK”
Screen 7 - Checkout screen, user fills out checkout forms and taps “Place Order”
Screen 8 - Confirmation screen, user receives an email message, and goes back to the homepage by tapping “OK”
Prototype Script 2: A regular customer makes an order
Screen 1 - Home screen, user scrolls down to the bottom of the screen to the footer.
Screen 2 - Hamburger menu screen, user taps “Sign in/Sign up”
Screen 3 - Sign in screen, user inputs account and password, and taps “Login”
Screen 4 - Account screen, user taps the order button of “Combo Kabob” in the order history
Screen 2 - Hamburger menu screen, user taps “Sign in/Sign up”
Screen 3 - Sign in screen, user inputs account and password, and taps “Login”
Screen 4 - Account screen, user taps the order button of “Combo Kabob” in the order history
Screen 5 - Notes modal screen, user fills out the notes form and taps “Add to cart”
Screen 6 - Account screen, user taps the cart icon in the header
Screen 7 - Cart screen, user taps “Checkout”
Screen 8 - Checkout screen, user fills out checkout forms and taps “Place Order”
Screen 9 - Confirmation screen, user receives an email message, and goes back to the homepage by tapping “OK”
Screen 7 - Cart screen, user taps “Checkout”
Screen 8 - Checkout screen, user fills out checkout forms and taps “Place Order”
Screen 9 - Confirmation screen, user receives an email message, and goes back to the homepage by tapping “OK”
Research Plan
In order to know if my prototype would work well, I determined to do a usability test on my prototype. Here is my research plan.
User Profile
Users who has visited at least one restaurant in the last two years
Goals
1. Users will be able to know what type of this website is about
2. Users will be able to browse the order online page easily
3. Users will be able to find out how to check out
4. Users will be able to access their account easily
5. Users will be able to make an order easily from their order history
Establishing Questions
1. How did you feel about your last ordering process on a restaurant website?
2. How did you make this order? Online or onsite.
3. How do you prefer to make an order? Online or onsite.
2. How did you make this order? Online or onsite.
3. How do you prefer to make an order? Online or onsite.
3.1. If you prefer to make an order online, how long do you expect to
spend on the ordering process?
3.2. If you prefer to make an order onsite, what are the reasons that
3.2. If you prefer to make an order onsite, what are the reasons that
you don't like making an order online?
Tasks
1. Explore the homepage, and find out what type of this website is about.
2. You are busy with your job. It’s time for lunch and you feel hungry. You visit this restaurant online, and you want to take a fast browse on the order online page.
2. You are busy with your job. It’s time for lunch and you feel hungry. You visit this restaurant online, and you want to take a fast browse on the order online page.
3. You are having a meeting with your friend, and both of you don’t have a mediterranean meal for a long time. You visit this website and find that Combo Kabob looks yummy, so you want to add it to the cart and place the order.
4. You feel that the food item you ordered yesterday was very yummy, but you forget which food item you selected. Hence, now you want to enter your account and browse your order history.
5. You find that the food item you ordered yesterday is Combo Kabob, and you want to buy it again, so place the order for it from the order history.
4. You feel that the food item you ordered yesterday was very yummy, but you forget which food item you selected. Hence, now you want to enter your account and browse your order history.
5. You find that the food item you ordered yesterday is Combo Kabob, and you want to buy it again, so place the order for it from the order history.
Usability Testing
I created an unmoderated usability test on UserZoom Go. With the research plan, I set establishing questions and 5 tasks so that participants could try my new website following these tasks. I had 5 participants, and thanked them for the constructive feedback.
Test Results
I prepared 5 tasks and each one contained 2 questions. Fortunately, most tasks got 5 passes, but the task 5 got 3 failures. If you want to view the testing process, the highlight reel of the usability testing can be found here.
Pre-study Questions
All 5 participants preferred online ordering, and they all expected to finish the ordering process in 15 minutes.
Results of Tasks
All tasks worked well except task 5 which had 3 failures. I checked the video recordings and found that one participant finished task 4 and 5 together when doing task 4, so task 5 was empty. One another participant entered the Checkout page but missed the "Place Order" button, so I needed to fix it afterwards. Also, I still had one participant who stopped at the cart and forgot to check out. I thought he might not read the task description carefully.
Follow Up Questions
Fortunately, all participants thought the navigation was clear. It seemed there were still some problems. The color of the buttons was not conspicuous, and the introduction text in the homepage needed to be reduced more. Thanks for their constructive feedback.
Screenshot of Follow up questions results
Findings
1. 20% of participants felt that the introduction in the homepage had a little bit more words, so I would simplify the introduction
2. 40% of participants felt that the food details in the Order Online page were crowded, so I would simplify the design of food details
3. 40% of participants felt that it was not easy for a novice to enter the account, so I would create an account icon in the header
4. 40% of participants stopped at the checkout page, so I would copy the “Place Order” button and pasted it to the top of the page
5. 20% of participants felt that the color of buttons should be more bright, so I would brighten the buttons
6. 100% of participants felt that the navigation was clear and great
Updates
According to the feedback from the testing results, I did some updates and improvements on my prototype. You are able to access my final version of the prototype by clicking here.
Homepage
Firstly, I moved the account icon from the hamburger menu to the header, so it would be easier for customers to enter their account. Also, in order to make the buttons brighter and more conspicuous, I turned the button color into sky blue. What's more, I reduced the text of introduction in the homepage.
Order Online Page
In the Order Online page, I deleted the ingredients introduction because that was so crowded. It is still in the notes modal if you click "Add to cart", so don't worry. Also, it is easier for customers to notice that the "Add to cart" button is clickable.
Checkout Page
In the Checkout page, I also turned the color of all the buttons into sky blue so they would be more easier to be noticed. Moreover, I set another "Place Order" button on the top of the screen, so customers were able to place the order at either the top or the bottom.
Cart
In the cart, I enlarged the summary of the total price and the buttons. As how I did above, I set the button color to be sky blue as well.
Finishing Thoughts
Finally we are at the end of this project. I spent 3 months on this project from finding a target website to finishing the final prototype. Thanks for the assistance of my professor and TA. I used to think that the design process was to give necessary features and organize the layout. I didn't expect to go for some steps like building personas. I really learnt a lot from the design process, and the books "The design of everyday things" and "Don't make me think" also helped a lot. With the basic theoretical knowledge, I understood why we needed to do these series of steps.
I have to appreciate again to my professor and TA. Their feedback is the booster of my work. Also, thanks to my participants. Their constructive feedback is an indispensable part.
If you have some questions, feel free to contact me at woyaozuodashen@gmail.com
