UX Case Study

Moneyo

Reimagining Banking

This case study explores creating a responsive, user-friendly interface that balances clarity, playfulness and trustworthiness for a challenger brand.

Project Outline

Background

Moneyo is a fictitious banking platform designed for my UI design certification course with the UX Design Institute. This project is aimed to demonstrate my ability to apply UI design principles in creating a responsive banking website that is both user-friendly and visually appealing.

Role

UI Designer (Independent) - As the sole designer for this project, my role was to research, conceptualise and design a cohesive, user-friendly interface.

Timeframe

January 2021 - March 2022

Tools

Figma

Introduction

As part of my UI design course, I was tasked with designing the user interface for Moneyo, a fictitious challenger bank. The goal was to create and intuitive and visually appealing banking platform that stands out from the traditional banking institutions. This project involved designing responsive interfaces for desktop, mobile and tablet devices, ensuring an optimal user experience across all platforms. This case study documents my process, challenges and reflections.

Brand Values

The client's established brand principles guided the design process:

Clear 💎

Present information in a logical, uncluttered manner, prioritising clarity and ease of understanding.

Playful🪀

Infuse personality into the design through colour and shape, ensuring a joyful user experience without compromising intuitiveness.

Trustworthy 🔒

Build user trust by balancing playful elements with a reliable and professional aesthetics.

Objectives

Design a fresh interface that works across desktop, mobile and tablet devices.
Focus on the following screens:
- Accounts Overview Screen: The user's banking home screen, showing an overview of accounts (e.g. current, savings, joint) and navigational elements.
- Current Account Screen: Displays recent transactions and quick links to regular payees.
- Overview Screens: Showcases savings goals and spending overtime, incorporating data visualisations.
Deliver 9 screens in total: accounts overview, current account and overview for desktop, mobile and tablet devices.

1. Research

A key consideration in any UI project is the tone, personality and values of the brand. For this project the brand's personality had a balance being clear, playful and trustworthy. These values shaped the research process and the design direction.

1.1 Competitor Analysis

I explored the public-facing websites of challenger banks like Revolut, Monzo and Starling bank to understand how they design their sites. I paid close attention to their layouts, colour schemes and navigation, noting how these elements create an inviting and user-friendly experience. This exploration helped me identify key trends and inspired me to develop a design that captures the same sense of professionalism and accessibility while adding my own unique touch.

1.2 Mood Boards and Inspiration Gathering

Creating mood boards helped me gather and organise visual references that inspired my design direction. It was an effective way of sharing ideas and refining my vision as I progressed.

I focused on elements that would help me achieve the brand's core value.

I looked at websites and apps that make great use of white space and typography to create clean and clear layouts - something that felt essential for maintaining clarity.
I also explored playful designs that incorporate colour, animation and illustrations to make user experience more enjoyable.
I wanted to find examples that communicated professionalism and security using muted tones and clear navigation to enhance trustworthiness.

Additional Visual Exploration

To further refine the design, I developed additional mood boards to gather inspiration for specific UI elements, including: Interactive states, iconography and colours.

'UI Elements and Interactive States' mood board

1.3 Key Insights

Clear: Simplicity and clarity are paramount in financial interfaces. Clean layouts and thoughtful use of white space enhance usability.
Playful: Incorporating playful design elements, such as bright accent colours or subtle animations can create a joyful experience without undermining the interfaces seriousness.
Trust worthy: Users need to feel secure when interacting with financial platforms. This required design choices that balance vibrancy with professionalism.

2. Concept and Iteration

2.1 From Concept to Wireframe

Based on the initial research, I developed a design concept centred around the themes of Clear, Playful and Trustworthy. These principles guided my design choices to ensure the interface was intuitive, reliable and engaging for users.

I began the UI design process by sketching wireframes, adopting a mobile-first approach - a vital step in my workflow. Starting with layouts for the Accounts page, Current Account page and Overview page, I prioritised quick access to account balances and essential actions like payment transfers. This approach allowed me to:

Rapidly explore layout options to ensure an intuitive hierarchy and navigation on mobile.
Identify potential usability issues early in the process.
Focus on functionality and user flow without the distraction of aesthetics.

These mobile sketches served as a strong foundation for designing for larger-scale devices.

Once I was satisfied with the sketches, I moved on to digitising them in Figma. At this point I incorporated colours, typography and other stylist elements, ensuring the visuals enhanced and complemented usability rather than overwhelming the user experience.

UI Sketches for Accounts page and Current Accounts page

2.2 Key Visual Elements

With the wireframes in place, I explored visual elements that would reinforce Moneyo's brand identity while enhancing usability.

🎨Colour Palette: For the core palette, I initially chose blue tones to convey a sense of trust and clarity.

🔠Typography: I wanted a typeface that was both easy to read and had character. After exploring Google Fonts, I landed on Lexend—a font that felt clear, professional, and versatile. Its range of styles allowed me to establish a natural hierarchy to users effortlessly through the interface.

🏠Iconography: Rather than designing icons from scratch, I sourced them from Flaticon, selecting a set that matched Moneyo’s playful yet professional personality. My focus was on keeping icons intuitive and familiar so users could recognize actions at a glance.

