Tea Shop’s Application

A tea shop application which allows for online ordering, lottery games, and marketing events.

·   ·   ·



Wang Lao Ji (WLJ) is a very popular tea brand in China; however, the brand and flavor is new to the Taiwanese people. Our proprietor introduces this brand to Taiwan and uses WLJ tea products as a base in creating new beverages, which form the foundation of a brand new tea shop, 1828 WLJ Tea Shop. There are seven branches in Taiwan. This brand is creative and enticing, since the beverage’s name and design are inspired by traditional Chinese stories.

Company: 1828 WLJ Tea Shop (a famous brand in China)

Role: UX/UI Design, Front-end Development

Time: 2018/10–2019/01 (full-time)

Our brand was created by an experienced graphic designer, and it is intended to be creative and enticing.
·   ·   ·

Our Team

I am the sole UX/UI designer and front-end developer on the team. In the UX/UI role, I am responsible for manifesting the design for both iOS and Android applications. In addition, I will occasionally serve as a front-end developer to create web pages for regular marketing events, which will then be embedded in the iOS and Android applications.

Our team
·   ·   ·

My Workflow

Regarding my UX/UI work, I start by conducting user research, empathizing users, then I explore ideas, which is followed by prototyping, testing, and creating. I will detail the steps of this workflow.

My workflow
·   ·   ·

Step 1. User Research

Questionnaire & Insights

I used an online questionnaire to survey customers' experiences when purchasing drinks at the tea shop in Taiwan. I was able to obtain over 150 responses in five days. The following important insights were gleaned from these responses:

1. For a tea shop, "flavor" is the most important thing: In Taiwan, over 80% of respondents bought at least one drink in a tea shop every week, and the largest reason respondents love a tea shop is the flavor of its tea.

2. For a tea shop application, "getting a lower price" and "an online ordering mechanism" is important: Generally, when it comes to a tea shop application, respondents prefer to get a discounted price for their drinks, so they like to see regular marketing events or coupons. Additionally, in Taiwan, people always have to wait in line when they want to purchase a drink, so it is nice to have an online ordering mechanism in the application as well.

Online questionnaire
·   ·   ·

Problem Statement

According to the data from our POS system, 77.2% of our customers are first-time customers and 22.8% are returning customers. The application’s business goal is to retain customers. As a result, the two challenges we address are (1) converting first-time customers to repeat customers, and (2) encouraging returning customers to purchase drinks more frequently.

Customers' Visit Frequency
·   ·   ·

Step 2. Empathizing Our Customers

Customer Persona

We categorize our customer persona according to their visit frequency. Almost 80% of customers are first-time customers while only about 20% are returning customers.

·   ·   ·

Experience Journey Map

In the experience journey map, we place more focus on the first-time customer experience and analyze how best to solve their pain points.

Experience Journey Map
·   ·   ·

Pain Points

1. The flavor is not acceptable. Many drinks are mixed with traditional Chinese medicine, which might be good for health, but the flavor is not very palatable for Taiwanese people. Taiwanese people prefer sweet milk tea with boba or pure green tea instead.

2. It is too expensive. The beverage price in our tea shop is between NT$60 and NT$80; however, the general beverage price at other tea shops ranges between NT$30 and NT$60. Customers don't understand why we are more expensive than other tea shops, so we need to demonstrate our values to customers.

3. Downloading the application before checking out is very troublesome and inconvenient. Some customers may feel the application poses a security risk to download and log into on their phones. Also, if they are busy, downloading the application to get coupons might be an obstacle to them purchasing a drink.

Many people are busy downloading our application to get coupons while they are in line.
·   ·   ·

Step 3. Ideation

Ideas for solving the pain points

New customers should not be forced to download our application when they visit our store. Instead, we should place a sticker on their cups that advertises and encourages customers to download our application. The stickers could contain a serial number or QR code that directs customers to our application, which they can use to begin collecting points or learning about our special events.

Put a sticker containing a serial number on cups.
·   ·   ·

Ideas for the tea shop application

We should put more emphasis on converting first-time customers to repeat customers. According to user research, first-time customers want to get more information and cheaper prices from the application.

For providing information, we intend to advertise (1) regular marketing events, (2) the menu, and (3) the branch location. However, user research indicated that users do not find it necessary to include a branch location in the application. This is likely because users can search for branch locations on Google Maps directly. To encourage customers to use the application, I suggest that we create a way to allow them to check-in at different branch locations. When they have checked in at three or more locations, they earn a reward for a free beverage.

For obtaining cheaper prices, we plan to have (1) coupons for regular marketing events, (2) rewards from games in our application, and (3) loyalty cards.

Mind map of helping first time customers.
·   ·   ·

Information Architecture

According to these ideas and research, we built our application's information architecture.

Information architecture
·   ·   ·

Step 4. User Flow & Prototype

Beverage Ordering Interface

Ordering beverages is an important part of our application, which can actually be used to generate revenue. However, it's very complex, since there are many different orders and payment methods that can be used. The process of creating this interface required many discussions and testing phases.

User interface of beverage ordering process.
·   ·   ·

Lottery Game Interface

When customers buy our drinks or visit our application, they receive one point to use towards the lottery game, which offers prizes to customers. People who use multiple points in one lottery game will have a better chance of winning the prize. For example, an iPhone requires 30,000 points. If a customer uses one point towards this prize, then he will have a 1/30,000 chance to win this prize. Because we offer many great prizes, customers will use a few points toward different prizes, which means that the prizes will take longer to win.

I have suggested an idea that we put a ranking on the number of points our customers use towards their prizes. For example, when a person plays a basketball shooting machine, a high score record is displayed, which the person always wants to beat. Many other individuals are driven by a desire to win. If we have a top ten ranking of how many points users dedicated towards each prize, it could encourage customers to use more points.

Low-fidelity user flow of lottery game.
Lottery game's high-fidelity prototype.
·   ·   ·

The Location Interface

It is also important for customer to be able to find the nearest tea shop. However, customers can also find this information on Google Maps. To encourage customers to use the application, I suggest that we could create a way to let them check-in at different branch locations. When they have visited five or more branches, they earn a reward for a free beverage.

The old version low-fidelity user flow of location planning.
·   ·   ·

Special Event - Shake Your Phone

Our customers seemed to only open the application when they wanted to buy beverages. To increase engagement, we created an event wherein customers could obtain a discount coupon once per day by opening our application and shaking their phones. When customers open our application and shake their phones during the event period, we will give them a coupon for 60%, 50%, 30%, or 20% off according to a certain probability. It is a persuasive strategy in interaction design intended to encourage long-term engagement and customer loyalty.

It is also an aesthetically pleasing design that is inspired by traditional Chinese culture. An Imperial decree which contains a coupon will expand when customers shake their phones. This event is available by web view on our iOS and Android application, so I designed and hand-coded it.

Shake your phone to get a coupon.
·   ·   ·

Project Learnings

Communication is important.

I am aware of the large gap between users and developers. For example, some functions are very helpful and user-friendly, thereby engaging users. However, developers may need to spend a lot of time on these. Other times, there are technical restrictions that delay the planning or completion of a project. Thus, to achieve a near-perfect product, communication is very important.

I am impressed by our project manager because he excelled at communicating, always focused on the common goal rather than any individual, and he did not show any emotions while communicating. He always worked smoothly, gaining everybody’s respect. I believe that I must learn and develop these qualities.

More Projects