top of page

Project Details

Duration

 

Role

 

Tools

 

Deliverables

80 hours

UX/UI Designer

 

Adobe XD, Figma, Miro, Adobe Fresco, Adobe Illustrator

Branding, UI Design, Design System, UX Research, Responsive Website Design, Prototyping, Usability Testing

Problem

  1. The website design is outdated and not responsive

  2. There are too many layers to get to the menu

  3. Current website doesn't intrigue customers to learn its story

Challenge

Helping a local restaurant update the website for better online ordering flows and create a fresh brand identity to appeal to younger customers.
 

Solution

Bringing its original truck back to its website makes customers want to learn more about its story.

1

By designing a new menu with hand illustrations, it created a fresh and nostalgic feeling to its customers.

2

3

Menu only.png

Streamlined its ordering flows by implementing it in its native website without going through third party delivery platform. 

A-Pou's Taste HI-FI 2- ordering.gif
TOP
APT mock up.png
Background

Doris Yao started the Taiwanese food truck resided in East Village to bring Taiwanese street food to New York City at her age of 54 . After a few years of success, in 2017, Doris opened the restaurant located in East Williamsburg, NY, serving the neighborhood its home-cooked dishes with full of nostalgia.

Problem

Due to the size of her business, she didn’t have the manpower to update her website for a more consistent and intergraded online presence.

There are a few major issues with APT’s current website:

  • Duplicated APT domains are confusing to the customers

  • The website design is outdated and not responsive

  • There are too many layers to get to the menu

Progress bar.png
(1).png

Deliverables: Competitive Analysis | Individual Interview | Survey | Secondary Research

Objectives
  • What factors and features stimulate customers to order online

  • Painpoints and frustrations while order meals online

Competitive Analysis

To understand the trend in the market, it’s important to look into the competitors’ websites and approach.
I selected the restaurants that caters Taiwanese cuisine to compare their branding and online ordering process to further identify the strengths and weakness.

Competitive Analysis (2).jpg
Empathize
Individual Interview

I interviewed four participants who have ordered meals online before to understand users' online ordering behaviors, expectations, as well as frustrations they encountered.

100%

of them will first check the menu when they go on restaurants’ websites.

100%

of them consider ingredient description very important on apps and websites.

75%

of them consider good quality of food images will affect their decision of ordering.

50%

of them mentioned the disconnect between apps and restaurants frustrates them.

Survey

Besides the individual interview, I wanted to get the quantitative data to understand the user behaviors when they order meals through apps and websites. I created a survey and recruited 17 participants who have placed orders through apps and/or websites before.

82.4%

of them order food from local restaurants close by, meaning that attracting the neighborhood customers is the priority for the local restaurants to boost the sales.

58.8%

of them have visited a restaurant website and made the trip based on the overall feeling from the website.

I also found out the factors to appeal users to visit the restaurant location are:

4 factors.png
Secondary Research

In the direction of my secondary research, I focused on finding out what are some of the trends that emerged of the impact of Covid-19. It’s crucial to understand the current market and needs of customers to help A-pou’s Taste adapt to the demands of current restaurant market, therefore to have a sustainable business even after Covid.

“You have to expand into other things: e-commerce, delivery, products.
You have to think outside the four walls.”

-Camilla Marcus, co-founder of TechTable

Here are some of the key findings:

 

2021 will see an increase in white label partnerships where customers journey through the restaurant's website to access delivery.

 

Going digital is taking center stage as owners and managers explore ways to improve internal efficiency, deliver more spectacular restaurant omnichannel experiences, and stay connected with their customers.

Because COVID-19 has also accelerated consumer adoption of mobile apps and technology for reservations, menus, payments and tipping, diners will expect curbside to be digitally integrated as well.

 

Consumers also want to skip the middle person, with 68% saying they would rather use a restaurant’s own website or app for food delivery rather than a third-party app.

Problem Statement

Throughout the research, I looked into users’ thoughts and behaviors. I was able to further refine the question that I had in mind and came up with a clear problem statement:

How might we provide a fresh and user-friendly online experience to APT’s new and old customers?
Define
(2).png

Deliverables: Persona | Project Goal

Persona

With the research conducted thus far and the insight provided by the participants, I came up with a user persona that reflects the various needs and pain points that were mentioned earlier.

Meet Natalie- the neighbor type persona, who cares about convenience and food quality when it comes to ordering food.

Persona.jpg
Project Goal

