Banh Cuon Ba Ngoai (Grandma's Kitchen) is a local restaurant in Ho Chi Minh City featuring a popular Vietnamese dish called Banh Cuon - Vietnamese Steamed Rice Roll in English. Founded in 2020, Ba Ngoai is most publicly praised for their innovative and healthy dish with traditional flour mix and vegetables combined.
In the kickoff meeting with one of the owner - Anh Le, it was established that Ba Ngoai's Kitchen primary business goal at the moment is to push toward direct online sales and ultimately attract new customers.
Affected by the 4th wave of Covid-19, Vietnamese government again imposed social restrictions in which restaurants are only allowed to offer take-out and delivery. Like many others, Grandma's Kitchen struggles to reach its customers. Delivery platforms such as Grab, Baemin and Now could be a solution but their service charge takes up to 30% of the restaurant's profit. Grandma's Kitchen has a website, however it has outdated content and unresponsive design.
I redesigned the responsive website that optimizes the online ordering process to encourage direct sales and looks visually appealing to increase customer engagement.
Before
After
Tentative live date of website: Late of November 2021! Stay tuned!
At the moment, if you are up to Vietnamese food, check it out on high-fidelity prototype😉! Let's try to order a Mixed Vegetable Banh Cuon!
Homepage
Featured Dishes & Promotion Deals
Order Online
Check out
This is how I came up with the solutions, let me walk you through
Stakeholder Interview
Market Research
Competitive Analysis
User Interview
Affinity Map
User Persona
User Journey
Problem Statement
Brainstorming
Feature Roadmap
Sitemap
Task Flow
User flow
Wireframe
Mid-fidelity prototype
Usability Testing
Affinity Map
High-Fidelity Prototype
To have context & understand people, their needs, and what their motivations are, I created a research plan to set out research goals, assumptions, questions, and methodologies. The research finding plays a crucial role in laying a foundation for ideating solutions in a later stage.
Research Goal
To have a better understanding about the online ordering experience when it comes to food ordering and how the pandemic makes an impact on user's behavior. Besides, I want to know if any limitations occurred to prevent users from the ordering process.
Assumptions
Methodologies
I started with analyzing the market to get a better understand about the food industry in digital age, how it has been change since the pandemic and what's the current trend. Here are some key metrics
is the value of Vietnam food market. The industry is expected to grow annually at 13% till 2024.
Source: Deloite
Vietnamese using online services to order food delivery. Mobile ordering has been on the rise.
Source: Hootsuite, 2021
of Vietnam population is Gen Z and Millennials. They are the majority of consumer market.
Source: Kadence
of Vietnamese are likely to maintain using food delivery online even after the pandemic.
Source: tandfonline
I listed 3 direct competitors from different cuisine to have a broader view of the market. The indirect competitor is the No.1 delivery app in Vietnam. By doing so, I can get to know more about how they effectively solve hunger problem users and the highlighted features and trends they are implementing. Please find the detail of competitor analysis here
I interviewed 5 people with my Interview Guide to understand deeply on how is the experience of ordering food online. Open-ended questions are asked during the interview to encourage customers to share their stories.
Interview Objective
Participants
Assumptions Validated
I transcribed the interview scripts to observation notes highlighted in capturing how participants think, feel, say and do. Then I started to find the pattern emerging in the qualitative data and organized them into categories. By doing this, I can uncover common patterns that led to key insights which would help me identify what our users’ needs truly are.
You can view more detail at my Research Synthesis board on Figjam.
100% of participants often order food online when they feel hungry and be in lazy mood, don't want to cook.
An appealing photographs of dishes from the restaurant
To determine whether the food is tasty to make a purchase.
"When I first entered the apps or websites, I will check through the image first to see what they have or whether it looks tasty."
A responsive website focus in mobile experience
To allow users order across platforms seamlessly especially on mobile devices.
"Mostly order though my phone. It’s a way to relax stay away from my laptop for a while, you know :)."
Organized and Informative Menu (Seamless Navigation)
To allow users order quickly when they are in hungry mood.
"I felt annoying at some restaurant they have messy menu as they dont categorize in proper way. Like KFC when I order burger I want to see burger categories, but they put in something called heavy meals so I dont know when I access to their page."
Chat box/ Human Interaction
To offer an experience like the interaction they have at physical store
"When ordering through website, I want to have a chatbox like messenger so I can ask for assistant when needed because in restaurant if want something I just call the staffs."
Confirmation & Delivery Time
To notify about the order status and inform what to expect.
"I want the delivery fast or the expected time to receive food because I want to enjoy food when it’s still fresh and hot. I'm not patient person haha i hate the feeling of waiting"
Up To Date website
To give users the accurate, up to date content about the restaurant or Covid-19 situation update.
"I feel annoyed when website didn’t update the current status of operation like opening date and hours. Sometimes, the store is closed but nothing inform on website."
After having a clear portrait of who Ba Ngoai's kitchen's target user really are, I created the user persona to represent key audience segments. It helps me focus on tackling the most important problems – to address the major needs of the most important user groups.
To guide myself further in design and visualize the process by which Chloe interacts with a company in order to achieve a goal, I created a journey map. I highlighted the key features that may make Chloe feel happy in the process by using stars.
With the user journey, persona, and insights from the research stage, I turned my knowledge into Point Of View (POV) Statements to frame the problem from the user’s perspective. After defining the design challenge in POV, I generated a series of How Might We questions to fuel my process for a solution brainstorming session later on.
Detailed POV Statements and HMQ Questions
With the listed How Might We questions, I spent 2-3 minutes to brainstorm the solutions for each problems and replayed the process with second round to come with as many solutions as possible.
.jpg)
After that, I created a product roadmap by listing out the potential features which tied with user goal. I also keep on mind the limitations of Wix when it comes to rank the level of effort & prioritizations. This roadmap help to communicate stakeholder in term of priority of product development.
After deciding what features to include, I created a site map to help define the overall content structure of Ba Ngoai's kitchen website. The goal is to make a logical and easy route for users to navigate while shying them away from being overwhelmed when users are tired of their mental state.
Next, to learn how the Chloe would be interacting with Ba Ngoai's kitchen website. I started by identifying the key tasks based on her goals, and the key pages that Chloe encounter with to complete the task.
.png)
With the flow for specific task from above, I then mapped out user flows by taking a step into Chloe's thoughts and including the different decisions she would make while interacting with the design to complete the task.
Taking what I’ve learned throughout my process to this point, I drafted out the overall layout to get a sense of how content should be laid out in structured and logical way and most importantly to address user pain points. I also list out the UI requirements and note down the design patterns from other food service sites and apps to alleviate cognitive load for the user.
I sketched on different devices frames for home screen by keep in mind the prioritization for a quick and easy ordering process. Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.
With the base design from sketching and the findings from the user research, I digitalized the frames with Figma and added some necessary pages for users to be able to navigate through & complete task.
Since 5 out of 5 participants mention they have always make their food ordering with mobile phone, I approach with mobile-first design.
Using the completed set of digital wireframes, I created a mid-fidelity prototype. The primary user flow I connected was ordering a dish of mixed vegetable Banh Cuon, so the prototype could be used in a usability study.
I chose to test on the medium-fidelity wireframes in order to test the basic functionality and detect issues in the flow before diving into details and color. This helped me quickly discover any problems that occurs prevent users from completing the task, so I can make structural changes easier.
With the time constraint, I conducted one round of usability studies. Findings from the study helped guide the designs from wireframes to mockups.
Test Objectives
Methodologies
In-person and remote usability testing via Zoom. Throughout, each participant engaged in a think-aloud exercise and were recorded with expressed permission.
Participants
The Scenario
You are hungry and want to order Banh Cuon, you saw the Facebook post about Ba Ngoai's kitchen and you feel interested in mixed vegetable banh cuon, so you clicks to Ba Ngoai's website and make an online order for delivery. Can you show me how would you go through ordering online from here?
The Result
After the research, I transferred the information from observation sheet and interview transcript into the post-it note. Then, I created an affinity map to synthesize the finding. By doing this, I was able to document the research findings and uncover the issues in my designs and help to determine on the prioritization for revise.
Now that I uncovered the pain points from the affinity map, I then evaluated the level of effort and value before moving on with the revision. Besides, I also consider implementing on Wix in a later stage to identify the priority revisions.
Simplified Menu Online
Because users expect when they land to menu, they can click each items to make an order. To make the process less confusing, instead of dividing menu vs order online into 2 pages, I combined as one to make the order online process seamlessly. Also, I found it makes sense to remove static menu just for displaying purpose in online context.
Adjust "Add-to-bag" flow to meet user's mental model
Users expect the flow would function similarly like other delivery apps where clicking "Add-to-bag" users will return back to menu to continue ordering if needed and the instant update to inform status. Thus, I made a change to make the flow meet users expectation, minimize the mental load.
One of the brand owner - Anh Le decided to keep the logo of the brand for the consistency across platforms as the existing customers have already established their recognition of our brand through social media platforms, and physical stores.
I then created a mood board based on the brand attributes which me and brand owner have discussed together. Ba Ngoai's kitchen wants customers perceive them as a healthy, creative and genuine restaurants. I highlighted these adjectives to generate the ideas for the color palette, overall look and feel of the brand.
Once Ba Ngoai's kitchen UI was fully established, I applied turned mid-fidelity to responsive wireframe keeping in mind the persona in order to achieve the user goals, and ensuring the design was technically feasible.
With all the high-fidelity wireframes designed, I built up the final mobile prototype, using Figma. The final prototype provides all the information necessary for customers to make an order at Ba Ngoai's kitchen website in a fast and easy way.
Are you hungry? Let's order Mixed Vegetable Banh Cuon for yourself!
The attentive live date is the late of October 2021. As of now I didn't have any data to measure so I just got the overal rating score and feedbacks from usability testing and the owner.
Overall rating: 4.5/5 (based on the mid-fi prototype)
Score rating in term of how easy it is to navigate & make an order.
It was pleasure to have Kim's help in building the website for my own restaurant. Throughout the project, I can see how supportive and creative she is. I have struggling for a while on how to make it looks attractive and how can I earn more profit from this. Thanks Kim to spend time on this project and bring it to live.
I was totally surprised and learned a lot when she walked me through the process from research findings, branding concept, design decision. Now that I 'm definitely satisfied with the design, can't wait to launch the website in August with Kim's continuing support in Wix implementation.
I would definitely recommend Kim with some of small business owners and so excited to see more project from Kim.
Anh Le - Ba Ngoai's Kitchen Owner
Improving user engagement with a social feature that connects people.
Creating a seamless shopping experience by bridging in-person experience with online format.
If you like what you see and want to work together, get in touch!
hello@itskim.design
