CASE STUDY

CASE STUDY

Singtel Prepaid hi!App

Singtel Prepaid hi!App

A complete re-design of the self-service app for all Singtel prepaid users.

2017, LAUNCHED • IOS, ANDROID

💡 Hello from the future! See, this case study was written in 2017, and now in 2021, I'm currently thinking a lot about the commoditization of the UX portfolio. Things have changed quite a lot in the UX-sphere, as well as in my own personal growth in my career. 

One thing jumped out right away: this was a really linear and straightforward way of presenting the work we did. As my process evolved alongside my experience, I believe that it's more important for me to demonstrate that I can weave a story out of my experience. 

If I'm redoing this structure now, I will be leading it more from the lens of the impact we made — what gets measured gets... you know the drill — and go deeper into my insights and learnings. The baseline of what an experience/service designer should bring to the table has been upped so much, and knowing the processes and frameworks is just the starting point.

Either way — thank you for being interested in this case study! Please proceed to opening up this little time capsule made in 2017.

At a glance

This project marked a series of firsts for me, including the first official project in which I was the UX lead (coming from the interim lead position at the tail-end of the digital transformation project), and the first research process we ran in-house. 

With the nature of this ever-changing market, the business team worked towards a launch date that was roughly four months from the time they had given the brief to us and the development team. This meant that we only had less than 2 months to conceptualize, ideate, test, and refine our designs – a significant cut off our typical process.

IMPACT

• Increased monthly active users by 250%, in the scores of nearly 200,000 users and well exceeding the initial target set by the stakeholders
• Increased top up revenue by 150%, with new downloads/users driving 65% of that uplift
• Achieved 4.5/5 stars on both iOS (408 ratings) and Android (3,338 ratings), up from the previous app wrapper version's rating of 3.5/5 stars.

MY ROLE

UX lead, in a team of 5.

ACTIVITIES CONDUCTED

Discovery workshops, subject matter expert interviews, heuristic review, competitive analysis, personas creation and validation, UX and content strategy, user interviews, information architecture, user flows, wireframes, UX writing, interaction documentation, prototype, usability testing, style guide

CHALLENGES FACED

• Unfamiliarity with the target segments
• Inheriting legacy systems and frameworks
• Extremely complex product constructs
• New tools used from both design and development teams

INSIGHTS LEARNED

• Learning to lead and trust the team
• Involve stakeholders in the process, as early as possible
• Always challenge limitations and fight for the user, even when business stakeholders lean massively on the other end of the scale

The brief

How do you go about crafting an experience for users who are hesitant to adopt a digital platform? Here's the story of how I, together with my team, achieved our goal for the hi!App re-design: To make it vastly simpler for our users to manage their prepaid accounts. 

My role

I was part of a team of five designers, and we were responsible for the experience strategy, content strategy, design, and implementation of the app across both iOS and Android platforms. 

I led the UX track, which included running several pieces of research by ourselves, producing major deliverables such as user flows, wireframes, and prototypes, and presenting our work to the stakeholders to gain buy-in from other teams, as well as senior management.

THE CHALLENGES

Unfamiliarity with the target segments

The truth was as stark as it was humbling: we didn't know our users who made up most of our target segments. Sure, we had the numbers and the demographics (and even then, it was just the information of what countries they hail from), but we knew next to nothing about their daily habits, the struggles they go through with using our products, and how we could help to improve their lives.

This would prove to be a small stumbling block with our stakeholders, as they didn't feel the same way that we did, and were indeed offended when we suggested that we should get to know our users better beyond the numbers they made up in the sales volume.


We knew next to nothing about their daily habits, the struggles they go through with using our products, and how we could help to improve their lives.

Inheriting legacy

Like many web apps of the late 2000s, the mobile product of the account management portal was essentially non-existent. Users were treated to a wrapper app that was only barely functional, and that made it hard for them to perform tasks as simple as checking their balance, or topping up. This formed one of our hypotheses: that the confusing and unfriendly interface on the existing platform actually turned people away from embracing the app as a legitimate channel for their needs.

legacy

Screenshots of the old wrapper app, built circa 2009

Extremely complex product construct

