Client Project: Ba Ngoai's Kitchen -  Vietnamese Restaurant

Helping a local restaurant expand its online presence with a worry-free online ordering process.

  • My Role
    UX Research, UX/UI Design, Wix Implementation
  • Team
    Sole UX/UI Designer
  • Project Timeline
    July 2021
    80+ hours in 3 weeks
  • Tools
    Figma, Whimsical, Miro, Notion, Airtable, Wix
Ba Ngoai showcase cover
Project Overview

Background

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.

The Problem

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.

The Solutions

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!

Solutions Breakdown

The solutions in detail

Homepage

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.

Order Online

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.

Check out

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 Process

Design Thinking Framework

This is how I came up with the solutions, let me walk you through

1

Empathize

Stakeholder Interview

Market Research

Competitive Analysis

User Interview

Affinity Map

2

Define

User Persona

User Journey

Problem Statement

Brainstorming

Feature Roadmap

3

Ideate

Sitemap

Task Flow

User flow

Wireframe

4

Prototype & Test

Mid-fidelity prototype

Usability Testing

Affinity Map

High-Fidelity Prototype

01. Empathize

Understanding the market and users

Research

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

  • 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.

Methodologies

  • Secondary research: Market research, competitor analysis
  • Primary research: User Interview
Secondary Research

Market Research

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

$24.62B

is the value of Vietnam food market. The industry is expected to grow annually at 13% till 2024.

Source: Deloite

9.53M

Vietnamese using online services to order food delivery. Mobile ordering has been on the rise.

Source: Hootsuite, 2021

55%

of Vietnam population is Gen Z and Millennials. They are the majority of consumer market.

Source: Kadence

64%

of Vietnamese are likely to maintain using food delivery online even after the pandemic.

Source: tandfonline

Competitor Research

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

Key Takeaways

  • 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.
Primary Research

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.

Interview Objective

  • 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.

Participants

  • Gender: 4 female, 1 male
  • Age: ranging from 24-34 years old
  • Duration: 20-30 mins

Assumptions Validated

  • 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.**

Research Synthesis

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.

Key Takeaways

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."

02. Define

Concreting the problems

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?"

Brainstorming

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.

Feature Roadmap

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.

03. Ideate

Generating solutions to the problems

Sitemap

Structure Content

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.

Task Flow

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.

User Flow

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.

Wireframe

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.

Sketch

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.

04. Prototype & Test

Building representation of ideas and refining

Mid-Fidelity Prototype

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.

Usability Testing

A rehearsal

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

  • 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.

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

  • 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.

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

  • Completion rate: 100%
  • Error-free rate: 95%
Affinity Map

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.

Key Takeaway

  • 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.
Revise Design

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.

UI Design

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.

Responsive Wireframe

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.

Final Mobile Prototype

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!

Conclusion

The Impact

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

Reflection

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.
Next Step

Moving foward

  • 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.

Bon Appétit

& thanks for reading!

Next projects