UX Research | UI/UX Design | Design System | Prototype
REDESIGN
THE HKT APP INTO A SUPERAPP
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
Deliverables
-
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
Duration:
4 weeks
Software:
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
About
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
Challenges
Low app usage rate
Lack of attractiveness
and functionality
to users
Unappealing
UI design
Goal
Increase the usage
rate and improve user retention
1
Make this app a cross-functional ecosystem for businesses of all types
2
Increase the overall attractiveness
3
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
Study the Pros and Cons of other SuperApp
We also study the apps which are part of the HKT groups
Study the Pros and Cons of other SuperApp
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
Persona
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/
Relogins
Low App usage rate
Recommendation
Problems
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
Before
After
App redirections /Relogins
Auto-detect feature
Register without filling in information again
Auto-detect feature
Auto-detect users’ HKT accounts with phone number & email
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
Before
After
Reward Page
Before
After
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
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
After
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
“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.
Before
After
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:
-
Signing up for My HKT account and link the children app to the account
-
Login to My HKT account
-
Register for new children app account
-
Check and pay bill via Apple Pay
-
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
Typography
Color Palette
Icon Set
Components
Final Product
