logo

Miss the taste of homeland

4 weeks 120+hrs
UX/UI designer
Research, Visual design, UI design, Usability testing

Background

While abroad, food that reminds you of your hometown is the most enjoyable thing when you feel homesick. Dublin has a few Chinese restaurants. However, there are no local Taiwanese restaurants. Therefore, a business owner, Patty, started making delicious Taiwanese cuisine for herself and sharing it with people. Her long-term goal is to expand her small business "Formosa" to sell the original taste of Taiwan to the rest of Europe

Problem

Patty sells food and communicates with customers through communication apps like WeChat and Line. Her customers place orders via a google form. She found it time-consuming to confirm and organise orders and as well as answer inquiries with customers. Customers were confused about the product description and couldn't remember what they ordered due to no order confirmation.

Scope and Focus

As the Formosa food business doesn’t have its website yet, there is a front-end for users and a back-end for business management waiting to be built. In this project, I aim to design the website for front-end users’ browsing, ordering and tracking order experiences. With good front-end experiences, you can decrease the confusion and increase requests for the seller.

DISCOVER

To further understand the problem I am trying to find a solution to, here are the research questions I needed to answer.

  • What are some facts users want to know when they shop for food?
  • What are some things that can improve the system of processing orders for the user?
  • How can we measure success with the local food website?

Market Research

Comprehending the business model and problem

After interviewing the business owner to understand the problem and business model, I categorised two types of customers that look for different goals.

Asian customers
needed more control and flexibility.

  • They are usually familiar with the product of the Formosa menu.
  • Focus on depth perspectives like food textures and sourced ingredients.
  • They would like food to be customised. Therefore, communication with the seller is a basic need.

Foreign customer
needed photos with context and guidance.

  • They are not familiar with the type of food.
  • Photo details and ingredient descriptions are their main concerns.
  • They knew the brand through existing customers.

User interview

What the target customers encounter

I conducted the zoom meeting with 5 participants who purchased from Formosa before to understand the circumstances the existing customer encountered. These are the three takeaways points I have learnt.

👀 Not private

40% of participants mentioned they don’t like to place the order in the group using the communication apps, due to privacy and the disturbance to others in the group. 

🔎 Photos don't match the description

Using the google form to order food is a good idea for small businesses, but there are some issues like the image that can’t match each item and the ingredients are unclear.

⌛ Spend a lot of time on communication

100% of participants feel unsure there is no confirmation text or email after placing an order. Therefore, they spent time on contact with business owner after they place orders.

The participants had a user interview with me, and one participant's camera wasn't working.

DEFINE

Project Goal

What is the goal of customers and Formosa want to achieve?

I combined the needs and goals of the business, owner and users to create a good experience. They are clear delivery option explanation, a systemic order process, and a user account to track orders and get the reward. Based on the insight gained from the research and definition process, I listed the features the site should have and prioritised the order.

User flow/ Task flow

Wireframe

Turning Ideas into the structure

I checked some common design patterns for e-commerce and sketched some of the main screens on paper. I turned the low-fidelity wireframes from a sketch to digital mid-fid wireframes. Mid-fidelity wireframes determined how the features and pages interact with users. At this stage, I conducted the usability test of the designed features to determine if users could successfully finish the main tasks.

Implementation

Usability Test

Validating the shopping experience I designed

I prepared to conduct a usability test by developing two scenarios I would ask participants to complete.  These are the test objectives:

  • See if users can easily select the “Add to cart” button.
  • Observe if the user can easily understand the delivery options.
  • Determine which path a non-membership user takes to get to the track order page.
  • Observe if the user acknowledges the order status and the accessibility of modifying orders.

Challenge

Validating the modified order feature I designed

According to the research, there are many customers add or modify items after they place the order. I designed a flow where customers can track their orders and modify their orders before the owner starts to prepare. When the order status is in the first stage, the modify button is active but after the second stage will be disabled.

After usability testing. the modified order feature wasn't successful due to the pattern of users' past shopping experiences, it cause confusion and wasn't intuitive. At this stage, I discussed the issue with stakeholders and compromised the idea of not having a modified order button.

Usability test finding takeaways

After completing usability testing, I transcribed my records and synthesised the results by sorting the notes. There are some other results

👍 Strength

  • The layout is tidy and clean, the colour is warm and harmonious.
  • The product description is clear and provides enough information.
  • The key function buttons are easy to spot.

😕 Weakness

  • All participants were confused about the delivery option.
  • 50% of participants were hesitant because the product details on the top were the same when they entered the page from cart to delivery page.
  • The order status is not very intuitive. Users get confused about the way and time of modifying order. 

Iteration

People expected to see the same patterns from the past online shopping experience

To address sources of confusion and frustration from usability testing. Those iterations are outlined in the wireframe annotations below.

Design

Selected Screens

Check out page- delivery

Because the business is not producing food daily, they have a specific time and date for collection and delivery. Therefore, I listed the date and delivery options so users can quickly pick the time.

Order tracking page

The ability to trace the order and get the updates helps reduce the communication time between the customer and the seller.
The login page has two type of users login. Non-members login in by order number and members login in by their account.

High-fidelity Wireframe

Responsive website and mobile for all type of users

These main screens are the solutions I created after the research and ideation process. I adopt the online shopping design pattern as a reference to build the high-fidelity wireframe.

Logo

Why is there no logo redesign?

I proposed to refresh the current logo I made two years ago. However, the logo is already widely used in merchandising. The stakeholder suggests that we can re-brand the logo after at some stage.

Visual Design

Homemade, Legacy and Vintage

I integrated these messages with the Chinese culture style the stakeholder desired. I used the Morandi colour palette to present a vintage vibe and outline shapes that express the Chinese cultural legacy. I collected some drawing-style illustrations related to homemade cuisine.
This UI kit is the foundation for the later design

Reflection

What have I learned?

I came up with a realisation that, from a design viewpoint, the key is having good communication with the stakeholder. To find out the problem earlier and solve it. I also had some compromises in some parts of the design that frustrated the users that I could not change due to business and system constraints.

What is next?

The business owner said that she found it hard to manage the orders and overwhelming different requests from customers. I focused on design for the front-end first because a good UX design creates a better shopping experience that can decrease the confusion and inquiries for the seller. If I had more time, I would optimise the back-end for the management side.

I learnt how to make Taiwanese traditional food "zong zi" for dragon festival with the business owner, Patty.

Back to the top⬆

More projects