top of page

UX Research   |   UI/UX Design   |   Design System   |   Prototype   


Project Overview

This is one of the client projects from my full-stack UX/UI design immersive course at Xcelerate. We worked with HKT to redesign the UI/UX of their existing app: My HKT with a group of 10 people within one month.

This project aims to redesign My HKT to become a SuperApp that will connect all their business and services in one place.

Project Type: 
A group project involving 10 people 


  • Primary Research (Survey and Interviews)

  • Secondary Research (Competitor Analysis)

  • Persona, User Journey Map, Affinity Map

  • User Flow, Site Map, Usability Test

  • Low-fidelity wireframes, high-fidelity mockup and interactive Prototype

  • Design system

4 weeks
Figma and Figjam

My Role

  • Primary and Secondary Research including Survey, Interview, Competitor analysis

  • UX/UI design for the Rewards, Homepage, Login and Account sections, also handle and set the guideline in the design system

  • Wireframes, high-fidelity mockups, prototypes and usability tests

  • Organizing meetings among students and updating the clients


HKT Limited is one of Hong Kong's largest telecommunications companies. It dominates fixed-line, mobile and broadband services in Hong Kong. The company's subsidiaries include Mobile and boardband services (Netvigator, csl, 1010, Club Sim), media and entertainment services (Viu TV, Moov, Now TV, Now E) and loyalty programs (The club), FinTech (Mox), electronic wallet (Tap & Go) and HealthTech (Dr Go).

Original My HKT App
Low app usage rate
Lack of attractiveness
and functionality
to users
UI design
Increase the usage
rate and improve user retention


Make this app a cross-functional ecosystem for businesses of all types


Increase the overall attractiveness


User Research

We conduct the primary and secondary research to find out the feedback on the existing My HKT App, and their app usage patterns, also we want to know the most important features people are looking for in My HKT App.

We also do the secondary research on the competitor analysis and study the My HKT app and the children app review.

Competitive Analysis

We also studied the other SuperApp competitors, such as Yuu, Grab, and Wechat, to find out their pros and cons, we also wanted to see what My HKT could learn from them. In addition, we reviewed some of HKT's feature apps to gain a deeper understanding of the company's services and their capabilities.

Survey Finding

Survey results:

96  Responses

Survey respondents are mostly:

Between 18-39  years old

Only 17% are existing users of

My HKT app

All My HKT existing users use the app to check their bills and settlements

Only 32% of participants are The Club members, half of the existing members have redeemed a prize before, and 27% have never heard of The Club

51% of people use HKT service for entertainment purposes (Using ViuTV/Moov/ NowTV/NowE)

Interview Finding

We conducted

37  Interviews

The only function is checking bills

Difficult to find the information

Unappealing UI design

It was expected that users would be able to browse the csl/Club in my HKT app, but instead they were redirected to the individual app

The interviews would rather to download the CSL/1010 individual app than using my HKT

Affinity Map

Based on the interview feedback, we created an affinity map, the below image is the major findings of our map.

Research findings based on the affinity map:
  • My HKT users are hard to find, which indicates that the brand is not well known

  • Users only login to My HKT to just check the bill and pay the bill elsewhere

  • One-click login is attractive to users who value convenience over cyber security

  • User prefer a clear and simple interface with an aesthetic design

  • We find that users are not interest to add social networking function like messaging and forum in the app

There are 4 personas with similar goals:
  • They all want a simple way to check and pay bills

  • It would also be helpful if the app had more payment methods available

  • They expect the app's interface to be more user-friendly and aesthetic

  • App users were also interested in personalized content

User Journey Map

The above user journey map shows our persona who wants to settle the bills and found some problems with billing issues, would like to call customer service hotline but is not efficient. As a result of the journey maps, we are able to identify the pain points throughout the bill payment process. We can also demonstrate some opportunities that can be integrated into our main functionality.

4 Main Painpoints

By summarizing and correlating all findings from the research, we came up with the 4 main pain points.

Inconvenient bill payment procedures

Unappealing UI design

App redirections/


Low App usage rate

Unable to pay all bills at once
App redirections /Relogins
Low app usage rate
Unappealing UI design
Proposed Solutions
One-click payment feature
Auto-detect feature
Gamifying reward system & adding an interactive wheel
App redesign
Expected Outcomes
Save time and easy payment settlement
Register without filling in information again
Get users to stay longer on the app
Increase attractiveness of the app

