Gong Cha

What is Gong Cha?

If you haven’t heard of Gong Cha, it’s a bubble milk tea brand founded in Taiwan in 2006. They first landed on our shores in 2009. It came as a shock when they announced they were closing down in May 2017. As a GC fan, you can imagine my joy when they finally returned to Singapore in December 2017. What’s more, they brought with them an app for preorders in July 2018! I was over the moon. I could finally have my Oolong milk tea with herbal jelly, 0%, no ice. Just like the good old days.


Before we continue, kudos to the GC team for bringing the app to life and making preordering possible! The app is functional and reliable, and I’ve used it pretty often ever since its launch. Though the app currently only works for a few outlets, they happen to be the ones I always patronize, lucky me. This is certainly not an exhaustive redesign. I do not have access to business decisions or user data that could have driven the current design. Nor is this suggesting GC to ditch their current design. For reference, I’m running the GC app on iOS 12.3, app version 1.3, on iPhone 7.



Why Gong Cha?

In fact, this started out rather unconsciously. While I was using the app, I started to note down certain things/flows that I felt could be tweaked. I talked to friends around me, and observed how other people interacted with the app or self-ordering kiosks. As I’m not affiliated with GC, I did not feel brave enough to interview other customers in the queue. Yet, I was able to surface common feedback and behaviours through these interactions. This happened over almost a year before it eventually hit me. This was a perfect opportunity for me to apply what I’ve learnt and get some practice.

While I am aware this probably isn’t the typical ux/design thinking approach one would take, I’m still excited to share this journey, including what I’ve learnt and what I’ve come up with.


Meet my friends

Target Audience: Fans of GC, who drinks GC frequently, and has DBS PayLah!

Population mix of my friends with respect to
bubble tea (BBT) / milk tea (MT)

This was roughly the mix among the people I spoke with, and I kept the focus more towards understanding the behaviours of people who drank bubble milk tea.

The following personas are based on the 95% of friends who consumes bubble milk tea:


Bob, 32 yo

Bob is an IT analyst and only exercises when it’s nearing his IPPT. He will hit the gym after work or go outdoors for a run, when he’s not working OT. He drinks Honey Green Tea all the time, and he feels it tastes the same everywhere. Whichever brand his company is drinking, he just drinks that with them. However, he has a soft spot for taro, and he feels GC’s Taro drink is the best among the brands he has tried. So he will order Taro from GC instead. Once in a blue moon, he may feel like trying new drinks, and that’s about it. He tends to prefer tea without milk as it does not fill him up as much as when there is milk.


Aly, 29 yo

Aly is an administrative executive and has been working for 2 years since graduation. She usually does running and rock climbing with her friends on a weekly basis. Aly has a sweet tooth, and enjoys desserts such as ice cream and tarts. She usually drinks Koi once every two weeks, and is a fan of Koi. She always get her same usuals from Koi – Milk Tea with pearls 50%, or Yakult Green Tea with jelly 50%.


Sab, 26 yo

Sab works in the data management field, and she only does light running once in a while. As her work is quite demanding, she tends to OT quite often. Cheesecakes are her weakness, but she prefers New York cheesecake over Japanese cheesecake. When it comes to bubble milk tea, she always goes for Gong Cha. She has tried a few different drinks, but she still defaults back to her usual – Alisan Milk Foam Tea, 50%, with pearls. She used to drink 80% sugar, but has now cut down to 50%. She cannot understand why some people drink 0% sugar.


Su, 27 yo

Su is a business analyst. She maintains an active lifestyle, by hitting the gym classes at least twice a week. The gym is conveniently located near her office, which makes it easy for her to maintain his commitment. She runs occasionally and has gone for three marathons so far. Su also watches her diet, despite having a sweet tooth. While she enjoys desserts such as cakes and yam paste, she usually drinks bbt/mt when her friends drink. She picks either 0% or 30% which are the healthier options. For her, she will choose her drinks based on the brand. If she is getting GC, most likely she will get Taro. For Koi, she would go for lighter options that does not have milk. If she has craving for cheese topping, she would go to HeyTea instead. Her friends have recommended R&B for their cheese topping, and she is keen to try it too.


