Experian: Money Hub
.png)
Project Overview
Money Hub is a comprehensive financial management platform developed by Experian to help young professionals, aged 27-35, better manage their finances. Similar to tools like Truebill, Mint, and Monarch, Money Hub enables users to track income, expenses, budgets, and subscriptions across multiple financial accounts. What sets Money Hub apart is its focus on a younger demographic and its unique integration with Experian's financial tools, including bill negotiation and subscription management.
As the Lead Designer and Design Systems Expert, I spearheaded the creation of Money Hub’s interface using Experian’s extensive design system. The project was driven by a need for a scalable, modular design that could adapt to the evolving needs of its users, built on the principles of Atomic Design Methodology.
User-Centric Insights
To design a financial management platform like Money Hub that truly resonates with its audience, it is crucial to understand the unique needs, goals, and pain points of potential users. Developing comprehensive user personas helps us empathize with these users and create tailored features that address their specific challenges. These personas act as representative archetypes of our key user segments, guiding design decisions, feature prioritization, and ensuring a user-centric product development process.
The Money Hub personas focus on young professionals and entrepreneurs who are tech-savvy, motivated, and eager to optimize their financial health. These users seek a platform that simplifies financial management, provides clear data visualizations, and integrates with multiple accounts for a holistic view of their finances. By exploring their behaviors, motivations, and preferences, we aim to deliver an experience that is intuitive, empowering, and enables confident financial decision-making.
%201%20(1).png)
%201%20(2).png)
Spending Insights
Core Feature
The Spending Insights feature was a focal point of Money Hub, offering users a detailed view of their spending patterns, cash flow, and financial forecasts. This area was designed using Experian’s design system, which allowed us to create a cohesive and visually appealing interface. Components were broken down into atoms, molecules, and organisms, allowing for a modular approach that facilitated easy updates and ensured consistency across the platform.
Designing Effective Spending Insights
Before diving into pixel perfect designs, we explored various ways to effectively surface Spending Insights to users. The focus was on determining what key information should be available at a glance—such as remaining budget or recent spending trends—while also allowing users to dive deeper into detailed insights if desired. We achieved this balance through extensive wireframing and low-fidelity prototyping, iterating on different layouts and data visualizations to ensure a clear and intuitive user experience that catered to varying financial needs.
.png)
.png)
Applying Experian’s Design System
Experian’s design system provided a comprehensive set of guidelines and components that were used to build a seamless, user-centric experience. I led the effort to define and implement these components in the Money Hub platform, ensuring that each design element aligned with Experian’s brand while also providing the flexibility needed for a financial tool aimed at a younger demographic. This involved:
1) Developing and refining UI components to align with the overall aesthetic and usability standards set by Experian.
2) Ensuring accessibility and responsiveness, making the platform equally effective on both desktop and mobile devices.
3) Building a flexible design system that could accommodate rapid changes and new features, like the Spending Insights Dashboard.
.png)
Atomic Design in Practice
To achieve a highly flexible and maintainable design system, we applied the Atomic Design Methodology, which breaks down user interfaces into five distinct stages:
Atoms - Fundamental UI elements like buttons, icons, and form inputs.
Molecules - Groups of atoms that form simple components, such as transaction cards or subscription summaries.
Organisms - More complex components built from molecules and atoms, like the Spending Insights Dashboard.
Templates - Structured layouts that define the arrangement of components on various screens.
Pages -Fully realized designs that bring all components together with real data and content.
%20(1).png)
%20(1).png)
.png)
%20(1).png)
.png)
%20(1).png)
