A fresh redesign of the Gong cha Mobile App
Introduction:
What is Gong cha?
Gong cha is a popular global franchise focused on making high quality tea beverages with customer satisfaction as their focal point. The Gong cha mobile app provides features that allow for customers to scan points, complete online orders, and stay updated with the latest news and rewards.
Problem:
Stirring up confusion.
The mobile app comes with many user experience challenges that causes struggle and confusion whilst navigating through the app.
Goal:
A fresh redesign.
The aim of the project was to redesign the Gong cha mobile app to improve its navigation and usability in hopes to retain and increase customer usage.
The problems of the app were found within the 2 pages where I focused my redesigns on:
Home page:
A quick overview of the problems within the home page are:
There is too much information
The 2 main elements (membership barcode and order button) were difficult to locate.
Misleading buttons
Page contained poor navigation
Page contained a lot of redundant information
Menu page:
A quick overview of the problems with the menu page are:
It was hard to locate.
Did not function well.
Users need to search through each drink individually to find what they want.
Users confused the 'menu' page with the 'home' page.
There was no filter option despite the many different drink dietary options.
3 different forms of user testing were conducted to determine the usability of the original app design.
5 Second Test:
A 5 second test was conducted to demonstrate the most prominent information on the home page. Participants were given 5 seconds to view the home page and write down everything they remembered.
The results were allocated into different categories and are as shown below:
The results demonstrate that the element to order drinks online was not seen despite being one of the 2 main features that users use the app for. This means it requires more effort for users to search for the button when they open the app to order drinks online.
First click test:
The first click test was conducted to showcase how the home page contained unecessary information. Participants were given the prompt:
"Where would you click to scan your Gong cha membership barcode?"
The results are showcased on the right.
As shown by the heatmap, majority of the participants clicked on the barcode itself making the text 'scan here' unecessary.
Another problem with the navigation is that the barcode did not in fact showcase the barcode, but navigated users to the 'account page' making it misleading.
Tree test:
The tree test was conducted to determine the navigational usability of the app. Participants were asked to determine whether or not the Pearl Milk Tea contained caffeine through the prompt:
"You want to confirm whether or not the Pearl Milk Tea contains caffeine or not. How will you navigate the page to find out."
The correct pathway required participants to click on 'more,' 'menu,' and then search for Pearl Milk Tea where it will indicate that the drink contains caffeine.
When redesigning the 2 different pages, in order to improve the usability and efficiency of the mobile app, I wanted to incorporate the menu into the home page allowing for users to view and order their drinks at the same time once they opened the app.
Home page:
The home page was redesigned to have the barcode itself at the top and then below it, the drinks menu will be showcased. The menu will be scrollable so users are able to see all their options with a favourites page avaliable in order to make it easier for users to continuously order their favourite drink.
This page was redesigned so that users are greeted with 2 options when opening the app.
Scan their membership barcode.
Order or view drinks.
The sections removed from the home page were already avaliable in the 'more' page so their elements are still accessible for users.
Menu page:
When users click on their selected drink type (for example the 'Top 10' section), they will be navigated to a new page with a similar layout.
The page will the 'Top 10 drinks' as well as a filter button. When clicking on specific drink, the information will be displayed and an option to add the drink to the cart will appear.
The filter button will be a sinple pop-up with checkboxes allowing users to pick which options
A high-fidelity prototype was created in Figma showcasing the new redesigns.
Home page:
Reduced the amount of elements:
Users are now greeted with 2 options as they open the home page:
Scanning their barcode for points
Viewing / ordering their drinks
Removed difficult navigation:
As the menu is located and interactable on the home page, it removes the difficulty of locating it that the original design had.
Improved efficiency:
The barcode contained at the top now opens the membership barcode when clicked on. Instead of opening up the 'accounts' page that the original design had.
Menu page:
Only scan images:
Unecessary text was removed from the menu allowing users to focus on the images and the names of the drink.
Recognisable elements:
Familiar conventions were utilised in order to make it easier for users to navigate:
The grey down arrow indicates that there are more avaliable options.
The black left arrow indicates going back a page.
The icon on the top right corner is a universal symbol for 'filters'
Drinks page:
Dietary information are symbols:
The dietary information for drinks have been changed to circle icons. This helps reduce the amound of wasted space.
Add to cart button:
By incorporating an 'add to cart' button for the drinks, users are able to view the menu and order drink at the same time.
This feature was incorporated a many participants in the tree test were confused with the 'order' and 'menu' pages.
Filter:
Added filter navigation:
A color coded filter bar was added for users to efficienctly find what type of drink they are looking for.
The colors indicate that the filter is 'on.'
Further testing was completed to compare my redesigns against the original.
5 Second Test:
Another 5 second test was conducted with different participants. However the concept was the same. Participants had 5 seconds to look at the newly redesigned home page before writing down everything they remember about it.
The results are as follows:
As shown by the tags, the results indicate that majority of the participants remembered the menu and the barcode on the home page. This satisfies the goal of having the main 2 elements become the focus of the app.
Preference test (Home page):
A preference test was conducted with the original home page design along with my redesigned home page. Participants were asked to click which page they preferred more and explain why.
The results indicate that 75% of participants preferred my redesign over the original.
The general consensus on why my redesign was better than the original was because participants believed it to be more "minimalistic," "simple," and "straight to the point." Participants claimed that the original design was "too distracting" and they were only interested in ordering from the menu, rather than gift cards and special rewards.
Preference test (Drinks page):
Similarly a second preference test was conducted on the drink page.
The results indicate that 67% of participants preferred the original design rather than my redesign of the drinks page.
The reasoning behind the results was because participants believed the original design to be more informative a it displayed the full name of the dietary requirements. The reason that my design contains simplified circles is due to the names being labelled in the filter section. Participants were not able to access the filter section during the test which could have affected the results.
However, based on the visual aesthetics, my redesign was rated higher as participants believed it to be "more simple" and "easier to interact with."
Tree test:
A second tree test was conducted to compare the navigation of redesign against the original. A similar task was given to the participants with the prompt below:
"You want to confirm whether or not the Taro Milk Tea contains caffeine. How would you navigate the page to find out?"
The correct pathway required participants to click 'Top 10,' on the home page, and then 'Taro Milk Tea.'
The summarised results indicate that there was a 89% success rate with 56% of particpants taking the direct path. Between the successful participants, the average time to complete the task was 25.8 seconds.
This is a major improvement form the 60% success rate with the tree test on the original design. The results prove that my redesign is easier and less confusing to navigate.
First click test:
A first click test was conducted to determine the usability of the filter button. Participants were given the 'Top 10' page and the prompt:
"Where would you click to view gluten free drinks only?"
The results showcase that 50% of users were able to determine the button was a filter button and assumed that it will help them filter out the gluten free drinks.
Other areas clicked were the 'back button,' 'home page button,' and the specific drink. This was due to general consensus that they did not see the filter button and automatically believed that the previous page will allow them to view gluten free options.
Overall I believe the redesign to be successful. The navigation of the redesign has been improved significantly as users can open the mobile app and efficiently complete their tasks.
Combining the menu and order section together and inputting it on the home page greatly increases the efficiency usage of the app. It also gave the app a more minimalistic design which was stated to be more visually appealing as there are less elements needed to scan.
The addition of the filter button allows users to quickly search drinks related to their dietarty requirments. More tested need to be done in order to determine its effectiveness as the current results prove only 50% of users understood its feature.
If possible, future additions I would like to incorporate to the redesign will be changing the entire app to be more focus on the customers task of ordering drinks and scanning their barcode. For example the current “order” page for the app works well however can be improved to be more efficient when implementing my combined menu and order section to it.