UI for a challenger bank
Project Overview
The project was to build an intuitive interface for a fictional challenger bank. It needed to stand out from the crowd with clear, playful and trustworthy brand values.
The prototype was not required to be interactive. Instead it had to focus on how the design would respond across different devices.
Methods used:
- Competitor analysis
- Questionnaire
- Affinity Mapping
- Brainstorming
- User flow mapping
- Accessibility review
- Low-fidelity wire framing
- Prototyping
I worked on this project independently, with feedback from senior UX designers and UX Design Institute staff throughout.
Discover
Who uses a challenger bank?
Everyone needs a bank account - so why pick a challenger one? I started defining the users and what they wanted from a bank. I assumed that they were;
- Younger generations (16-34) looking for a bank they can relate to
- People seeking a bank with a humorous approach to financial management
- People seeking clarity, convenience and fair prices
Common tasks included moving money, paying bills and tracking account balances. Reasons for choosing a challenger bank included getting paid early and their "pots" savings feature.
No one used their bank's built-in spending tools — some tracked via Excel or notebooks. While others avoided tracking altogether, citing predictable spending, limited income, or discomfort confronting where money went.
Delving into the psychology behind spending and saving helped me better understand what barriers people might experience when managing their finances. Behaviours included;
- Prioritising immediate rewards over future benefits
- The worry of missing out if they don't spend their money that day
- Treating money differently depending on where it comes from
- Social influence/peer pressure
- Awareness of when/why they spend i.e - boredom, stress, unhappiness
I also learnt that tying savings to specific goals, automating transfers, and linking them to payday builds lasting habits. Celebrating this progress keeps people motivated.
I benchmarked challenger and traditional banks (Monzo, Starling, vipps, SBanken, Revolut, bank of Scotland and Santander) and built a moodmoard of trustworthy and playful brands for inspiration.
Develop
Solve the problem
My visual mood board, and research shaped what was needed for the accounts page, current account and spending pages. I began sketching a simple user flow, which matured into the navigation menu.
I then began brainstorming how I might:
Make the application clear and trustworthy but playful at the same time
To be perceived as trustworthy and clear, the design needed white space and a logical, uncluttered layout. It also needed to be a joy to use and show some personality through playful elements such as shape, colour and/or graphics. However because the prototype was not to be interactive this constrained how easy it would be to add in playful touches.
I wasn't concerned with colour, contrast etc. at this point - just getting ideas out and they began with a carousel for the different accounts, however this didn't utilise the space available on the mobile screen and became a duplication of content. Moving away from that, I replaced it with shortcuts for the most common tasks users complete - Paying or transferring, viewing pending payments and managing their cards - but these seemed like they were on their own so I incorporated them into the Current Account card.
Early ideas
Deliver
The Solution
To build trust and a feeling of clarity, I used consistent colour, typography and generous spacing. I used Darker Grotesque, a versatile, modern sans serif font that's good for legibility. Its neobrutalist vibes added a playful touch too. It's available in several weights and styles, and supports several languages. I utilised whitespace to create a calm and uncluttered design.
Additionally, I used the credibility marker from the Financial Services Compensation Scheme (FSCS). Obviously any real bank would have to be a part of this! I made support visible on the homepage and cards, and highlighted through cards that the bank takes security seriously. I used clear, direct language to build confidence.
Striking a balance between trustworthy, clear and playful was challenging in a non-interactive prototype. So I utilised a bold, contrasting green colour to highlight the available balance. Its handwritten style contrasted with the professional feel. I also used playful icons and imagery of young, happy people.
In addition I used:
- Images for savings pots - to help boost commitment.
- Pot progress bars - to give people a sense of achievement.
- Cards to promote behavioural nudges like turning on roundups, automatic saving or completing a budget.
- Icons in the transaction lists to help aid recall.
- A "Customise your view" button to provide flexibility.
- Cards highlighting cash flow, the percentage of income saved or used to repay debt, and emergency funds.
Accessibility
A good product should be usable by everyone. It was ensured that:
- Headings, titles and labels describe the topic/purpose
- Section headings are used to organise the content
- Navigation is predictable across all devices
- Link purpose is clear by the text alone
- Buttons, icon labels and link texts are consistent across devices
- Buttons, icons and links all meet minimum target size (in this case Material's 48x48px)
- Minimum contrast and non-text contrast all meet AA standards
- There are multiple ways to navigation - breadcrumbs and the nav bar/menus
- No element is reliant on colour alone - the graph uses different colours and labels (for the amount of money)
A line chart was used for "Spending over a year". Line charts are more effective at showing change over time. A horizontal bar chart was used for money in/out. People can view and understand these quickly. Bars placed close together make it easier to compare values. Bar edges were kept slightly square to avoid any confusion. A subtle texture was added to help people who can't distinguish colour.
What did I learn?
I utilised grids more efficiently in this project, aligning components. I ensured that language was consistent across different pages and devices. I now understand how icon stroke weight should balance with type. Having focused on mobile-first design previously, I gained a deeper understanding of cross-device differences and opportunities.
Consistency is a key thing I learnt from this project. I enjoyed the challenge of designing for trust, clarity and playfulness. It pushed me to think carefully about what elements could feel playful. I also saw how small details add up, in this case to build trust and clarity.
In terms of process, I learnt the value of keeping a record of what I'd tried, and why it didn't work. Now I'm excited to take everything I've learnt and apply it my next project!
Thanks for checking out my portfolio!