With so many segments in our prepaid market, there was a need for us to offer and sell different prepaid cards. This meant that base units used were not consistent throughout all offerings; minutes, SMSes and data used were not drawn down the same way; expiry durations were vastly disparate – even the way each prepaid card was sold and marketed was different. 

prepaid_card_faces

Don't be fooled by that adorable mascot - this is just the tip of the iceberg when it comes to product offerings

New tools all around

This was also the team's first project that would be designed using Sketch (and later delivered as a prototype in Marvel). Us individual designers had been using Sketch on an unofficial basis for a while now, but creating a whole design system and figuring out the handoff was a challenge needed to be solved.

To top it off, it was also the development team's first attempt at using Apache Cordova to build an app. This decision would later impact our design aspirations, as there were several technical limitations that made it impossible to execute.

THE APPROACH

Modifying our process to deliver 2x faster

With the nature of this ever-changing market, the business team worked towards a launch date that was roughly four months from the time they had given the brief to us and the development team. This meant that we only had less than 2 months to conceptualize, ideate, test, and refine our designs – a significant cut off our typical process.


Working tirelessly to produce deliverables, we presented them to the stakeholders, and talked to our users to make sure that it was a product that would actually be useful to them.

The project team had also committed to the (psuedo) agile methodology, with sprints that span two weeks each. With that in mind, we decided to adopt that for our internal process as well, splitting UX and UI into their own separate tracks. To achieve that, we facilitated a prioritization exercise together with the project and development teams and identified the features which were to go into the drop at the end of each sprint.

Working tirelessly to produce deliverables, we presented them to the stakeholders, and talked to our users to make sure that it was a product that would actually be useful to them. In order to meet the reduced timeline, the biggest trade-off we made was exploring only one concept, versus the three concepts we would have typically delivered. This meant that we had to get it right the first time, so as not to waste both design and development efforts.

DISCOVERY

Who are we designing for, anyway?

Because we all knew so little about our users, we needed to align ourselves with the stakeholders on who we were actually building the app for. Enter proto-personas:

Understanding our users better

I was a strong proponent of running a thorough user research piece, as I felt it was first and foremost really important to know our users, and was hopeful that by doing so in a well-documented and structured manner, it would hold our designs up with more credibility with our stakeholders, who were skeptical of user research as a whole at this point.

To do so, we started off the research process by planning user interviews. The starting point of the user interviews was simple: to have a conversation with the users to help us better understand their experiences, like how they manage their accounts with tasks like checking their balances, topping up and buying add-ons.

We recruited 7 users – both Singtel and otherwise – from varying segments, from different countries (India, Philippines, China, Indonesia, Malaysia, Singapore), with a mix of foreign workers, domestic workers, blue collar and white collar individuals.

prepaid_interviews

Facilitating conversations and listening to our users

These conversations ended up being enlightening to us, and while they validated some of our hypotheses, they also rendered the rest of them as inaccurate. This activity also gave us key insights that shaped our design direction, and sharpened our focus on which problems we wanted to solve for them.

These are some of our findings:

  1. Main account balance, data left for them to use, and expiry dates are the primary values users care about.
  2. They're very conscious of their data usage, and would only use it for important communications.
  3. Their preference is to go to roadshows and distributors because they perceive that they get better deals and support there.
  4. They have deeply engrained habits, such as buying the same top-up for years, and using the SMS system to check for their account balance.
  5. They're not aware of the breadth of our offerings, but are interested in them once they're actually made aware of them.

Understanding the competitive and global landscape

We also reviewed numerous apps globally to help us better understand the prepaid market and trends and derived some common threads between them, which helped us to shape some of the basis of our hypothesis and our concept, by making sure that we are adhering to patterns that users would be familiar with. 

prepaid_telcos

Playing with plenty of prepaid apps across the world

This includes observations such as:

  1. Persistent login with a one-time password is the most common used method for authentication
  2. The primary account balance is always the most important and upfront piece of information that the user sees
  3. Trust markers are prevalent to alleviate fear and reduce the barrier for adoption of the digital channel
  4. Gamification techniques are used to engage and incentivize users

So, where are our opportunities?

Our discovery process led us to realize that opportunities exist to help accelerated digital adoption, specifically in the areas of:

Trust

Creating a more personal, helpful and trustworthy experience by emulating and improving upon the reasons why users continue to prefer physical channels

Value

Helping users to understand their usage better and to maximize their spend in order to improve perception of value and reduce churn

Incentives

Incentivize users to adopt digital channels by providing more compelling offers to do so and that is more convenient access compared to physical channels

Discovery

Aiding users to learn more about the breadth of our offerings, increasing likelihood of advocacy and positive brand perception for Singtel

THE FRAMEWORK

Our findings, synthesized

Before starting on the design concept, we knew that we had to establish a foundation that we could always refer back to. This is done by taking all of our findings from the discovery phase and parsing it down to four principles that balance both user and business needs. These principles not only align to the broader Singtel identity, but retain and reflect a more dynamic and less uptight nature of the prepaid business.

1. Reassurance

Alleviating the user’s fears of digital through increased transparency, and always being helpful and reassuring at every step of the way: Be someone our users trust.

2. Empowerment

Empowering users with the right information to help maximize their usage and make better decisions; to upsell and promote only when appropriate and relevant.

3. Simplicity

Simplicity in everything we do, from the language we use to how information is organized and presented, and thus reducing complexity and improving clarity.

4. Scalability

Designing with the future in mind: Modular and scalable with emphasis on reusability to help the business better prepare and react to changes

Making sense of flows and content

We had to spend a substantial amount of time understanding the systems used in the backend, and the existing top up/purchase flows that users were used to from other channels. This involved a lot of technical validation and discussions with the engineers, and mapping out of several journeys.

Systemizing our product construct

Next, we needed to understand and break down the most complicated part of our challenge in redesigning the app – the prepaid products and the different ways they are presented to the users.

prepaid_construct

The complexities of a construct we needed to wrangle into a system

It was apparent very quickly that we weren't able to normalize units of data, talk-time and SMSes into its own buckets, like we were able to do with the postpaid business. After many discussions with the stakeholders, we finally came up with a way to normalize and systemize the prepaid cards and top-ups in a way that would come naturally as part of the user's cognitive process.

IN-DEPTH DESIGN

Driving simplicity from the get-go

Based on our analysis of similar apps in the industry, I firmly believe that a seamless login for users who meet a certain set of parameters (i.e. being on the 4G network) would improve their experience, rather than having them login via a mechanism like using an OTP, or worse, creating an email and password.

prepaid_login

The login flow, to bring the development team up to speed

Bringing focus to what's most important

From our interviews with the users, we know for certain what they want to see when they use the app. Some rapid sketching helped me to visualize how the home screen might look like.

hiapp_sketches

Initial sketches to get us discussing about the home screen; the final design took the best parts of each concept

Sketching these concepts also helped us to eliminate the designs that were technically not possible, not usable, or ones that were not answering the brief. These concepts proved to be really useful in quickly validating and stress-testing the frameworks we'd put in place.

Consolidating data into a single place

We also know that having access to data and knowing how much there is left is such an important function to people holding smart devices these days. From our content and product analysis, we know that there are plenty of data sources that a user might get their data from, but no easy way for them to see it all at once.


We termed this a 'data bucket' for ease of selling it to the stakeholders [...] when it came to marketing the app, they decided to go with it to our users as well!

With the consolidated view of all the sources of data that the user might have, this would definitely help them in making more informed choices when it comes to topping up.

We termed this a 'data bucket' for ease of selling it to the stakeholders, and were delighted to hear that they were completely on board for it – so much so that when it came to marketing the app, they decided to go with 'data bucket' to our users as well!

Focusing the buy flow into a simplified all-in-one store

Our discovery also honed in to one point: users were confused about 'buy plan', 'top up', and 'add-on'. In reality, and even in technical terms, these were all just different words for the same thing. 

To help with both the discovery of new plans, as well as the buy flow, I simplified everything into a single entry point, regardless of the type of card or the type of payment method the user could buy with.

prepaid_buyingflow

Consolidating all existing buy journeys into one (you can expand this to look at it in detail!)

We also played a big role in convincing the stakeholders to re-look at the terminology used. Now, everything that the user can purchase is housed under the big umbrella called 'top up', making it simple for them to understand. This also addresses the problem where users weren't being exposed to all the other products we had to offer.