👆Interactive Components: For this project, I chose to design my own components from scratch, using Google’s open-source Material Design System as a guiding framework. This approach ensured my components aligned with Moneyo’s brand identity while maintaining consistency and familiarity for users. I created:

Custom buttons with clear hover and pressed states.
Transaction search inputs and dropdown selectors.
Account cards with dynamic feedback.
An interactive donut graph and line chart for spending overtime.
A mobile and desktop navigation system with an active state indicator to improve wayfinding and reinforce user control.

To ensure these components were visually accessible, I checked colour contrast ratios using a colour contrast checker tool, making adjustments where needed to meet WCAG accessibility standards. This guaranteed that text, icons, and interactive elements remained easily distinguishable, providing a more inclusive experience for all users.

As the design progressed through iterations, I refined these visual elements based on user feedback (see section 2.3 Iteration). Adjustments included enhancing contrast for better readability and refining button styling for payment transfers to improve interaction clarity. Additionally, I introduced gradient accent colours to help users quickly differentiate account types and balances, adding a more dynamic and engaging visual hierarchy. These refinements ensured the interface remained visually engaging while offering a seamless user experience.

Interactive Components designed for Moneyo

2.3 Iteration

The Accounts page and subsequent screens evolved significantly through iteration, driven by peer feedback and a focus on user needs.

Starting with Mobile:

My initial sketches featured simple, stacked account cards and navigation designed for one-thumb use. Digitising these in Figma helped refine the mobile layout, ensuring intuitive tappable areas.

Feedback and Refinements:

Key Improvements emerged from peer review:

Clearer account differentiation: Based on feedback from peers, to make account types easier to distinguish, I incorporated vibrant gradients to each of the account cards in the Accounts page, ensuring clearer visual differentiation.
On hearing suggestions about improving payment transfer accessibility, I added a floating action button (FAB) on mobile, making transfers quicker to access and more intuitive.

3. Final Designs

Once mobile designs were finalised, I adapted them for tablets and desktops. The final design consists of the following screens, each with intentional design decisions to enhance user experience:

Accounts Page

Provides an overview of all user account, prominently displaying account balances. I focused clarity by using a simple, clean layout in a list format, adding different accent colours to each card to easily differentiate between account types, making the information quick to scan. This approach supports the brand's clear value by ensuring the page is intuitive and easy to understand at a glance. Additionally I positioned key navigational elements at the bottom of the screen for mobile and tablet views and on the left side in the desktop view, ensure the key functions are easily accessible and consistent across devices.

Current Account Page

When designing this page, I wanted to make it as easy as possible for users to understand their current account activity at a glance. I chose to highlight the account balance prominently on a single card, ensuring quick insight of account balance was readily available. For the transaction history, I opted for a clean list layout with bold typography to emphasise key details like company names and credit/debit amounts. To make the information intuitive, I added red and green indicators to clearly distinguish money paid out from money received. Incorporating round icons for company logos brought a playful, friendly aesthetic to the page, while still maintaining a professional look, which aligns with the brand's playful yet trustworthy values. My focus throughout was on simplicity and clarity, ensuring users could easily identify important transactions.

Overview page

I designed this screen to provide a straightforward and approachable view of a user's financial health, focusing on key aspects like spending by category, spending overtime and progress towards holiday savings. To make financial data feel less overwhelming, I incorporated data visualisations such as doughnut chart, line chart and progress bar, which I found to be effective in simplifying complex information. Balancing functionality and aesthetics was important to me, so I used clear typography and colours to ensure everything felt easy to read and visually appealing. This design reflects the brand's clear and trustworthy values while supporting users in confidently understanding their financial situation at a glance.

Reflection

This project was a rewarding journey that deepened my understanding of Ui design principles and gave me hands-on experience in creating user-friendly, visually appealing interfaces. My goal was to design a banking platform that embodied clarity, trustworthiness and playfulness. I anticipated the challenge of incorporating playfulness into the serious nature of finance. However, this was an exciting part of the design process.

The mood board exercise was a highlight for me. It wasn't just enjoyable, it really opened my eyes to how competitors approached similar challenges and inspired me to strike a balance between playfulness and trustworthiness. Subtle illustrations, soft round corners and bold gradient colours gave the design a lively touch, while blue as the primary colour helped convey trust and security. Choosing a modern simple font felt like the perfect way to ensure legibility while keeping the design fresh and contemporary.

Starting with a mobile first approach made me think carefully about creating a light, spacious layout that was easy to navigate, especially when I had to revisit elements like the floating action button for transfers after peer feedback. Small adjustments were also made as I scaled designs for larger screens to ensure elements were aligned with content hierarchy and all fits harmoniously.

There were some challenges along the way. Time management, balancing fine details and maintaining consistency across screens were tough. Additionally, I found maintaining organised design files and naming components consistently to be areas of improvement.

If given more time I would:

Spend additional time understanding content hierarchy and planning layouts more comprehensively.
Explore more features and visualisations to enhance user value
Improve the organisation of design files for better handover experience.

Overall, this assignment for my UI design certification course provided valuable experience in creating a responsive, visually appealing design for a financial platform. While there is room for iteration, the project was a rewarding opportunity to apply UI principles to a practical challenge.