Three App: Allowance
Overview
Mobile phone contracts come with a plan. That plan allows customers to use a specific amount of data, calls and texts. Users can increase this allowance in a variety of ways.
It was part of my role to evaluate these different options and ensure they were presented to the user in a way that was easy to understand.
I created a new structure that allowed for six new products to be successfully launched and conversion doubled.
2x
Doubled conversion of KPI
Identifying pain points
Before the new products were introduced, we conducted a deep dive into existing Add-ons. The journey was reviewed and pain points were identified.
The plan tab
The plan tab was the first page in the journey to get more allowance. I felt that this page was difficult to understand.
I developed a new layout that increased the users ability to pick out important information. I changed the structure so that users options were bought to the top level and I introduced a dynamic layout to make sure that information was clear for users in a variety of different situations.
We ran a click test on the new design and gave users a selection of tasks to monitor how they would interact with he new design. We found that 100% of users could find what they were looking for on a first try.
The journey
I first mapped out a user flow to account for all the different products. I designs not just for happy paths but also error states and alternative journeys.
Terminology and list view
We identified a high number of complaints from users who were frustrated that they were charged every month for an Add-on that they only once.
Evidence suggested that the terminology around 'recurring' and 'non-recurring' Add-ons was confusing.
I changed the terminology of 'recurring' to 'monthly' and 'non-recurring' to 'one-off'.
I also updated the design to a cleaner layout. I removed margins and outlines and added a chevron to indicate that tapping a module would take the user to another page.
I also added a new piece of functionality, which was a tag to highlight various Add-ons.
Full details view
I improved the wording on the page and removed the purple border. I added some visual hierarchy to the page, making the name of the Add-on larger to draw the eye and create some visual appeal.
I then introduced a new module into the whole app which contained two columns to create a scannable page. I used this module to make the expiry date very clear.
The font size was increased and a new module was adding in an info box, which clearly identified the behaviour of the Add-on, as it was different for each product.
I also made the CTA sticky, so that the buy button was in a consistent place and easily accessible on long scrollable pages.
Confirmation banner
Another common issue reported to the call centre and live chat agents was from users who bought an Add-on without wanting to.
The reason for this complaint is that the CTA moved on the page and if you happened to tap that area when scrolling, you would immediately purchase the Add-ons by accident.
My suggestion was to make a sticky CTA as previously mentioned, and to add a confirmation banner to make sure the user knew they were about to make a purchase, and also to ensure they understood that their chosen Add-on was either a monthly product or a one-off.
Testing
We tested the new Plan Tab design in a group of 22 participants aged 18-65 years. We ran a click test and asked users to perform a number of tasks.
82%
of users found the right modules during testing
Task 1
"You have been buying data add-ons for a few months because you keep running out of data. With that in mind, you decide to upgrade your plan. Where would you click on this page to look at new plans?"
82% of participants clicked the correct button on a first attempt.
Task 2
-
How easy or difficult was it to guess where the right click might be?
-
How clear or confusing was the layout?
64% or participants found it Very Easy to find the right button. Over 50% of participants found the new layout Clear.
Whilst we were happy that users found the right place to tap, we created a ticket to look into redesigning the last two modules on the page, as we believed these unrelated modules contributed to users finding the layout cluttered.