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
-
​The website design is outdated and not responsive
-
There are too many layers to get to the menu
-
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

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


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

.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.
.jpg)
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:

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

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.

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

Site Map

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

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




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

Our Story

Menu

Ordering

Dish Detail

Ordering Method

Order Payment

Confirmation

.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

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