Project summary

(NOTE: If in a hurry, read here and the Outcomes section below)

Problem statement

💷 Millions of people struggle with navigating the intricacies of personal finances. Traditional avenues for financial guidance, such as in-person broker consultations, are often inaccessible due to cost, and people feel intimidated speaking about a topic they don’t fully grasp. This knowledge gap can lead to missed opportunities, poor financial choices, and increased stress. MoneyMingle aims to bridge this gap by providing a convenient, affordable, and personalised platform for individuals to access expert financial advice and information, regardless of their financial background.

Users and audience

MoneyMingle caters to a diverse user base with varying financial needs and knowledge levels. The primary target audience includes:

• Young adults: Navigating financial independence for the first time, seeking guidance on student loans, budgeting, and responsible credit usage.
• Entrepreneurs & freelancers: Starting or already managing a business, needing assistance with insurance, business planning, and accounting.
• Mid-career professionals: Planning for mortgages, investments, and long-term financial goals, needing advice on asset allocation and retirement planning.
• Families: Managing household finances, saving for children's education, and seeking guidance on insurance and estate planning.
• Low-income individuals: Lacking access to traditional financial services, requiring assistance with budgeting, debt management, and financial literacy.

Roles and responsibilities

As the sole UX designer for MoneyMingle, I was responsible for:

• Conducting competitive and user research to understand user needs, pain points, and expectations and the existing solutions already on the market.
• Developing user personas and user flows to identify key interaction points and design opportunities.
• Creating wireframes and prototypes to iterate on the app's interface and user experience.
• Collaborating remotely with mentor and fellow design students to ensure a seamless and intuitive user journey.
• Conducting usability testing to identify and address usability issues.
• Refining the design based on user feedback and data insights.

Scope and constrains

The project scope focused on the core functionality of the MoneyMingle app, including user registration and onboarding, specialist search, appointment booking, and searching and sharing information with communities.
Additional features, such as financial management tools and chat between community members, were considered for future iterations. Time and resource constraints required prioritising essential features for the initial launch.

Solution

This is the the bulk of the project. All the steps taken are described here while trying to keep the text engaging.

Analysing what’s out there

To find if MoneyMingle had a place within the crowded fintech market, the first step was to analyse the current landscape of financial apps. There were two main direct competitors identified: Unbiased and VouchedFor.

In addition, other apps offering financial advice have been identified and can be grouped into various categories:

• Trading apps offering AI or human (or both) advice to help people save money and invest.
• Individual wealth management firms offering their staff’s expertise to help achieve any financial goal.
• Apps to help be on top of personal finances and set goals towards saving.
• Online platforms offering expert financial advice but only through employers who, in turn, provide this service as a benefit.

Unbiased and VouchedFor were thoroughly analysed to understand what they were already doing well and what could be improved. A firm from the Trading category, Rosecut, was also examined to find other best practices and opportunities.

👉 It was surprising to discover that while these apps have been around for a long time, they lacked some basic features, like solid tools and resources to help users before or after speaking to professionals, communities where users could exchange information, and basic checks to avoid incomplete expert profiles.

Getting to know the users

Exploratory user research was the next step taken to understand the main issues and pain points individuals faced when dealing with their personal and business finances.

This process involved conducting surveys and in-depth interviews with individuals from diverse backgrounds and financial situations to understand their financial knowledge, goals, and challenges.

Research goals

• How do individuals go about finding financial information?
• What is their attitude towards seeking help from financial advisers and other specialists?
• What tools do they use to manage their business, accounts, etc.?
• Do they use any apps to find financial experts? If so, which?
• Do they follow any particular financial expert or influencer on the media or online?
• How do users feel about paying to find financial expertise?

Surveys

The first research tool I used to study potential users of the app was an online survey.
The results from the survey provided a thorough understanding of their pain points when seeking financial advice and where competitors are not meeting users’ needs.
This served as a guide for creating a more effective plan for user interviews.

Interviews

After getting a high-level picture of the challenges people experience with understanding and getting help with varied financial topics, one-to-one interviews were conducted to understand the types of personal projects users need help with and their hopes and fears when faced with financial products.