As I started coming up with the personas, I noticed one area that I had clearly overlooked during my research/interviews. Why would people even use the app?

My questions mostly revolved around their drinking habits and behaviours, which I felt went beyond just a mobile app. And if we had to have a mobile app, it could enhance the experience if it modelled some of these key behaviours.

I am extremely thankful for friends who entertained my endless questions. Certainly, the feedback could have been more wholesome if I had interviewed more people of different age groups, nationalities, employment status, occupation, etc. In an ideal situation, questions could also have been structured and prepared beforehand, rather than impromptu interviews, which could have contributed to the lack of focus on certain key areas. And of course, do not assume and always go back to the basics of why.


What they said, and did

Not starting proper documentation right from the beginning made recovering these information to be a challenge. Whenever I remembered something, I would quickly jot it down in my notebook. Attempted to collate the information into more sensible chunks, so check out the list below for some common feedback I’ve received, and also common behaviours I’ve observed along the way:


Mobile app

  • I don’t even have PayLah!, so forget it, it’s too troublesome
  • Why am i not already on the main page? why do i need to “go to main page”?
  • Why is main page the branch selection? Shouldn’t it be the drinks menu?
  • Why do I need to select location first?
  • Why are there so few locations for preorder?
  • Hot drinks not available for preorder, but option available on the app
  • How is hot under the size option?
  • Why can’t I order hot drinks on the app?
  • The size option is sometimes a toggle, sometimes a dropdown
  • Not sure why sometimes I can order 3 toppings, sometimes only 2. not really sure how it works
  • Changing of branch not obvious, clicked on the top left store name expecting to change from there
  • Why isn’t my previous orders in “My Order”?
  • Trying to get just my order number for collection takes a while
  • After all the ordering is done, i was so disappointed to find out that the shop was closed!
  • Why do i have to select a branch before i can access my order history?

Self-ordering Kiosks

  • The sugar level and ice level on kiosk is in different direction, almost ordered 100%!
  • Tempted to hit the home button on the kiosk, and did not notice the green button that says “order another drink”
  • [SMU outlet] Clicked on the 10% off because it said to “click here”, but clicked OK and nothing happened. This repeats for two more times, before giving up and proceeding to payment, only to realise the discount has been applied.

Miscellaneous

  • Search is almost last resort, hardly ever use search
  • I only found out SMU customers enjoy 10% off when I went there and ordered via the kiosk!
  • I’m almost always ordering the same drink each time, so it’s quite troublesome to have to always click through the same motions

Why and When to use the app

  • Perks in using the app
  • More convenient to use the app, less time-consuming and troublesome
  • Seldom drink so didn’t download the app

Key Problems

From the above, I’ve further narrowed down to the following 4 main problems and I’ll be focusing on these while I redesign.

Problem 1: Branch selection didn’t seem natural/intuitive at the beginning

Problem 2: Confusing process of ordering drinks

Problem 3: Repetitive and troublesome to order the same favourite drink and go through the same motions each time

Problem 4: Finding order number for collection is not straightforward


Flows and Features

With the information in place, my next step was to identify key flows and features that could address the above problems. The easiest way I could think of was to map the way we ordered in real life. So I did a quick scribble of key flows and also zoomed in on particular routines such as the ordering of drinks. As you’ll see below, I’ve modified some flows since then.

A. Order New Drink
B. Order Favourite Drink
C. Retrieve order number (for collection)
D. Check order history

Key interactions with the app

Branch/Outlet Selection before ordering drinks

Although there was feedback questioning the point of selecting an outlet first, this is in fact a model of how we order in real life. We head to the outlet, make an order, cashier informs us of the availability, then we customise our drinks before proceeding with order confirmation and payment.

