TotallyMoney monetised products UI

TotallyMoney monetised products

Refreshing the UI of TotallyMoney's credit card and loan offers

In-house at TotallyMoney  |  My role: Lead UI Designer

This article is a preview – it will be expanded in due course.

The 'matched offers' section of the TotallyMoney app is essential to the company's growth – it's our primary source of income. Using a sophisticated algorythm, the app matches credit card and loan offers to each customer's individual circumstances. Customers are only shown offers that they have a good chance of being accepted for; if none are found, they are offered credit-building products instead.

The main offers screen presents shortcuts to products that the customer might be interested in. I gave this a minor UI update as part of the future vision project as you can see below. The layout and logic of the page had to remain as previously.

Offers screen makeover

I have also given the matched offers results tables (where credit card and loan offers are displayed) a light-touch makeover, in three stages.


Stage 1: eligibility graphic

The eligibility graphic shows the customer's likelihood to be accepted for a specific credit card or loan. When I joined this was represented by a very simple box containing text. I conducted some research and subsequent exploration around how the elgibility graphic could be reimagined. The requirements were that it had to fit in the existing space allocated to the eligibility scores and retain the same traffic light colour scale:

Exploration around the eligibility graphic

After testing it was decided to proceed with a simple bar pattern that would animate as it entered the customer's viewport.


Stage 2: web app results table

The next part of the project was to refresh the UI of the results table cards. I was asked to concentrate on the web app first, and just to update the styling within the constraints of the existing layout. I also took the opportunity to update the design of the filter tabs. Below are before and after screens showing this light makeover on desktop:

BEFORE the web app makeover AFTER the web app makeover

Stage 3: adding to the native app

Until 2022, the results tables in the native app were provided by simply opening a web overlay. It became a priority in late 2021 to build native versions of these tables so that we could potentially surface results cards throughput the app and vastly improve their discoverability. I worked alongside my colleague Lorraine (a product designer), with her concentrating on loans tables while I looked at credit cards.

Our aim was to reduce the size of the table elements and make it easier to compare the features of the different products.

The new table for the native app

For all my time at TotallyMoney, I've tried to rationalise and unify our UI patterns and implement an improved design language. In a small way, this project is an example of that aim. The Head of Design has been hugely supportive of my plans and has helped to generate buy-in and traction across the business.


Next project: Design system