The Challenge

Equals Money is a fintech platform that helps businesses manage their spending through multi-currency cards. As we expanded to offer white-label services—letting companies rebrand our app with their logos and colours—it became clear we needed to evolve our user experience. One of the main pain points users mentioned was our filtering and views system. The default filtering options were confusing and cumbersome, and generating reports was a tedious trial-and-error process because filters didn’t update in real-time. Additionally, filters were hidden behind an icon that looked like a settings menu, causing further confusion. Important features, like filtering by specific cards or excluding unnecessary data, were missing. For finance teams, this made tracking and annotating transactions especially challenging. With the growth of our white-label service, we needed a simple, scalable filtering solution that could easily adapt to different branding requirements.

Discovery & Research

We started by getting a deeper understanding of our users' challenges, combining qualitative and quantitative methods. We conducted in-depth user interviews with ten finance managers and operational team members, who consistently pointed out frustrations around setting, editing, and reusing filters. Additionally, we analysed hundreds of heatmaps and session recordings, clearly revealing repetitive clicking patterns and hesitation, indicating users’ confusion around filtering interactions. Our customer support team validated these findings by reporting filter-related issues as some of the most frequent user complaints.

[Affinity map]

Three main themes emerged strongly: filters were difficult to discover, interactions were cumbersome and unintuitive, and users were unable to save their customised filter settings. Mobile users faced even greater difficulty due to limited screen space, which made interactions more frustrating and error-prone. One finance manager summarised it clearly: "We just want to set a few filters, save the view, and come back to it later without rebuilding it each time."

Defining the Problem

From these insights, we created a focused problem statement: Our users, especially finance teams, were wasting valuable time navigating a hidden, confusing filtering system that didn't provide immediate feedback or allow customisation through saved views. This inefficiency significantly disrupted their workflow and undermined the effectiveness and value of Equals Money. To address this comprehensively, we mapped the user journey end-to-end—from initial login to generating final reports—to pinpoint exactly where filtering issues caused the most friction.

[User journey map here]

Design Goals

With our research clearly outlining the issues, we set precise, user-centred goals for the redesign: We aimed to make filters prominently visible and intuitive to use, provide instant feedback so users could clearly see the impact of their selections, and enable users to save and quickly reuse customised filter settings. Achieving these goals was essential for the flexibility and scalability required by our expanding white-label client base.

Exploration and Iteration

I began by exploring a variety of potential solutions through sketches and initial wireframes, testing concepts like inline filters and a basic view selector. Early tests immediately highlighted usability challenges: users found it unclear how to edit or remove applied filters, the view selector felt disconnected from the filtered data, and the mobile experience quickly became cramped and confusing.

[Wireframes]

Feedback from internal stakeholders and early user testing drove rapid iterations. One particularly insightful round of feedback from mobile users led to introducing a collapsible filtering panel that dramatically improved usability on smaller screens. This iterative process, with constant user input, was crucial in refining the design.

Redesigning the Design System

To support our new filtering design and future scaling, I led an overhaul of our design system. Originally bloated with more than 1,500 components, I streamlined it down to approximately 780 carefully organised components within a single Figma file, significantly simplifying maintenance and consistency across our products. Additionally, I introduced dedicated component variants specifically tailored for filters, views, and dropdowns. Reducing reliance on extensive colour palettes improved overall accessibility and simplified the white-label customisation process for different client brands.

[Before and after images of the design system]

Final Solution

The final design significantly improved the overall user experience: We introduced a highly visible, persistent filter bar at the top of key pages, making filters immediately accessible. Real-time filtering eliminated previous guesswork, allowing users to instantly see changes. Users could now save custom views seamlessly through an intuitive, tabbed interface, significantly streamlining their workflows. On mobile devices, the introduction of a collapsible filter panel preserved valuable screen real estate and simplified interactions.

[Annotate images and add prototype]

Collaboration with Engineering

Close collaboration with our engineering team was critical throughout this project. Weekly design-engineering check-ins ensured we stayed aligned and proactive about potential challenges. I provided detailed, interactive prototypes in Figma along with clear specifications, enabling smoother implementation. Engineers provided valuable feedback that directly influenced certain design decisions, especially around mobile performance optimisation and ensuring responsiveness across devices. This integrated collaboration significantly reduced implementation friction and accelerated our launch timeline.

Client Feedback

After launch, the feedback was overwhelmingly positive: "This filtering update will save us so much time. Being able to quickly switch views and easily apply filters is a real game-changer for our workflow."

Key Takeaways

This project reinforced the importance of thoroughly understanding user needs before diving into design solutions. Starting with deep research helped us avoid costly mistakes and directed our iterative design process effectively. Designing with scalability in mind ensured our solutions remained adaptable for the future, and maintaining tight collaboration between design and engineering was fundamental to delivering a robust, successful outcome.

Final Thoughts

The redesigned filtering and views system at Equals Money transformed the way users interact with the platform. It simplified the navigation, reduced complexity, and made filtering more accessible and efficient. With a more scalable design system in place, we are well-positioned to support the growing demand for our white-label services, ensuring that the platform remains adaptable and user-friendly in the future.