Making Telco users happy: A User-centric Revamp of My Starhub App

There are over 2 million Starhub mobile users in Singapore, yet the My Starhub app has only been downloaded 11 thousand times.

That’s about 0.5% of it users — so how can we get the other 99.5% of them onboard?

I set out to investigate this with two other UX designers, Deniese and Gary, in a 10 day project.

The Project Plan

For an app to gain traction, it must have features that achieve both user and business goals.

Hence, we started out with a two pronged approach.

User Interviews

1. Understanding current user’s needs and pain points when using the app
2. Understanding new user’s issues when using app
3. Persona Creation

Business Analysis

1. Reviewing Annual Report
2. Research on Data Analytics and User reviews
3. User flow
4. Content audit
5. Competitive analysis with the three other telcos in Singapore, My Singtel, My M1, and circles.life.

Based on our findings, we then did:

1. Ideation and Feature Prioritisation
2. Wireframing and prototyping of selected features
3. Usability Testing of identified tasks
4. Design Iteration

Read on for the full details of our research!

User Research

1. Interviews

First, we identified that we want to talk to current My Starhub users from 3 age ranges — 20 to 30, 30 to 45, and 45 to 60, so that it reflects the overall demographics of its users.

We interviewed 7 people in total, with 2–3 people in each age range, and had some interesting discoveries.

Findings

1. Across all age ranges, their top priority is to check data usage when using the app.
2. All interviewees had issues accessing and browsing My Rewards, and hated the fact that it leads them to a webpage within an app.
3. The younger generation are frustrated that they have to type in their credit card details every time in order to pay their bills, while the older generation prefer to pay their bills through desktop instead, citing security and visibility reasons.
4. All interviewees found the main screen too cluttered.

Even though the Starhub app has 12 icons, most users have never used more than 2 of them.

We also did usability tests on two Starhub users who have not used certain aspects of My Starhub app before.

The first was unable to login, and the second was frustrated with the loading times and difficulty of claiming a reward.

2. Creating Personas

Next, we consolidated their needs and pain points with an affinity map, and came up with three types of users.

ideation sketches

We then decided to design for the most senior user, as the other two personas are more tech-savvy and will definitely be able to use the app if the most senior one can do so.

3. Customer Journey Map

Hence, we did a customer journey mapping of Mui Choon’s use of the My Starhub app, to understand opportunities where Starhub can fulfil.

With all our user information gathered, we needed to understand the business goals next…

Business Analysis

Reviewing Annual Report and Industry Research

We learnt that more than 50% of Starhub’s revenue comes from their annual users, so mobile users are a good market to target.

While their hubbing strategy of selling services as a package helps them to retain customers…

The fierce competition from Circles.life and netflix is starting to eat into their customer market.

Data Analytics and User reviews

We also looked at My Starhub’s number of downloads and ratings, and discovered that they have very bad reviews on both iOS and Android markets, showing some slightly better performance on the Android market.

Heuristic Evaluation

We also reviewed how well the current app satisfies the Nielsen Norman Group’s 10 usability heuristics guideline:

Competitive Analysis of Screen Flows

For our 3 key identified tasks, we reviewed the current number of screens a user needs to achieve a task, and also compared it to the competitor’s apps.

Current bill payment process: 14 clicks

M1’s screens

Login Screens across all competitors

Comparative analysis

We also took a look at some apps our users enjoyed using, such as SP services and Facebook. Additionally, we also researched Starbucks, Slack and Twitter apps for feature inspiration.

Ideation Session

Based on our research, we want to focus on mobile users for the business revenue they bring in.

Their top 3 pain points were viewing data usage, checking and paying bills, and using their reward points.

Hence, we sketched out the current My Starhub userflow for these three tasks.

While the main flow was done in purple ink, we identified frustration points at each step in red, and also possible solutions in green.

Based on our research, we identified some possible features that might be able to solve our user’s pain points:

Feature Prioritisation

Next, we sorted these features on a graph to understand which we should prioritise — the top right corner where the user needs overlaps with the business needs.

We then took these features and did a time-cost evaluation:

Surprisingly, most of the features that are most beneficial to the users and the businesses, are relatively easy and cheap to do in terms of time and cost!

