TenRen’s Tea
TenRen’s Tea
TenRen’s Tea is an international tea distribution leader. Founded in Taiwan in 1953, TenRen’s Tea has quickly expanded to more than 100 retail stores worldwide and more than 20 stores in North America to provide convenient access to its fine teas. Their operation is under the motto of "A Traditional Business Under Modern Management”. They desire to provide products to enhance the quality of life and health for our customers.
UX/UI Designer
TenRen’s Tea
2019
Overview:
TenRen’s Tea is a famous tea branch that has both online services and physical stores across the States. They’ve been doing well although the growth is slowing down their customers are still loyal. However, we notice that the current website is not mobile friendly, and not easy to find the product.
TenRen’s Tea is a famous tea branch that has both online services and physical stores across the States. They’ve been doing well although the growth is slowing down their customers are still loyal. However, we notice that the current website is not mobile friendly, and not easy to find the product.
Challenge:
1). Users had difficulty finding the product they want.
2). Too many product on the website that confused the users.
3). Mobile site is hard to Navigate.
1). Users had difficulty finding the product they want.
2). Too many product on the website that confused the users.
3). Mobile site is hard to Navigate.
Goal:
Optimize the site with better flow to help user navigate and ease user’s confuse feeling. So that will help users on tea purchasing process.
Optimize the site with better flow to help user navigate and ease user’s confuse feeling. So that will help users on tea purchasing process.
To start my design process, I ask myself some questions.
What did competitors do differently? How can I improve users to find tea faster? Who are the target audiences/ users? What feature are we missing that will fundamentally help us?
What do users need the most?
Understand User’s Needs
Beginning with usability testing of the current site, asking them about how to navigate the site, make the purchase on their desktop and phone. The 5 users seems confused and frustrated about the present site.
Key takeaways:
People found it difficult to find what they want due to unclear categories of product
- “I am confused about the layout of the shop page, I see some of the product of one category but not the one I want.”
- “Why is there a category name gift set and what’s new along with all other teas?”
- “I found it difficult to find exactly what I want, I don’t know the difference of different Tea.”
- “It’s hard to find the tea by its region, taste or function.”
People found the information of the product not clear
- “I can’t see how much cheaper on the sale product, it only says sale but no original price.”
- “I can’t find tea through specific function, I will have to click them one by one. The information are not in same format”
- “Some category is empty”
People found it difficult to use the mobile version
- “The shop page is confused, I don’t know how to use it”
- “There’s no search function in the mobile version”
Although users find the check out process is easy
- “Once I add my product to the cart, rest of the step is easy”
Research
Competitive Audit Report:
I research 4 other companies in the North America Tea industry: T2, The Tea Story, Chado Tea room, Art of Tea. This research will only focus on the tea ordering flow and responsiveness.
![]()
Gaps & Oppotunities:
We are missing some features in the category section and some on the product detail page. These competitors all have a different way to categorize products, we will focus on what users need and the pain points in the user interview to find the possible features. Yet we are not to rush putting these features into our website. This research shows that TenRen’s Tea page still can grow. Those missing features can easily be the key to growth. For now, we will use this information to conduct a user interview and we will come back to review the possible features once we talk to the users.
Competitive Audit Report:
I research 4 other companies in the North America Tea industry: T2, The Tea Story, Chado Tea room, Art of Tea. This research will only focus on the tea ordering flow and responsiveness.
Gaps & Oppotunities:
We are missing some features in the category section and some on the product detail page. These competitors all have a different way to categorize products, we will focus on what users need and the pain points in the user interview to find the possible features. Yet we are not to rush putting these features into our website. This research shows that TenRen’s Tea page still can grow. Those missing features can easily be the key to growth. For now, we will use this information to conduct a user interview and we will come back to review the possible features once we talk to the users.
Research
User Interviews
In the user interview, we want to figure out what users wanted in a tea website. What were their needs? How do they make decisions? What’s the key element toward a purchase?
We started with a screener survey through SurveyMonkey to filter our target audience, which was people who drink tea regularly, live in North America, and had purchased tea online in the past. After the initial survey, we found 12 people that fit into our target audience and were willing to join the interview. The questions we asked were based on the user test and competitor audit report. Below are some of the questions we asked.
How often do you drink tea? What’s your tea age (how many years you’ve been drinking tea)?
Why do you drink tea?
Do you have a favorite tea? and why?
Where do you get your tea?
Have you purchased tea online?
Can you describe your experience when you shop for tea online?
What’s the factor that effect your decisions?
Do you encounter any difficulty when shopping for tea online?
Is there any way in which you feel these challenges could be resolved?
Pain points:
We found the pain points during the interview.
- A user feels frustrated because they can’t find the tea they want.
- A user feels overwhelmed by too many options in one category and couldn’t make a decision.
- A user says it will be nice to know how the tea was packaged.
- A user feels not comfortable with his tea choice.
- A user shop when ran out of tea stocks at home.
- A user hesitates about trying a new tea.
- A user buys tea online because of a sale.
After the interview, we use the notes and recordings to create key takeaways. We also came up with possible features that correspond to the pain points, and put it in the Affinity map to organize the datas.
User Interview Takeaways
A. Purchase intentions:
Through the pain points, we can catagories that users have two different types of intentions.
- The user knows what they want and tries to find the item. (Returned purchase and First time purchase)
- The user does not know what the user wants but wants to try something new and browse around.
B. Possible features from pain points:
Search button, category system, Reviews, Taste, function, origin, Packaging Icon, tea pass - User knows what they wants
Keyword selection board, top selling tea, Reviews, Taste, function, origin - User browse around
We will review these features again when we create our user task. It will help us to prioritize features that meet user needs.
Research
Problem Statement, the Possible Solutions & Ideation Key Features
After the user testings, competitor audit, user interviews, pain points, possible solutions and personas, we come up with the problem and solution.
Problem Statement:
Users want to find the product they want faster and want to search through filters. But finding the current site is too complicated and hard to find the tea they want.
We then use “How might we” method to ideate datas from interview included purchase intentions and features for each possible solutions.
User feels overwhelmed by too many options in one category and couldn’t make decision.
User feels frustrated because they can’t find the tea they want.
User feels not comfortable with his tea choice.
“How might we help users to find the product they want, need and fast?”
Possible Solutions:
- Create a better menu system for users to find the tea they want by creating a multi-category system allowing users to find the tea they want faster.
- Create a customized interactive tea selection by creating a keyword selection board allowing users to select tea by their needs.
- Create a purchase history page with past order in it for users to order faster and smoother.
Key Features:
Better way to find the products they want > Optimize the menu system
Faster and smoother way to order from previous order > Tea pass (Tea Caddy)
Help users to know the tea and know what they want > keyword selection board (Customize tea finder)
Define & Ideation
User Tasks:
Before we create a complete user flow, we start with a user task to revamp the purchasing process.
From our research we needs to enhance three different portal for users to reach their goal. We added one more task for user who knows what they want and want to find the tea through direct search.
We then create four user tasks for different types of users.
A. The user knows what the user wants and clicks the search feature directly.
![]()
B. The user knows what the user wants and clicks the shop menu to find the tea in the category.
![]()
C. The user knows what the user wants and clicks “Tea pass (Tea Caddy)” to purchase from previous purchase.
![]()
D. The user does not know what the user wants and clicks the “Find tea” button to find tea.
![]()
Define & Ideation
User Flow:
With our key features and user tasks being built, we were able to connect all the puzzles into user flows. These are the anchor, the tree trunk, and the branches of a blooming tree.
![]()
Catagorized all the items:
![]()
![]()
User Tasks:
Before we create a complete user flow, we start with a user task to revamp the purchasing process.
From our research we needs to enhance three different portal for users to reach their goal. We added one more task for user who knows what they want and want to find the tea through direct search.
- Through menu
- Through purchase history
- Through customized tea finder
- *Search
We then create four user tasks for different types of users.
A. The user knows what the user wants and clicks the search feature directly.
B. The user knows what the user wants and clicks the shop menu to find the tea in the category.
C. The user knows what the user wants and clicks “Tea pass (Tea Caddy)” to purchase from previous purchase.
D. The user does not know what the user wants and clicks the “Find tea” button to find tea.
Define & Ideation
User Flow:
With our key features and user tasks being built, we were able to connect all the puzzles into user flows. These are the anchor, the tree trunk, and the branches of a blooming tree.
Catagorized all the items:
Delivery
After some sketches on paper, I jump into Figma and create the wireframe and made it into prototype according to the User Flows. I created both web and mobile version with responsible design.
Web wireframe: (clickable)
Iteration
We ran a usability study with 10 users. The goal of the user testing is to find out if users were able to purchase a movie ticket on the low-fi prototype smoothly.
We analyze the result and came up with the theme below:
Users think the website is not attractive
10 out of 10 participants think the website might not finish yet.
6 out of 10 participants found they want to see more product picture.
Users think the mobile app not useful
10 out of 10 participants found the mobile app hard to use.
3 out of 10 participants found the user flow were smooth.
Users think the purchasing process is smooth
10 out of 10 participants found process smooth.
Users can find what they want
10 out of 10 participants found what they want in different method.
10 out of 10 participants found what they want in different method.
10 out of 10 participants found it’s easy and fast to find the tea.
Prioritized insight:
- Bring back landing page with big hero image.
- Add tutorial in the mobile app.
The Hi-Fi Prototype:(clickable)
Takeaways:
What can be improve:
![]()
![]()
![]()
![]()
![]()
- We’ve create both mobile native app and desktop version, but due to miss communication the client only need desktop version.
What can be improve:
- We faced challenges in measuring the success of our approach, that’s why we couldn’t convince the client, but we have set a high bar for users to learn and grow. The communication between client and our account needs to be improve.
- We provide an alternative and simplier app with reward features.
