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
Product Designer - Research, Visual & Interaction Design, Prototype & Usability Testing
Figma, Photoshop, Zoom
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.
Heuristic evaluation for user interface at this stage to help uncover existing usability issues.
Learn about the industry and users by conducting research and analysis.
Synthesize the findings from research to define the problems with project goals and roadmaps.
Brainstorm and sketch ideas. Then we start to wireframe and define the brand identity.
Build a usable prototype in high fidelity mock-ups with Figma to engage users.
Conduct usability testing to get key insights. Learn after testing so we can revise the design.
To identify usability problems in the user interface design, I had to evaluate the website with heuristic evaluation.
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 ➝
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 ➝
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.
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.
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:
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.
Time to go make lo-fi wireframes for the design!
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.
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.
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.
Participants are asked to complete the order journey.
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.
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.