THE BIG REVEAL

CASE STUDY

Singtel Prepaid hi!App

Singtel Prepaid hi!App

01 Get started
09 Contextual onboarding
04 Data bucket

A seamless login awaits 

Ensuring minimal friction for the user after they've downloaded the app, they're automatically logged in after accepting the terms and conditions on app launch. A friendly contextual onboarding tool tip appears if the app flags the user as a new one, guiding them through the new, most important feature of the app: the data bucket, where they can see all the data they have.

02 Home
11 Extend validity
12 Permutations
13 Upsell

One system, multiple cards, all of the permutations.

After stress-testing the system with all the existing prepaid top-ups the company has to offer, including some future ones down in the roadmap, I was gratified to discover that it was scalable and could accomodate all that the business could throw at it. 

We also made it easier for the users to top up their favored top up, since we know that they are likely to stick with the top up they've been using for years. The option to extend the validity of the prepaid number was a highly contested and debated topic during stakeholder presentations, but I persisted in delivering the best experience for the user and ultimately managed to convince the stakeholders that this was a good decision, from both the user and the business perspective.

05 Top up
06 Categories
14 Categories with icons
15 Details

All-in-one area for top-ups 

With the top up tab, I also came up with a system that caters for the different products, whether they are a single one-off top-up card, a variant of a set of add-ons, or anywhere in the spectrum. This also extended to the details page, which was modularized as well for ease of the product team to create and update.

VALIDATION

Testing our assumptions & hypotheses

With a newly designed prototype on hand, we knew that we needed to put it in the hands of the most important voice in this project: the users'.

While we were doing our sprint planning, we'd already catered for the third sprint (out of a total of four sprints) to be a usability testing sprint to talk to our actual users. This gave us some time to address the gaps that had risen from these sessions, and to further refine our concept based on the feedback given. 

usability testing planning

Careful documentation of each screen we needed for the testing flow

As the UX lead, it was my responsibility to craft the testing script, make sure the prototype and flows worked as part of a coherent story, and onboard team members who were interested in facilitating sessions.

The main challenge with the usability testing was the fact that this was the first time the team had embarked on taking the research piece of the project in-house. It had previously always been outsourced to an agency, and while being an observer in a session was valuable in itself, being a facilitator was a far richer experience I could have expected. 


usability_testing

Screenshots of the recorded footage that I played over and over to get verbatims right. 

The second challenge was something that I had never thought of: facilitating usability testing in another language. Some of the users we talked with only had a grasp of basic English, and the team needed to communicate our tasks and asks in Mandarin. It was definitely enlightening to figure out the terms for words like "data", "app", and "top up"!

What was tested?

There were a few hypotheses we wanted to validate, all in line with our design principles that were laid out at the beginning of the project:

  1. Users will use the app to manage their prepaid service online if it provides the information they want simply and clearly, with added benefits
  2. Users will use the app if we create a more personal, helpful and trustworthy experience that emulates the physical channels’ experience
  3. Users will make purchase decisions on the app if they are allowed to explore the breadth of our services, with clear helpful descriptions in our products listing

Through the sessions with all 13 users, it was gratifying to note that almost all of them completed the flows and did what we were hoping they would do. There were still a few nitty-gritty parts that we needed to iron out, based on the way the users would interact with the prototype.

1. Users liked the new home screen, but were confused by Pay-Per-Use and IDD charges that were on display

We observed that while the home screen was mostly instantly understood and , there was certain terminology that didn't resonate with the users, and our contextual upsell for them. Our recommendation that got implemented in the next sprint was to remove the upselling to users who are using the app for the first time, before introducing these (marketed) terms gradually.

✔ "It tells me that my current number has a balance of $15 which will expire in 120 days, and it tells me my data balance. So far, okay. This is cool."

✔ “This screen better. Last time checking balance is not clear. Now it’s clearer.

✖ “IDD – is it for overseas? I’m not really sure.” 

✖ “There is two calls... Local and IDD. I don’t understand.” 

2. Users loved the smart data concept