The study also attempted to uncover their financial background and literacy level to evaluate what learning materials could be included on the platform. This research identified key user personas, uncovered common pain points, and validated the app's core concept and feature set.

👉 The most exciting aspect of the research was the awkwardness and mistrust users have in financial experts and the lengths they would go to avoid them, even when they confess this results in bad choices and even more uncertainty about their future. There is also a point to be made on how few people receive education in personal finances, even those with professional financial backgrounds.

Understanding user segments

Personas

Two user personas have been carefully crafted, aligning with the insights gathered and the product requirements. The research indicated a significant demand among young to middle-aged professionals like Melissa, seeking accessible and user-friendly tools to manage their finances effectively.

The survey and interviews also highlighted the growing population of freelancers like Chris, who need reliable financial tools and resources to manage their businesses successfully.

By incorporating both personas, MoneyMingle will address their specific financial needs and challenges.

User Journey Mapping

The user journey maps and flows depicted below were crafted based on the goals defined for both personas, Melissa and Christopher.

These goals align with their backgrounds of being a professional looking at climbing the property ladder and a freelancer who recently started his sole trading business.

User Flows

The app’s main features were first drafted based on how they could assist target users while making such features usable and desirable at the same time.

Three user stories and flows for both personas were drafted and reviewed with stakeholders until refined and approved.

1. Completing the onboarding financial questionnaire
2. Searching for a financial adviser & booking an appointment
3. Searching & sharing financial articles

Creating a navigation blueprint

With the first iteration of the app’s main features outlined, the next step was defining how the navigation should work to house all tools coherently and intuitively.

Sitemap design and validation

A sitemap including navigation menus for the chosen user flows was created. To validate it, a closed cart sorting exercise was conducted. The categories had already been defined based on user and competitive research. Still, these categories needed to be intuitive for users to recognise parent categories and their features quickly.

Most participants could quickly position the cards within the intended categories, corroborating that the category labels were assigned in a way users found intuitive.

As seen below, the only exception is the ‘My financial profile’ feature, which participants have assigned almost equally to the ‘Personal financial questionnaire’ and ‘My profile and settings’ categories. Additionally, the ‘Knowledge Centre & Tools’ and ‘Community’ categories were reviewed as they confused some users.

👉 Most participants could quickly position the cards within the intended categories, corroborating that the category labels were assigned in a way users found intuitive.As seen below, the only exception is the ‘My financial profile’ feature, which participants have assigned almost equally to the ‘Personal financial questionnaire’ and ‘My profile and settings’ categories.Additionally, the ‘Knowledge Centre & Tools’ and ‘Community’ categories were reviewed as they confused some users.

Developing the prototypes

Fast ideation process

Once the sitemap was finalised, low-fidelity wireframes were sketched to outline the web app’s overall structure while including the features described in the user flows that were defined for both personas.

The resulting prototypes were drawn for small (i.e. mobile) and bigger (i.e. desktop) screens to try different layouts and see what worked best for MoneyMingle’s users.

Making it digital

After working with low-fidelity wireframes to rapidly try ideas, mid-fidelity wireframes and prototypes were developed.

These helped to flesh out the most successful ideas from the previous step even further by digitising them and iterating how the main blocks of elements would look when placed together, and some basic copy was added.

These prototypes were used in the usability tests run with potential app users.

Testing the initial design

Usability test

The goal of the usability test was to ensure that the app was easy to use, efficient, and satisfying for users.

Attention was placed on how quickly and easily users could complete the three tasks described earlier, like answering the onboarding profile questionnaire, searching and booking an appointment with a financial adviser and searching and sharing financial articles with other users.

Affinity maps and Excel spreadsheets were used to analyse user feedback and obtain insights to improve the app.

👉 It was a pleasant surprise to discover that participants were able to complete the different tasks pretty intuitively and that their feedback reflected the app being made of recognisable design patterns, which in turn made it easy to move around the screens. Nevertheless, there was actionable feedback on aspects of the tools that were unclear or caused people to pause and try different options or attempt to go back and start over. The main points related to getting visual cues when selecting an item, spacing elements to avoid selecting the wrong element/option, and enlarging the cards for the articles to make them legible.