It was probably not so much about why drinks menu is not the first thing they see. Rather, people could have been confused by the words “Go to main menu”. This built an expectation to see the drink menu instead of branch selection.

Since the app is powered by AppsPOS (got this info from the app), my best guess for the purpose would be real-time inventory tracking. I’ve encountered once when I tried ordering via the app and herbal jelly was unavailable. I decided to try my luck, so I went to the store 10 minutes later and successfully ordered over the counter instead.

Ordering Drinks

This was one key routine that I zoomed in on to understand the flow better. I also studied the kiosk to see how they handled this process, which was somewhat different to the experience on the mobile app.

From the feedback, we see ordering Hot drinks via the app can be rather confusing and disappointing, I experienced it too, when I chose ‘Hot’ under the size option and left the ice as ‘Normal’. When I asked the staff about my iced drink, I was told that hot drinks were not available via the app, and that ‘because you chose normal ice, so that’s an iced drink”.

Also, customising the toppings via the app seems rather unclear too. Unlike the kiosk, it does not offer visual cues as to how much topping one can order or what combinations are available. We can choose until we hit an error message that tells us we have ordered too much, but this pops out at different times for different combinations.

Favourite/Usual Drinks

When you are always ordering the same drink most of the time, it might actually be faster to order it verbally over the counter than having to click through the same customisations all the time via the app. The staff would probably be more familiar than us with using the system too.

If we could order our usual drinks via the app just as how the cashier might recognize us and remember our order, this would make it much easier and more convenient to order the same thing, over and over again.

Initially, I had thought it might work if we could simply tap on our favourite and it goes straight to the cart. Feedback from testing however suggested another behaviour – getting the same drink but with slight modification, such as ice or sugar level.

Retrieve order number for collection

In the current app, this is how one can retrieve the order number when collecting drinks:
Launch app > Click “Go to Main Menu” > Select a branch > Click on side menu > Select ‘My Order’ > Pick out the last 4 digits of the long string of alphanumeric order number.

Key point: all we need are the last 4 digits.

Interestingly, it appears the receipt also has gone through some changes to make the order number more obvious! Previously, it also printed the entire string of order number, while it now has the order number clearly printed at the bottom. You’d then hold on to the receipt till you get your drinks, after which you either discard the piece of paper, or you might keep it for recording purposes.

Are we then able to, perhaps, model this behaviour into the app too? Just have the necessary digits shown, and keep showing it till the order has been picked up.

Check order history

Order history essentially is a list of receipts, with each item recording what you have ordered and paid for previously. In this scenario, the receipts would also include other information such as the pick up location, date and time.

If there was a mistake with a particular order, customers can refer to the ‘receipt’ and contact GC for assistance. Else, they can refer back to a particular receipt and choose to reorder the same drinks. To tie in with the favourites, customers can choose to add any of these drinks as favourites too.


Let’s get started

And with that, I finally started sketching out some initial ideas. Writing legibly is still a work-in-progress.

A lot of my thought process, reflections, and even feedback are captured on these pages. I would also have two designs side by side and list down what works and what doesn’t for each. When I have decided to go with a certain design, I’d also note down the trade-off and reason for it. I find myself revisiting some of these as I am working on the prototype.

This seems really messy, but this was one of the moments where I was ‘testing’ my idea with a friend on a bus journey. Messy sketches but having something concrete drawn out made it easy for clear communications, no assumptions. I was describing a model system for the toppings, and my friend had imagined something totally different. Only after I drew out the model system did we realise the miscommunication.

Keeping the kiosk in mind, I decided to test another idea. I drew out the boxes system with two different versions. One had text labels for the toppings, as I had assumed that would help save space on the limited mobile real estate. Added thumbnails with the text labels for the other version, which I wasn’t confident of, as I felt this may take up more space and require the user to scroll more instead.

