The Journey of Redesigning a Telco App

Disclaimer: This article is a repost of my first digital transformation project, when I’m still under IBM Indonesia Employment. The article was published back in March 2019 and since then the client and our work have gone through multiple iterations.

Introduction

In my early times joining IBM as part of IXD (Interaction Design) team, I got the opportunity to work with one of the biggest telecommunication company in Indonesia. The project outcome is a Digital Transformation, the output will be an app combining their products, combining Postpaid and Prepaid into one app. I will explain the redesigning journey from these 3 key points.

• The Problem

• The Design Process

• The Visual Interface

Telco Team and IBM Team are doing one of the Sprint Ceremony - Daily Stand up.

Background

As a part of the mobile squad, my main focus is to deliver the experience from the mobile perspective. There were 2 Mobile squads. Each squad consisted of 1 Scrum Master, 2 BA, 1 Back End, 1 Front End, 1 (or 2) UI/UX 2 and 2 tester. One of the tasks at hand was to improve the user flow from selecting the product (Store) until User confirm (Check out).

There’re several approaches that we take to find insight. First, we need to compare the journey of the user within other Telco app in the market. After comparing it other competitors, we also take a look in top e-commerce where the user could also buy packages or balance. We also find the conversion rate from the user generate more income from top e-commerce app (Tokopedia, Bukalapak & Shopee) compare to the Telco app itself. With the data collected from the client in the Envisioning phase and the BA working within the mobile team, I was able to gather faster data to be analysed.

The Previous App screen preview from Telco app. The screen show product flow on Choosing your Xtra Combo Package.

The Problem

Here’s the hypothesis:

1. The information appears cluttered and redundant. As a result, a user can’t quickly find the important information that they need to see when considering buying a product which is Kuota and Price.

2. It’s hard to compare the benefit of each package. Because there aren’t many packages can be displayed at a time, which relate to the next point

3. The design to display package information in the product list is inefficient for the screen size.

4. Package images might not be a part of user consideration when buying the product(s) unless it informs the user about larger information (an i.e type of the package or amount of balance user are going to buy).

5. There should be a better experience for the recurring user from the new one since they’ll have a different goal when they open the app. They already know which package to buy (unless it’s changed).

Table of all Prepaid product list and their benefits.

The Design Process

This is the part where it gets interesting. The journey of finding the solutions. For me, part of the challenge is to be able to maps all 300++ different products the client have, clean up the clutter and narrowed it down so we could build a prototype that essentially works without cluttering the screen with too much information. We decided to first prioritize based on the product who has the most user; The Prepaid User (New and Recurring) who need to buy a package/quota every month for themselves.

By doing this, we were able to map out these products better and conclude two things.

• We can redefine lists of packages properties that go into the package details based on priority (i.e price, tax, active period, calls, partnership, etc)

• We discovered that some package benefit has a time band (fixed usable period) so we need to make sure that our template supports this as well.

When buying a package repaid user behaviour is driven by 2 things. A fix budget for their monthly internet quota and a fixed period of time when they need to repurchase. So we need to focus the flow in which the user could easily buy and find the desired product, in a short period of time.

a. The Wireflow

Wireflow of product to visualize Storefront to Transaction Confirmation

Based on that insight, we started to build a flow. We want the user to find the product that they need faster and we want to help to provide them to the product that we think suites for their monthly need. In short, we want to make the purchasing experience went smoother and as effective as possible.

for every progress that the squad have, we need to reconfirm to the client in a Design Review which attended by Design Lead and Product Owner to ensure that everything is aligned. This progress will be presented or developed as a demo in the Sprint Review by the end of each sprint. After the wireflow received a green light, we start to develop a prototype and prepare to do a User Testing.

Product flow based on the latest tested wireframe.

b. Wireframe

We build several wireframes and have it tested with the user that is matched with our persona. At first, we will present the wireframe to see whether the user could quickly find the product that the test assign to them. After some paper test, we developed a clickable prototype to see how will the user interact with the whole flow provided. This is our key finding from storefront epic, Browse to Buy flow.

The key elements for improving the experience are:

• The best offer banner/promo would be personalized differently for each user based on their needs in the last 3 month.

• The product category needs to show the range of price from the lowest to highest so a new user could find a product that matches their budget quicker.

• Inside The Product Category, there will be a card that acts as a quick link for a previous buy of their package.

• The cards will also have an indicator to mark if it on promo so the user could spot them easier.

• Price will be placed on top of the product detail and Buy button will stick below the screen so the user has more control and clear call to actions.

• Product Detail and T&C will be added inside Product details as a drop down.

Halfway through the project, there are some adjustments made in how the structure of the team will be working and collaborate. The objective itself is to speed up the process of completing the UI component and building it based on the approved wireframe.

Printing the image of early propose Interface while we build a strong brand Identity.

The Visual Interface

I was assigned to work not on the epic and story that I was worked on (Storefront) but rather on other epics. The Orange dots indicated which epics I have worked on. The Purple dots indicated the Visual Interface I help to create. The number next to the document was based on the prioritization.

The latest preview of Storefront screen preview.

General Improvement

I was working closely with the BA and UI team to make sure that their interface represents the experience that we want to build. But as you can see, there’re some changes made that might be affected based on client decisions. Some of them have happened because of the BOD decision, some might happen because there is pressure in the timeline to launch the app in time.

Here are the key improvements after the visual interface was implemented.

• Product Category has both visual image and colours to make user differentiate easier between products, and also for them to navigate easier through the app.

• Inside Product Category pages, the user will see two cards that shows the lowest price and highest price based on user monthly habit. However, if the user is a recurring user, they could always find what they previously bought on top of the screen.

• The product detail will emphasise price and quota so when the user scans the screen, they will quickly understand what they’re buying and what did they get.

Reflections

Looking back at this project, I found my value as an Interaction Designer and how it’s making a lot of difference.

• I learned that as a designer I need to fight tirelessly and I need to always stand on my ground and earned the spot at the table. By doing this, I make sure that the user has a representation internally.

• I also learn that even though most people aware of how important empathy is, in reality, we need to be reminded over and over again.

• I learn that agile in practice is much much harder. Because there were times where we’re so focused on documenting what we have, we couldn’t afford to test the working prototype before we hand-over to the client.

• We as a team also get bias since we’ve worked on this project for quite a long time, we forget to take a step back and analyze again what was the real pain point of our persona. This could really help us to decide what we actually need to focus on.