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
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.
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
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.
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.
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.
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.
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.