Feedback for the text label version: “Actually what is 3J? I’ve never ordered it before. What if I order and I don’t like it?” Showed the thumbnail version and feedback became “ohhhh okay, I get it, but I think I won’t order it.” That was a good indication that my assumption did not hold. Visuals, despite taking up more real estate, have its value in showing customers what to expect when they order something.

Another feedback: “The system should be smart enough so that the toppings still available should move to the top, while those that cannot be selected should move down.” My understanding of this was “I want a clear indication of what the other available options are after selecting one topping.” and I was careful not to assume.

So I did up a sample to test it out quickly, and the conclusion was instead “okay, this is a bad idea, it’s quite confusing to have so many things moving around.” Learning moment: while it’s important to listen to what users are saying, it’s also important to listen what they are not saying.

Redemption, while it lasts!

Wireframing the flow of ordering favourites in Balsamiq

During the initial wireframing of ordering a favourite, there was a particular feature in the current app that had to be kept in consideration. The ongoing promotion partnered with DBS gave customers redemption options with terms and conditions. You can only select up to two redemption options, which came in forms of $0.50, $1, $2, $5 and $10. However, the promotion has ended by the time I started prototyping, and I decided to leave that out in the final prototype.

As you can see, I initially also left out important details such as pick up date and time, and these slowly crept in over time and many iterations.

Despite excluding this feature from the end product, I designed the rest with this in mind. It seemed like such redemption promotion might come back from time to time, so it was important that the design would be able to cater to such ‘seasonal’ features.


And so, we end up with…

While red has many different associations, it is commonly linked to danger, error, anger, and even importance. Gong Cha’s red is slightly a darker shade, suggesting power and elegance. Nonetheless, it’s important not to overuse the colour, while still incorporating the brand’s red.

With the menu on the home screen, customers can get to ordering immediately. Branch selection is a part of the same step as well. By default, this will show the nearest store if the customer has allowed access to his/her location. Favourites is also integrated into the menu as the first section.

Order history was placed on the bottom navigation as it is one of the features accessed by users more often. Customers can also reorder a particular order, or add particular drinks as favourites from past orders.

All other details and settings can be found in the profile section. This includes profile details, redemption history and app settings.

Sought help from Coolors, using GC’s red as the base

Branch Selection

When the nearest store is about to close soon, the customer needs to know this as early on as possible to prevent disappointment. They will also need to know the alternative options and their respective opening hours too.

Currently, this information is only available to customers at the end of the flow – when they have finalised their orders, and are ready to select collection time before making payment.

In the proposed design, despite the alert, customers have the flexibility to still proceed with the same branch if they wish to preorder for another day instead. This behaviour is retained from the current app.

Order New Drinks

Based on the feedback above, two key areas focused here was the selection of drink type and size, and customisation of toppings.

In this layout, the drink type (hot or cold) has been clearly separated from the drink size (medium or large).

It also removes the need to guess the maximum number of toppings allowed or different combinations one could mix and match.

One minor improvement to this section could be to swap the order of Sugar and Ice level. Size and ice are two options unavailable for hot drinks, and they could be hidden when hot option is selected, if not disabled and greyed out. This might be a more logical flow of ordering a drink:

  1. Drink Type (hot or cold)
  2. Drink Size (medium or large)
  3. Ice level
  4. Sugar level
  5. Toppings
  6. Quantity

Payment and Order Number

Customers can preorder up to a week in advance and this is communicated via the pick-up date picker. The time dropdown in the current app works fine, and I wanted to explore a different way to select time.

Once payment has been made, the order number is immediately displayed on the home page. This key information for collection is easily accessible when you launch the app, without needing to go to a separate view. After collecting your drink, this will disappear and you can find the details in Order History instead.

A possible improvement to this flow could have been getting customers to select the date at the beginning, as this can better the reflect the inventory. If you wanted to pick up Chocolate Milk two days later, and it is currently out of stock, you should still be able to preorder.

Add Favourites from Order History

You tried a new drink, and you liked it. Here’s how you can easily add it to your Favourites menu from your order history.

