Moneybox: Product Pages

Background:

Moneybox is a leading UK fintech with nearly 2 million customers. The app allows customers to save, invest, start a pension, and set aside money for a first home.

Project

This project began with a brief to update the UI of our Product Pages as part of a holistic app-wide refresh. After a design-led discovery process, we uncovered wider business and customer objectives that helped solidify the focus of this project, and help it get selected for delivery.

What are product pages?

A view of a specific financial account you have with Moneybox, like your Cash ISA. It’s place where you can see the account’s balance, specific activity and take actions on that account.

My Role:

I was one of two Senior Product Designers working collaboratively to deliver this project, alongside a Senior Product Manger, a broad team of wider stakeholders and a number of different engineering delivery squads.

Old Screens

 

Design took the initiative to lead the early stages of this project, organising kickoff meetings, and discovery interviews with Tech Teams, Product and Design stakeholders, and Customer Support team members.

These pages were of high importance to many teams around the business, so during this process we documented all our findings, creating a slack channel of informed stakeholders, and logging all decisions within the confluence brief.

At the end of this process, our findings were actioned by rewriting the brief, and getting sign off on the broader goals below:

🧑‍💻 Business goals uncovered:

Product roadmap objectives:
Future-proofing and laying the groundwork to unlock upcoming roadmap projects. Creating consistency across pages

Engineering objectives
Alleviating tech debt, kill existing bugs, enabling scalability. Changing or building on top of the old pages would take 8-16 weeks.

Broader business objectives
Reducing volume of queries for the support team, improve customer satisfaction scores.

👩‍🦱 Customer pain points uncovered:

Payment settings should exist here
Users expect round-ups, and recurring payments on product pages

Discoverability of key features
Users struggle to find withdrawals and their statements

Improve clarity of information
Interest rates, gains, and earnings should be displayed more effectively so information is easier to understand


Early stage mapping and wireframing

Once we had gathered full project requirements, we began the process of mapping product features into matrices, and working through existing functionality. We then began to use this to build up the pages from scratch in very low fidelity, considering best practice IA, upcoming features, competitor patterns – as well as our different customer segments using different products.

✏️ Moving up to Low and Mid-fidelity

Once we had sign off on our broad approach for the architecture of the pages, we then began translating this into greyscale wireframes, giving us the opportunity to explore different layouts patterns quickly, and stress test the differing information each product page needed to provide.

👨‍👨‍👧 High fidelity iterations

The pages began to move through rapid iterations in high fi, with many rounds of stakedholder feedback – maintaining the skeletal ‘architecture’ that had been signed off, but with many of the variables within that changing. This stage was about balancing visual heirarchy, as the pages are information-dense, and trying to keep important things above the fold on smaller devices.

✍️ Final product page designs

After rounds of iterations, the designs reached a stage where they were ready for usability testing, and subsequently a phased build rollout, where they would be built with a new, modular backend architecture.

There were many changes, but some key ones were:

  • Easier to digest information, with a clearer hierarchy

  • A flexible header section, adapting to information across account types

  • Addition of account payment settings

  • Tabbing of Overview and Activity

  • A scalable system for actions

  • A UI overhaul for all card components

  • Full colour, type and component tokenisation, for both light and dark mode

✍️ Recent activity

As part of the process, we also mapped all recent activity items and updated the UI of each – covering everything from transfers, to pension requests, to interest payments – reorganising them in the process. Some were missing icons, for some copy wasn’t clear, or was missing. We added new colour coded icons for transaction types that makes them easier to differentiate at a glance.

✍️ Outcomes


This project had a breadth of outcomes, some ‘internal’ and long-term, some external and with a more tangible impact. It was a:

  • Foundational project to set up future initiatives blocked by this space

  • Engineering and product project to fix and rearchitect this area

  • Design, brand and UI project to bring these up-to-date

  • Customer focused project helping with clarity, and poor discoverability of certain features. The hypothesis is that it would have a positive impact on support teams, as well as increase customer satisfaction.

Engineering Outcomes:
Engineering can now deliver changes and additions to product pages in 1/4 the time without creating new tech debt, down to between 2-4 weeks from 8-16. UI and structural changes can also be made easily as pages have been fully tokenised.

Product roadmap Outcomes:
In the last year, the product org have launched multiple new projects and test built on top of these pages’ architecture, including business critical projects around tax year end.

Business objectives
There has been a drop in the related ‘tagged’ customer queries – around discoverability of certain features and clarity of information, and this has freed up customer support teams to focus on more important and challenging issues.

We continue to develop and improve these pages, as they fit into our wider app restructure projects for 2025.