Additionally, noticing participants having issues with the interaction points, even if they wouldn’t bring it up directly, made it clear that these issues needed to be modified.

Moreover, as some of the identified issues were reasonably easy to correct, these were updated after a few testing sessions. There was a particular interest in how the results of the remainder of the participants were affected. Remarkably, the stats for participants 4 to 6 were significantly improved based on these corrections.

👉 The biggest takeaway from this session was the importance of putting the app to the test early on to ensure the drafted flows and information architecture are on the right track.

Testing the sign-up process

A preference test was conducted to assess the sign-up and login process. As this is such a well-researched flow, a quick test with a broader audience seemed appropriate.

In the example below, participants were asked to choose their preferred design for MoneyMingle’s web app intro page for mobile-size screens.

👉 Since the test results showed a clear preference for the first design option, the decision was to keep it as is and turn it into a high-fidelity design. After this, a new preference test would be rerun to test different colour palettes and illustration combinations.

Developing a UI design system

To keep the UI consistent across the dozens of screen iterations and sizes, a style guide and pattern library were developed to guide current or future designers and developers working on the project. This design system was discussed with stakeholders and reviewed several times before being finalised.

The main components of the design system applied to MoneMingle’s final UI design are displayed below for reference.

Refining the design

Once feedback had been gathered from different stakeholders, users and experts, and the design system was in place, high-fidelity interactive prototypes of the three main mentioned flows were created to check how the app flowed when in use and add any missing screens and content.

Design collaboration

Collaborated closely with the course tutor, mentor and fellow design students to address technical feasibility and incorporate feedback into the final design. These are some of the improvements done to the different user flows based on peer designers’ comments and suggestions.

Accessibility audit

MoneyMingle’s UI design had already incorporated many of the best practices recommended by the WCAG around accessibility from its conception.Some of these were related to contrast, font sizes, aiding keyboard navigation and link purposes.To improve accessibility even more, some components were refined further to ensure they were either AA or AAA-compliant. This would create an app that caters to the broadest audience possible.

As accessibility is much more than what can be communicated through static UI design or basic prototypes, below are further features and options to be discussed with developers and other stakeholders:

• Adding descriptions to images.
• Allowing to resize text.
• Allowing to zoom in on different parts of the screen.
• Adding closed captions to videos and video call features.
• Provide audio options for articles and other text-based materials.
• Using semantic HTML tags to aid keyboard navigation and screen reader users.

Final design

After all the many iterations of the original flows based on research, testing and peer and stakeholder feedback, here is the final design for MoneyMingle. Enjoy!

Takeaways

While the MoneyMingle app has not been turned into an actual product, the design process yielded valuable insights and lessons learned that will inform how I work on future projects:

• The importance of user-centred design: Iteratively gathering user feedback and incorporating it into the design is crucial for creating a product that genuinely meets user needs and expectations.
• The need for a seamless user experience: Users expect a smooth and intuitive interface that guides them effortlessly through their financial journey.
• The value of accessibility: The app must be accessible to users of all backgrounds and abilities, including those with visual impairments or limited technical knowledge.
• The challenge of balancing features and simplicity: Prioritising essential features while maintaining a user-friendly interface is vital to avoid overwhelming users with complexity.

Future steps

• Gather additional user feedback: Conduct more extensive user testing with a broader range of participants to refine the design and identify any potential usability issues.
• Partner with financial institutions: Collaborate with banks, credit unions, and other financial institutions to create a network of vetted financial specialists within the app.
• Develop a marketing strategy: Create a comprehensive marketing plan to reach target audiences and raise awareness of the app's benefits.
• Explore monetisation options: Consider various strategies, such as subscription fees or partnerships with financial services providers, to ensure the app's long-term sustainability.
• Implement security measures: Ensure the protection of user financial data through robust security measures and compliance with industry regulations.

I'm eager to continue developing MoneyMingle and bring its vision of accessible financial guidance to life. The insights gained from this design process provide a solid foundation for other real-life apps and websites I’m already helping develop and improve.