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.
Constraints and Considerations
- With the limit budget & current website plan with Wix, owners decided to remain using this platform. Thus I need to keep in mind the design needs to be implementable on Wix.
- Photos might be limited and not in good quality as the owner didn't invest on shooting.
- My effort to continue building website on Wix.
I redesigned the responsive website that optimizes the online ordering process to encourage direct sales and looks visually appealing to increase customer engagement.
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!
The solutions in detail
Attention-grabbing & easy to navigate
- A clean homepage design overall to bring positive impression & gain user’s trust.
- A photo of appealing dish would let the users know what Ba Ngoai’s kitchen offer from a glimpse.
- Essential information such as Covid-19 situation, location & opening hours to lessen excess navigation for users.
- How-to order section to give users especially elderly a guidance about ordering online process at website.
- Testimonials section displaying review across platform & media coverage to instill the trustworthy of the business.
Featured Dishes & Promotion Deals
Offer suggestions to reduce the mental load when users either haven't determined what to eat
- Suggest dishes based on their popularity or new featured dish.
- A tag on the product to give users more detail on how the dish is recommended.
- A promotion section at the top of the Menu page helps motivate users to continue the online ordering process.
Ease of use support with detail & personalized order
- Popup tips about delivery time and fee to ensure the transparency of the process, lighten the mental load of waiting and being hungry.
- A tab bar to display categories in the menu helps users find the item faster and easier.
- Dish image and highlighted item price to help users skim through information quickly.
- On the product detail page, users can add the number of sides or toppings or customize their dish by leaving instructions.
Quick check out with streamlined input process
- Checkout progress indicator to inform and encourage users to complete the process.
- 1-page checkout process comes in to play to help users reach their goals faster.
- Users can choose different payment methods and can enjoy the flexibility to edit delivery information, add more items, even edit their item's detail.
- Due to Wix platform’s limitation, live tracking feature found in other delivery apps cannot be used. To give user a peace of mind about their order status, the expected delivery time will be shown together with food preparing illustration. User will also receive an instant email and a phone call or text message to confirm their order.
- Button Back to home to allows user explore the website while waiting for their food being delivery.
Design Thinking Framework
This is how I came up with the solutions, let me walk you through
Understanding the market and users
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.
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.
- People's ordering behaviors has been changed since the pandemic hit.
- People are expecting a similar ordering process with the delivery apps.
- People are using restaurant websites mostly to find out more about product and services rather than order online directly.
- Secondary research: Market research, competitor analysis
- Primary research: User Interview
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.
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.
of Vietnamese are likely to maintain using food delivery online even after the pandemic.
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
- The pandemic has been accelerated the demand for online ordering & mobile ordering is on the rise.
→ This is an opportunity for Ba Ngoai's kitchen to boost more sale by increasing their online presence across platforms.
- Vietnamese consumers mostly the young generation tend to focus on the quality of product, the speed, purchasing experience than the price.
→ Ba Ngoai's kitchen could consider providing the service that offers seamless experience to attract new customers espesically millenials & Genz who are the majority of consumer market.
- Typical Vietnamese local website is overcrowded with text. Text is overlayed on image that makes users feel hard to read the information.
→ A clean, simple layout would help Ba Ngoai's kitchen to standout from other Vietnamese kitchen.
- Most of Vietnamese restaurant branding presence is weak which could be a trust problem for new customers. While foreign cuisine restaurants have emphasized strongly in their branding by using the color that is consistent with their brand identity.
→ Strong & consistent branding identity across platforms will do wonder for communication between brand and users.
- Delivery apps highlight features: Live-tracking, Estimated distance, Personalized based on history purchase and Store payment, delivery information.
→ Ba Ngoai's kitchen can learn from the apps 's design pattern while keep in mind the constrainst of the platform to elliminate user's mental load.
1-on-1 User Interviews
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.
- Understand users’ needs, motivations, pain points with food online ordering process.
- Discover users’ current expectations, needs, and wants when it comes to decision-making where and what to eat.
- Identify what information influences a user’s first impression of a restaurant’s website.
- Gender: 4 female, 1 male
- Age: ranging from 24-34 years old
- Duration: 20-30 mins
- People's ordering behaviors has been changed since the pandemic hit.
→ Validated. 4/5 participants mentioned they tend to order more than normal since the pandemic hit because working remotely make them feel busier.**
- People are expecting a similar ordering process with the delivery apps.
→ Validated. 5/5 participants mentioned they often order food through 3rd party due to it's convenient, easy to use. They expected order online process on website should perform similar to the apps
- People are using restaurant websites mostly to find out more about product and services.
→ Validated. 3/5 participants mentioned they tend to look the restaurant website to now more about the brand and products.**
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.
From Insights to Needs
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."
User Persona & User Journey Map
Let's meet Chloe
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.
Problem Statements & How Might We Questions
Frame the problems
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
- How might we design an ordering process that helps Chloe order fast and intuitive across different devices to reduce the mental load?
- How might we provide Chloe a recommendation or suggestion about the food to avoid mindless-scrolling while in hungry?
- How might we design a menu layout that helps Chloe easily navigate and find for the food less time-consuming?
- How might we informed Chloe about her order status and estimated the delivery time to lighten metal load of waiting and being hungry.
"How might we design an ordering process that helps Chloe order fast and intuitively across different devices to reduce the mental load when Chloe is in the hungry state?"
Brewing the ideas
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.
First thing first
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.
Generating solutions to the problems
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.
Linear flow for the task
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.
Adding decision points
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.
Wired up the ideas
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.
Mid-Fidelity Responsive 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.
Building representation of ideas and refining
Mobile-First Design - Ready to test
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.
- To figure out what specific difficulties users encounter when they try to complete the core tasks of the Ba Ngoai's restaurant website: item selection, online ordering, and website navigation.
- To identify any barriers or confusions that prevent users from completing online ordering efficiently.
- Generating findings from testing results to shed lights on iterations for the next round.
In-person and remote usability testing via Zoom. Throughout, each participant engaged in a think-aloud exercise and were recorded with expressed permission.
- Age between the target group of 24-34
- Habit: Order food online frequently 3 times per month, have had order online for food within 3 months.
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?
- Completion rate: 100%
- Error-free rate: 95%
Finding patterns to make improvements
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.
- 3/5 participants confused about the unclickable menu, they didn't think the page is only displayed static menu, they tend to perceive menu and order online function similarly.
→ Area for improvement: How to make strong indicator to show that menu is static, or rethink about the flow make it less complicated.
- 4/5 participants said "How-to-order" is unnecessary because online food ordering is easy for them as they are familiar with other restaurant website and third-party app. 1 of them said may be it's helpful for elderly.
→ This should be validate with older users group ranged from 40-50 years old. At the mean time, can rearrange this section to another position to give more room for another sections
- 3/5 participants said the flow "Add to bag" is a bit confused and different with other delivery app. They expected once click the "Add item" button, they return to menu page which allows them add more dish if they want to, and there is an instant/ prominent respond to let them know their cart has been updated.
→ Area for improvement: Adjust the flow, make the indicator of item has been added more prominent. Also, should return users at the order online page to allow them add another dish if they want to.
Change for the better
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.
Spice it up
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.
Packing up the order
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.
Time to dig in!
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
What I learned
- The importance of effective communication with stakeholders throughout the entire process. By designing clear goals and establishing transparent communications, can help to foster the relationship with the client, set tone for the project.
- Testing with the mid-fidelity is incredibly insightful. For this project, I decided to test the early concept with a mid-fidelity prototype. I found this approach efficient in identifying initial roadblocks to the user’s goals when users interact with the early-stage design.
- Validate your design choice and thinking by talking with users. From one another, I have gained many insights from interviewing users and conducting usability testing
- Working with platform constraints allows me to exercise creativity and guides me to design decisions to focus on what matters the most.
- Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
- Prepare necessary assets, develop the rest of the website on Wix.
& thanks for reading!
Netflix - Feature Addition
Improving user engagement with a social feature that connects people.
Common Us E-Commerce
Creating a seamless shopping experience by bridging in-person experience with online format.