The most nail-biting validation of this test: whether or not users understood what the data bucket was. It was gratifying to see the light dawn in their eyes as they clicked through the prototype and explained to us that it was an easy way for them to track all of their data. 

✔ “This smart data puts all the data I have before and the one I just bought into this one thing. Yes, yes. This is very good.”

✔ “Oh wow! It's all my data. There's multiple expiry date. It's all quite clear.”

✔ I love this! It's everything about my data and I can see when each one expires.

3. Convincing stakeholders to change the entire experience of activating a roaming pack

When it came to roaming, the only way to do it was to dial a * number while the user was overseas. Through the testing, we observed that the users had absolutely no idea how to do that, and were even really frustrated (one even said that they would delete the app if it made them dial a number!). With this insight, we managed to convince the development team as well as senior management that we needed a way to activate a roaming plan via the app.

LAUNCH & IMPACT

An astounding start, and so much more left to do

The app has exceeded all expectations in terms of all the metrics measured. Since launch, we have...

  • Increased monthly active users by 250%, in the scores of nearly 200,000 users and well exceeding the initial target set by the stakeholders
  • Increased top up revenue by 150%, with new downloads/users driving 65% of that uplift
  • Achieved 4.5/5 stars on both iOS (408 ratings) and Android (3,338 ratings), up from the previous app wrapper version's rating of 3.5/5 stars.

“This new design update has made top up more seamless for me. I don't have to relogin with otp every time I open the app.”

“No need [to] go out and find 7-11 for a top up.”

“This is so much better than the old version. I love this new update and it's huge improvement! Great job!”

“Easy to use and I can use any where. Some times even at midnight I can top up I don't like to go at store.”

“Huuuge improvement. This is an app. The previous version cannot be called mobile app. Glad that you put effort on it. Congrats!”

“Awesome app. All my account details and packages I can see in a glance. Absolutely time saver.”

“Convenient, as I do not need to go to offline stores or Kiosks at MRT or Singpost. I top up whenever I need.”

“Very useful app. I don't need to go down to the shop anymore. Just top up from the app anytime I need to.”

REFLECTIONS, LEARNING & INSIGHTS GAINED

Learning to lead and trust the team

This project was a series of firsts for me, and to start it off, this was the first in which I led the end-to-end design process as the UX lead. This, of course, meant that there were plenty of moments when mistakes were met, when I thought I could've done something better or differently. 

The first learning really is having to learn to let go, and trust that the designers in the team are capable of executing the work. This extended to both the deliverables, and also the user interviews and usability tests. With the deliverables, it took me a little while to trust that the visual designers would be able to translate the vision and strategy from the UX work I had done; the friction being caused by me being a hands-on visual designer myself in the past and having my own opinions about certain things. Having a growth mindset helped a lot in this aspect, as I learned that even if something didn't look exactly the way I had envisioned it to be, it could sometimes be even better.

Involve stakeholders in the process, as early as possible

We had never worked with this set of stakeholders before, which meant that they were not privy to our process. Because of that, there was a lot of skepticism at the beginning, when our methodology would be questioned, and when they wouldn't acknowledge the user interviews we did because they felt like they had a better pulse on the users. There were also many, many debates in the meeting room, which sometimes felt like a display of pride and ego from all parties involved.


At this point, we also started running more workshops - and if for nothing, it was to align expectations and to make them be more involved in the process.

The tipping point of the skepticism happened when we invited them to the usability testing sessions, when they could see for themselves actual users interacting with the prototype and succeeding in the tasks we laid out for them.

At this point, we also started running more workshops - some mini, some larger scaled - and if for nothing, it was to align expectations and to make them be more involved in the process. Ultimately, this was a painful hurdle to cross, and things became much smoother after we've succeeded to conveying the importance of the work my team was doing.

Always challenge limitations and fight for the user

There were a few key features in the app that would not have been possible if we had simply assumed that legacy systems were impossible to mould into the vision that we had set in place. If we didn't have our design principles firmly in place right from the beginning, we would have been less likely to push through some of these radical changes, and the app would have been a simple re-skin of the previous one (which is something the stakeholders would have been pleased with!)

It strengthened my resolve to always fight from the user's perspective, because if we as designers don't take on this position, who else would?