Mai's Restaurant
Since COVID-19, due to the decrease in foot traffic on the site, restaurants need to find opportunities to boost their sales online.
This project will help Mai's Restaurant redesign its website to make it responsive, add the Order online feature, and re-brand.
*This is a fictional project for UX Academy at Designlab.
YEAR / DURATION
Jan 2021 / 80 hours
ROLE
Product Designer - Research, Visual & Interaction Design, Prototype & Usability Testing
TOOLS
Figma, Photoshop, Zoom
Scope and Focus
The scope of this project is to fully redesign their site and branding to enhance customer’s experience with the restaurant on both desktop and mobile versions. With the new responsive website, customers will be able to learn more about the restaurant’s history, mission, menu, and deals. Moreover, it will allow customers to make reservations and order directly from the website. Based on the current needs, this project will focus on designing the online order journey for their website to help the business increase their sales and bring a pleasing order experience for users.
DESIGN STAGES
1. Evaluation
Heuristic evaluation for user interface at this stage to help uncover existing usability issues.
2. Empathize
Learn about the industry and users by conducting research and analysis.
3. Define
Synthesize the findings from research to define the problems with project goals and roadmaps.
4. Ideate
Brainstorm and sketch ideas. Then we start to wireframe and define the brand identity.
5. Prototype
Build a usable prototype in high fidelity mock-ups with Figma to engage users.
6. Testing
Conduct usability testing to get key insights. Learn after testing so we can revise the design.
Problem Statement
- How might we help customers experience the restaurant's online services better?
- By allowing them to experience the services online directly and easily: placing orders, making reservations.
- By giving them the information they need such as menu, location, open hours, and it could be the ingredients if that matters to the people who are aware of what they eat.
- How might we make customers enjoy ordering food online?
- By having a responsive website that allows customers to place orders directly.
- By providing more details and options of the dish for customers
1. Evaluation
To identify usability problems in the user interface design, I had to evaluate the website with heuristic evaluation.
2. Empathize
After evaluating the current design, it's time to do some research to understand users and our market. We will not only study through the available statistics but also have to analyze direct/indirect competitors, conduct a survey.
Our research goals are to discover the market trends, get to know user's experience with online orders for delivery/ indoor dining, and identify the needs, motivations, goals, and pain points of users.
You can have a look at the research plan here ➝
ABOUT THE MARKET
In 2020, about 100,000 restaurants around the U.S. have shuttered either permanently or indefinitely, and that 40% of restaurant proprietors surveyed think they'll probably be out of business by late spring of 2021 if there is no support from the federal government.
Because of social distancing in 2020, off-premise dining has become popular. Therefore, online delivery order is a crucial part of the business that every restaurant. 58% of today’s foodservice orders are for off-premise dining. 52% of customers surveyed had bought food at drive-in windows, and 46% had used curbside pickup, while 54% had called on one or more restaurant delivery services.
More details about the market research here ➝
COMPETITIVE ANALYSIS
I found a few direct and indirect competitors in the area to see what features may be needed for Mai's restaurant website and what is not necessary. As we can see below, not every restaurant allows customers to make reservations, having an account, or buying gift cards. In this case, I assume that to let customers order faster if they're already a patron, it's crucial to help them save their address and possibly rewards if Mai considers it in the future.
KEY FINDINGS
- What irritates customers when ordering food online is incorrect orders, restaurants ignoring notes, prices and menu are inconsistent,...
- People prefer using mobile apps and websites rather than calling on the phone.
- Most food delivery app users are under 40 years old.
- People are willing to use the website to order their food if it's available on the restaurant's website.
- The main reason a person lands on a restaurant website is to look for the menu, locations, and deals.
- It's good if there are membership rewards at the restaurant.
3. Define
Define stage is where I begin to synthesize the information collected during Empathize stage to define persona, the goals, and features for the website, so we can see what’s working, what’s not, and if there are any existing issues we should notice.
PERSONA & EMPATHY MAP
Now is the time to create a persona, based on the research findings in the earlier stage, to find out our archetypical users who share the same goals/ motivations and fear/ frustrations.
Just to know what's going on in Jacob's mind, so we have this empathy map developed as below:
PROJECT GOALS
INFORMATION ARCHITECTURE (IA)
It's essential to lay the groundwork before building things, including a website/ app. In product design, it's the information architecture. We can make it easier for users to understand and navigate the website by putting more effort into arranging the information to create a well-structured product.
In the IA below, I focus on the complete online order journey, from the beginning to the end of their purchase process.
4. Ideation
It's time to sketch. Personally, I like this stage the most because I can illustrate how I want the product to look according to the information I have synthesized and the way I think. I sketch my ideas on the iPad and see what works, so I can change it real quick.
MID-FIDELITY WIREFRAMES
Time to go make lo-fi wireframes for the design!
Desktop
Mobile
5. Prototype
BRAND IDENTITY
Mai, also known as the mickey mouse flower in Vietnamese, has a bright yellow color. The color yellow has also been found to stimulate your appetite because yellow is associated with happiness. Your brain secretes more serotonin, a feel-good hormone, when you see yellow. So I decided to use the flower as a logo and its color for brand identity.
VISUAL DESIGN
Here comes the user interface, which is used for usability testing later because I want to let participants feel almost the same way they interact with a real website.
Desktop
Mobile
6. Testing
After planning for a usability test, I conducted the test with 3 participants via Zoom call and in person. All of them are millennials who may share the personality type of my persona and have had experience with food online orders.
TEST OBJECTIVES
- To understand user's problems during the online order process.
- To observe user's order journey
- To evaluate the ease of navigation.
TASK
Participants are asked to complete the order journey.
GOALS
- Participants can navigate the site effortlessly
- Participants can complete the purchase without confusion.
- Identify the errors participants make and how easy they can recover from them.
FINDINGS
- 3 participants clicked into CTA Order Now to start their order journey.
- 3 participants can order smoothly.
- 3 participants said the website is easy to use.
- 1 participant asked if their address is saved for next time order.
OPPORTUNITIES
- Make the checkout more prominent.
- Notify user that their information will be saved and set as default for the next time they order.
THOUGHTS
I'm glad the usability test went well and I received good feedback from the participants. Just one thing I noticed about the cart - checkout process is that I should make it more prominent for users, from novice to professional, to navigate effortlessly.
Next Step
Thanks to the feedback I've got, I will redesign the cart. After updating the prototype, another test will be conducted for further improvement of the product.