Base on our findings and insights from the research, we came up with these solutions:

  • Added more payment methods and developed One-click payment to save users time

  • With auto-detect HKT children app features, users can register without having to enter info again

  • Gamification of rewards systems to increase user engagement

  • By redesigning the user interface, the app will look more appealing

Information Architecture

To outline all the necessary functionality, we created a site map of the main features. The 5 main features are Home Page, Explore Our Service page, Bill Payment, Reward and the Login Page.


Home Page - In the navigation bar, users can access Bill Payment, Reward, Favourite and Login. You can also link your individual account to Explore our services. We also keep the “Data Usage”, “Contact Us” and “My Line Test” functions to meet the needs of existing HKT users

Bill Payment - Users can check and settle all their bills at once

Rewards - Users can explore the HKT service promotional offer and rewards in the club on the reward page

Favourite - Manage your saved offers and rewards

Login - On this page, users can sign up or log in, as well as check their Club points and membership level

User Flow Diagram

User flow diagrams are created for each of the key features, the above is a Reward Page flow diagram. Diagram showing explore Reward Page process from Homepage to the Children App detail page.


Lo-fi Wireframe

Creating low-fidelity wireframes allows us to visualize our ideas before we incorporate them into the 4 primary features of this project.

Main Features
Unable to pay all bills at once
One-click payment feature
Save time and easy payment settlement
One-click payment feature
Allow users to settle all bills that lie under HKT’s service scope
One-click” payment feature
Add more payment methods to suit different users’ needs

The existing payment system is inconvenient, users cannot pay all bills at once; each bill must be paid separately, users must relogin every time they check their bills. The redesigned bill payment design allows users to settle all bills that fall under the scope of HKT services. It also adds more payment methods in order to make it more convenient for users to settle bills.

Bill Payment Process
App redirections /Relogins
Auto-detect feature
Register without filling in information again
Auto-detect feature
Auto-detect users’ HKT accounts with phone number & email
Detected account page 1 1.png
Promotion Page - Version 1.png
Allow users to register for children's apps’ services in My HKT
Include key features on the navigation bar, including Reward, to draw users’ attention

According to the reserach, users do not like app redirections or multiple logins, and they expect to see all children apps' features in My HKT. When signing up, the new design app will automatically detect users' HKT accounts with phone number & email. Users can choose which child apps to link to My HKT. My HKT also allows them to register the new children's app account.

Sign Up Process
Reward Page
Low app usage rate
Gamifying reward system & adding an interactive wheel
Get users to stay longer on the app
Gamifying reward system & adding an interactive wheel
Gamify the reward earning process
Service Catalogue - Onboarding Page.png
Promotion Wheel.png
Showcase HKT’s services using a wheel

In order to increase the attractiveness and keep users in the app longer, we designed a gamified reward system and added an interactive wheel. In addition, users can find out more about the services offered by HKT group through the game.

Service Page
There is no Service feature in the original app
Unappealing UI design
App redesign
Increase attractiveness of the app
App redesign
Include key features on the Homepage, including Bill Payment, Reward and Services to draw users’ attention
HomePage 1.png
Data Usage” and “Contact Us” buttons are kept to meet the needs of existing HKT users

The user prefers more intuitive and user-friendly user interfaces. To attract users' attention, the revamped Homepage includes key features such as Bill Payment, Reward and Services. Our research shows that users mostly use My HKT app to check their bills, so we added that information to the homepage so users can access their bills easily. We also kept "Data Usage" and "Contact US" to meet the needs of existing HKT users.

IMG_7526 2.png
Usability Test and Insights

In total, we conducted 5 usability tests, and I was involved in one of them. Through the test, we identified a few areas and problems which may confuse the user.

During the test, 5 tasks had been tested:

  1. Signing up for My HKT account and link the children app to the account

  2. Login to My HKT account

  3. Register for new children app account

  4. Check and pay bill via Apple Pay

  5. Search reward according to filters for Mox

Before Usability Test

After Usability Test

After verifying their account, users were directed to the account detection screen, which most of them found confusing.


A prompt to is added, granting users the choice to decide whether to link their accounts or not which also helps avoid confusion.

Design System
Color Palette
Icon Set
Final Product
bottom of page