top of page


  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


Helping a local restaurant, A-pou's Taste, update the website for better online ordering flows and create a fresh brand identity to appeal to younger customers.

Project Details








3 weeks

UX/UI Designer


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

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

APT mock up.png

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 to bring back the nostalgia for out-of-towners in New York.

Progress bar.png

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

Key Objectives
  • What factors and features stimulate customers to order online

  • Painpoints and frustrations while order meals online

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

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

4. Secondary Research

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.

Key Insights
  1. Branding is crucial to driving younger customers in the current market

  2. Customers look for menu and ingredient descriptions when they navigate the restaurant website

  3. White label partnership is trendy where customers journey through restaurant’s website to access delivery


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

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 new and old customers?

Deliverables: Feature Priortizing | Project Goal

Feature Priortizing

From the research and user data, there are so many features can be added. I prioritize the key features I am building based on user's needs, wants, and painpoints.

1. Easy access to the Menu
2. Online ordering system
3. Include pictures of the food
Project Goal

Through my understanding of the business and customer goals and some of the technical constraints, we determine the mutual goal is to build a transparent, relevant, and updated online ordering experience.

Project Goals.png

Deliverables: Customer Journey Map | Site Map | 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. 


By comparing the current and ideal customer journeys, I was able to pinpoint the struggles to create a better user experience.

Site Map
Site Map.png

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

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



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.





About/Our Story




Ordering Menu




Landing Home Page

Home –2.png

Dish Pop-up for details

Kung Pao Chicken-pop up – 1.png

Home page

Prototype- Home.gif

Ordering through website

A-Pou's Taste HI-FI 2- ordering.gif

Deliverables: Hi-Fi 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.


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

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


Deliverables: Prioritize Revision | Iteration | 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.


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.

  • Change letter case to Title Case

  • Differentiate dish name and pricing

  • Change categories order  

Frame 2 (3).png
  • Revise press section to be collapsible cards

  • Remove signature dish section

  • Make CTA more pronounced

  • Add restaurant contact info



Revised-Home -3.png

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


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



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

Going back to the goals for this project, I implemented an online ordering system to the website and created a fresh brand identity to appeal to younger customers. And I am glad to hear Doris really likes the illustration and having her story featured on the website.


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.

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 a usability test on my mid-fi wireframes so I know where to iterate when I go into my hi-fi wireframes.

What's next

My main focus of this project is to revamp the website and its branding. For the next step, I aim to improve the design of the social network where it drives traffic from the millennial.

bottom of page