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
Goal
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
Duration
Role
Tools
Deliverables
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
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 to bring back the nostalgia for out-of-towners in New York.
.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.
.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
-
Branding is crucial to driving younger customers in the current market
-
Customers look for menu and ingredient descriptions when they navigate the restaurant website
-
White label partnership is trendy where customers journey through restaurant’s website to access delivery
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?
.png)
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.
.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 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.
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.
Menu
Before
After
About/Our Story
Before
After
Ordering Menu
Before
After
Landing Home Page
Dish Pop-up for details
Prototype
Home page
Ordering through website
.png)
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.
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.
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 .
.png)
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.
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.
-
Change letter case to Title Case
-
Differentiate dish name and pricing
-
Change categories order
.png)
-
Revise press section to be collapsible cards
-
Remove signature dish section
-
Make CTA more pronounced
-
Add restaurant contact info
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.
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.
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.
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.