With my user research and understanding of the business, I identified business and customer goals along with the possible technical constraints. I further identified their mutual goals in the overlapped areas and the common goal from three perspectives is where I’d be focusing on in this project.

Project Goals.png
(3).png

Deliverables: Customer Journey Map | Site Map | Task Flow | Design System | Lo Fi Wireframes | Hi Fi Wireframes

Customer Journey Map

To understand customers' struggles and expectations from the website, I worked on the customer journey map to envision how a customer makes an order from Apou’s Taste current and ideal website design. 

Ideate
IDEAL STATE.png
Site Map
Site Map.png

Site map helps me visualize the architecture of where things fit and to have a clear website structure.

Task Flow
Task Flows copy.jpg

In order to understand how a user completes a task, I created a task flow chart with two individual tasks. This helped me understand the flows of the features I will be focusing on.

Design System

I created a design system for A-Pou’s Taste website. I kept its brand color red and introduced other accent colors that brighten up the brand to make it happier and younger. Since APT is to bring nostalgia through home-cooked dishes, I wanted to express the welcoming and heartwarming intentions when Doris first started the food truck through the hand-illustrated pictures.

Design system.png
Design System
Low Fidelity Wireframes

I started to design the wireframes through Figma to get the core website struture clear to follow later.

Our Story

Home

Ordering

Ordering Menu

OUR STORY.png
Home.png
ORDER ONLINE 1.png
ORDER ONLINE 2.png
High Fidelity Wireframes

Once I have the core structure of the wireframes, I started to work on the hi-fi wireframes on Adobe XD.

Home

Home –2.png

Our Story

OUR STORY.png

Menu

MENU.png

Ordering

ORDER PAGE.png

Dish Detail

Kung Pao Chicken-pop up – 1.png

Ordering Method

ORDER METHOD – 1.png

Order Payment

CART PAGE – 2.png

Confirmation

THANK YOU.png
(4).png

Deliverables: High Fidelity Prototype | Usability Testing | Affinity Map

Usability Test

To test the new A-Pou’s Taste branding and ordering feature amongst the users, I developed a high-fidelity prototype in Adobe XD with two complete task flows. This would allow me to test the new website structure and collect valuable feedback to understand if there are any flaws in the design for the iteration stage.

Methodologies

  • Unmoderated usability testing through Maze, an online prototype testing tool.

Participant requirement

  • Participants who have ordered food delivery online before.

Total participants: 14

Scenario for tasks.png
Test
Usability Test Findings

Once I had completed my testing, I added every note, comment, and observation onto an affinity map. From there, I pulled out patterns to figure out what I should update in my wireframes.

Affinity Map (8).jpg

Insights

  • 100% of participants found the ordering flow easy.

  • Overall impression of the new branding is positive.

  • There are a few menu readability issues, item name and price on the menu seem to blend in.

  • ”Order Now” CTA button isn’t noticeable enough.

  • Favorite dish sector on Our Story should be reconsidered for better purpose.

  • Users want to see ways to contact the restaurant on the order tracking page .


Recommendation

  • Feature section could be presented as cards to collapse instead of scroll down.

  • Revise the menu to be a two-column layout to reduce the length.

  • “Order Now” CTA button can be more prounounced.

  • Change the wording “Picked Up” in progress bar to be clear.

  • Add contact info and driver’s contact in the confirmation page.

(5).png

Deliverables: Prioritize Revision | Iterate Wireframes | Takeaways

Revision Priority

Based on the user feedbacks and behaviors from the usability testing, I prioritized things that have high impacts on the user flows for the next iteration stage.

Discover
Affinity Map (9).jpg
Iteration

After I prioritized what to change, I went back to revise the most impactful changes. One of the important feedbacks from the users is to change menu font to be title case instead of all captions, as well as to differentiate the price with the dish name so they are not blend in.

Frame 2 (3).png
Iteration3.png
iteration2.png
Takeaways

For this project, I focused on the new branding for A-Pou’s Taste and implemented a better ordering system to attract younger customers. I picked this project because a Taiwanese restaurant like that feels close to home, and I felt I could immerse myself easily to help the business.
I looked back and there are some valuable takeaways:

What I learned
After completing my usability test, I felt that some of the issues could have been discovered early on. If I were to do it over, I would conduct usability test on my mid-fi wireframes so I know where to iterate when I go into my hi-fi wireframes.

MOCKUP4.png
bottom of page