Brainstorming based on User’s needs

We each took one portion of the features identified to work on over the weekend.

I worked on improving the bills feature based on considerations from three inputs:

User problems and pain points:

1. Tech savvy users wanted a way to save their credit card details in the app for quick and easy payment on the go
2. Middle aged users find it difficult to read the text during payments
3. Some of the billing screens were troublesome to navigate and not easy to understand
4. Because some accounts have multiple phone numbers and users, each user needed an easy way to pay for only their portion of the bill
5. Android users found it frustrating that they can only view the breakdown of their bill through an external PDF
6. Reduce clutter from main page

Personal Goals:

1. Reduce the number of clicks it takes for user to complete tasks
2. Use a simpler way to authenticate credit card user

Possible Business Goals:

1. Prompt subscribers to sign up for GIRO — Starhub is currently doing this via a link in e-bill, but users don’t click on it because they think it will be a time consuming process

Wireframing and Prototyping — Iteration 1

I decided to put a bills section prominently on the first page users see when they login.

Not only can they toggle between bills for each account individually from the main page, the same bar will change its display at different dates so users can also track whether they have paid their bills, whether their bills are overdue, or when payment date is approaching.

We also removed the 12 icons and placed only important information such as data usage and bills as the first two things they see on the main page.

Different states for bill payment on home page

I also made the call to action immediate and simple if a bill is due — a “Pay Now” button just below the amount due will lead them to the payments page directly.

For the Bill Payment flow, I cut it short by 6 screens by allowing users to save their credit card details.

8 clicks re-designed bill payment flow

Here’s the other flows which show how to add a new credit card, the dropdown menu for the bill breakdown, and the flow for adding a giro payment.

I also did some research on other ways to perform credit card authentications, but realised that these will be difficult for a senior user to understand and pick up, so I discarded that idea.

After consolidating our work, we made a interactive prototype in Invision.

Usability Testing

We tested our prototype with 5 users which are 45–60 years old.

Findings and Action Points

1. Users still found our main page too cluttered.
2. Users were confused about the two ways to navigate to payments page, the nav bar and the main page → I decided to remove the bill payment section from the main page and keep the navigation only in the nav bar.
3. Users could pay bills successfully and without much problems
4. Users liked the bigger fonts for OTP
5. Users found the breadcrumbs navigation font for the bill payment flow too small and difficult to read → I increased the font size and made them into individually colored arrows
6. Users wanted a payment summary screen after payment to confirm that they have paid → I initially brought them back to the main page with “Bills Paid” in order to cut the number of clicks, but users were shocked at that flow. I added the payment summary screen back in.

Prototype Iteration 2

For prototype iteration 2, I had some additional goals -

1. Bring prototype to a colored high fidelity prototype in the style of the Starhub website.
2. Further improved Bill Payment design by adding “due in 10 Days” next to the Amount Due
3. Understood from a UX designer who worked on Telco apps that the apps need a screen to allow users to pay less than their bill is due in order to keep their plan from being terminated → added the screen back in, but de-prioritize it visually.
4. Show users a clearer connection between their bill payment and their reward points → Added a Rewards prompt to Bill summary screen to show that users get rewards when bill is paid.

Try the prototype out here: https://invis.io/CM7ZCNADA#/173778707_Login

Here are some videos that I made of the final prototypes:

Step 7: Presentation

We also came up with a powerpoint presentation where we did a sample pitch with our solutions:

https://drive.google.com/open?id=0B0ZvIQloAWzOQzFscG1Wa2FxTUE

Learning Points

Overall, I learnt from my team to always keep a focus on the high level user’s problems and needs when solving a problem.

When we tried to plug in existing solutions from other apps — for example we tried to imitate Singtel’s solution initially — we realized that those solutions come with their own separate set of problems, and may not address our identified user’s needs.

Eventually, I’m glad that we managed to find a way to improve further on the other Telco’s app solutions and make crucial information visible to the users in an instant.

I also enjoyed finding the synergy between all three parts of the app — Rewards, Bills, Login, and Data Usage — and linking them up in the second iteration of the design.

I feel that it makes an app more cohesive if the different sections of it connect — like how we have been able to teach the user something while, encouraging them to stay in the app by linking payments with rewards.