In-house at TotallyMoney | My role: Principal UI Designer
The financial product offers tables are the lifeblood of the TotallyMoney product. They provide customers with a comparison view of credit cards and loans, so that they might find a product most appropriate for their needs. They also provide the monetisation that is essential to keep the TotallyMoney app going, funding all its helpful free featues and tools.
Overall, the experience we were offering to our customers was sub-optimal.
The old offers card layouts, with their confusing inconsistencies
This project aimed to take a 'greenfield' approach to the tables and details screens and to imagine how they might look and feel if they were being designed for the first time in 2024. I led the project with support from my colleague Federica, a product designer in the monetisation mission.
I wrote a design plan with a primary focus on the native app. Once the redesigned experience was proven on the app, it would be rolled out to the web too.
Visual design improvements often deliver intangible benefits to products. However, in this case there were some specific metrics that could be compared against the status quo. I determined that success would be measured thus:
I started the project by creating a matrix of the individual components that made up the old patterns and screens. This would help to inform the requirements for the new tables. I then spoke to stakeholders, including several members of the commercial team, to hear their ideas and aspirations for the redesign. I also looked at feedback from customers that had been garnered in the preceding period.
Next came a raft of competitor research, looking not just at direct competitors but also product/offers tables from across the industry. I reviewed the likes of Amazon, ASOS, Nike, eBay, Airbnb, Skyscanner, Hotels, Kayak, etc – and chose standout features from each. I created a Miro board filled with screenshots of these (along with all our direct competitors’ products), and invited the wider team in the Slack channel to comment on what they liked or didn't like and why.
Informed by all the feedback, sentiments and my own vision for the future of the offers, I started intensive concept exploration work.
A small selection of my initial design exploration
In total, I created 191 options for card layouts and styles during my initial round of exploration. This included new concepts for:
After sharing with key stakeholders, I chose five of the strongest options (the most scalable, flexible and visually appealing). I expanded on each of these options, showing how each layout would work for credit cards, loans, and filtering. This led to the creation of five clickable prototypes in Figma, showing a flow of screens for each route. I invited comments in Figma (positive and negative) on each of the expanded routes, and held a session where we reviewed the feedback and discussed next steps.
Five routes selected for further exploration
There was a certain amount of consensus, so I took the preferred features from the second round of exploration (with elements taken from several of the five routes) and commenced upon a third round of exploration. This round was focused on refinement – making tweaks to amplify the effectiveness of the elements that were liked by the team.
This final round of exploration led to the creation of the final designs that would provide a 'North Star' for the project. We now had a set of refined designs signifying the direction we wanted to take, guidance on implementation, and a Principle prototype showing how the proposed new filter and sort functionality would work.
Refinement of the chosen route for the credit cards table, showing guidance on implementation
New filter and sort functionality
It wasn’t a case of simply building and launching the new designs. As the business is so dependent on revenue generated from the tables, it was essential to carefully test and monitor every aspect of the updated layouts. Along with the PM working with me on the project, I split the new designs into several phased releases:
Incremental releases to move towards the North Star
The initial tests were very successful. For instance, the new TotallySure branding led to a measurable increase in offer engagement, resulting in at least a 1% boost to revenue. However, the most notable change – to the new grid layout – did not test as well as anticipated. While the results were not terrible, there was a statistically significant decrease in real revenue from the cohort of customers served the new design versus the control. As a result of this disappointing news, we studied the data in detail and came up with some hypotheses:
Along with my colleague Federica, I worked up some changes to the design. We decided to combine elements of the control with the new grid layout: we retained the APR and credit limit in boxes, moved the eligibility descriptor above the boxes, and displayed other information in rows. We decided to test this new 'hybrid' version against the same control that we had put up against the grid design.
Tweaks made to the designs post test results
The hybrid design was successfully tested over a period of a month – a considerably longer test period compared to the first test – and a decision was taken to roll it out to 100% of users. The results of the test proved to be very interesting:
The second test demonstrated the value of running an experiment over an extended period of time. When making significant changes to the UI of a product that is well-known to its users, there is a clear 'shock of the new' effect initially. It takes time for this effect to work its way through.
We are happy that the new design gives us a solid base to iterate on. We plan to test an improved grid, plus a two-click approach, in due course. The new design has already proved its worth in terms of flexibility and scalability, as it has been used to launch a new current accounts vertical at pace. At the time of writing, it is also being rolled out to the loans vertical.
The new designs (two-click version)
'TotallySure' is a signifier that we have created to show customers that they can be extra-confident when applying for certain offers. They include pre-approval, a minimum guaranteed credit limit and a guaranteed rate of interest (subject to final checks).