Getting the same drinks as you did the last time round? Simply select ‘Reorder’ to save yourselves some time and trouble.

Got issues with the drinks? Or maybe the staff who handled your particular order? Contact Gong Cha is the way to go.

Order Favourites

Ordering your usual favourites can be a breeze. It can also be flexible to accommodate any changes. Perhaps today you are feeling hot oolong instead. Select your usual, change it to hot, add to cart, that’s it!

Initially, I had designed the favourites to be one-click straight to cart. After testing it with a few people, it seems even with usual favourites, they still want the flexibility to make minor tweaks.


Changes over time

Home screens versions

Home screen saw the most changes. There was too much red initially, and favourites were a separate thing on its own. In the second one, there was feedback that search was taking up too much space for something that is hardly used. People were not sure what the store icon meant, neither were they sure they could click on ‘Plaza Singapura’ to change branch. Having thumbnails for favourites turned out more helpful than I assumed. All these feedback went into the third one.

This was the initial flow where customers get to choose date and time for pick-up together with location. This might have been the better flow especially when you are pre-ordering days in advance something that is currently sold out.

I also removed the map from the branch selection. Had to read up a bit on designing store listing as there was a lot of information to include in this section. I learnt that lists provide “higher information density” and is “easier and faster for users to select a location”. The source provided this helpful summary: “Maps of business locations may be more visually appealing than a simple list view, but they introduce too many usability issues on mobile devices.”

The main purpose of this store listing is to let customers pick a branch for pick-up, so they will need to know which outlets are available for preorder, what the opening hours are, and if they have to order before a certain time. This behaviour deviates slightly from the typical store finders, where customers’ main purpose is to locate the store physically, which Google Maps or any map apps would certainly do a better job at.

The sugar and ice level picker was another one that went through a few iterations.

I started out with circles, because I thought the values were discrete. However, slider seems quite a common and popular design for such purposes. Moreover, it is also used in GC’s self-ordering kiosk. I decided to change it to a slider.

After running through the prototype a couple of times, Fitts’s Law came to mind. I increased the area to select a value, while keeping the essence of a slider. Compared to selecting a small bar in the original slider, it could be much easier to select a bigger region.


Reflections

While this redesign has been a fun learning experience, coming up with proposals for feedback and feature requests, there are some constraints which I think are important to keep in mind. It could have been a business or technical decision to leave out certain features.

  • Not every outlet supports preorder (yet?)
    • Preordering could still be in its testing phase, and preordering with more outlets might mean additional licenses for the POS, hence they might be studying the worth in this investment. Or it could simply be the newer outlets have not yet been setup with preordering.
  • Ordering hot drinks via the app is unavailable
    • Customers could turn up way later than their stipulated pick-up time, and possibly still expect their drinks hot. It is easy to store a cold drink in the fridge to keep it cold, but how do you keep a hot drink hot without investing in additional equipment? Or the mobile POS could simply be unable to support hot drinks for now.
  • Unable to save favourite drinks
    • It could be possible saving favourite drinks for each customer requires more backend effort. This is likely to translate to more development costs, especially if GC is outsourcing this piece of work to their POS vendor. Again, is it worth an investment?

Here are additional helpful links that I came across during my research period:

Having the opportunity to execute this has been humbling and satisfying. It could have been better if I did proper documentation right from the beginning, and talked to more variety of people beyond my social circle and did more testing along the way. Nonetheless, I am thankful I managed to apply some bits of what I have learnt from my GA course, practise wireframing and prototyping, and pick up Adobe XD.

Whether you’re a fellow GC fan or not, it would be great to hear what you think of this, and let me know what I can improve on.

Side note: I drank a lot of Oolong Milk Tea during this period, and I think I’m ready to try something different. Most importantly, thank you Gong Cha for coming back to Singapore!

// Update: I have recently found a new favourite: Hot Oolong Milk Tea with Red Beans. Must try!