banner-bg-4.png

Three App: Billing

Overview

As part of my role, I created a design library to ensure clean and consistent designs.

 

When it came to applying this new design system to the bills tab, I took the opportunity to analyse the layout of the page and flows and improve it where possible. 

We tested the new designs with a group of 50 users, and the new design design came out on top.

3x

User found the new
design 3 times clearer

Billls-mockup.jpg

Identifying pain points and proposing solutions

The first step was the map out the flow of the existing bills journey and look for possible pain points in the design.

Bills-Flow-Current.jpg

Lack of visual hierarchy

Problem

The first thing I notice is that all the copy is the same size. There is no hierarchy to draw the users eye anywhere on the page. The important information is treated in the same way as the less important information. 

Solution

The new design highlights the important information in a scannable column, in bold on the right hand side. It uses smaller font for less important information and the modules have been moved around into a logical order

01-Billing.jpg

Poor Calls to Action

Problem

There are three buttons on the page and all three have different behaviours. The most important button is below a less important one.

Solution

In the new design, all but one button are removed. Different ways of showing the same information mean that the only button in the new design is the 'Pay bill' button. The most important action on the page.

01-Billing.jpg

Use of icons

Problem

Some icons, opened pop-ups, some took the user to another page, and some did nothing at all. 

Solution

In the new design, the only icon that remains is a chevron, indicating that the user will go to a new page. Everything else has been handles in different ways.

02-Billing.jpg

Functionality of buttons

Problem

One​ buttons opens a popup with menu items. Not a bad pattern on its own, but the only place this behaviour happens, so is unexpected.

 

Solution

The suggested layout removed the button and opens up all the billing options at the top level. Important options are no longer hidden. 

01-Billing.jpg

Support for the user

Problem

There is nowhere on the page to assist users who are having problems with their bills. 

Solution

I added a quick link to live chat directly from the page, so users had quick access when they needed it.

02-Billing.jpg

Final designs

Testing

We tested the new design with a 5 second test and a click test. 

5 second test

Method:

A 5 second test using Usability Hub. We recruited 30 participants split into two groups.

 

One group saw the original design and another group saw the proposed design.

 

We asked user to vote if the design was clear of cluttered.

Goal:

To measure first impressions of the design.

Results:

The new design clearly beat the original design on first impressions.

BEFORE

24%

of users found the design clear

59%

of users found the design cluttered

AFTER

69%

of users found the design clear

19%

of users found the design cluttered

Click test

Method:

A click test using User Zoom. We recruited 50 participants from and gave them all the same tasks.

 

We showed participants the new design and asked them four questions about where they would go to achieve various tasks. 

Goal:

To observe and time user behaviour.

Results:

In all four tasks, users successfully navigated to the right place.

Outcome

Following successful user testing we were confident with the new designs and launched them in November 2020.

3x

User found the new
design 3 times clearer

86%

of users could find
what they needed

Home     //     Projects     //     Three App     //     Billing