UI for a challenger bank
Project overview
- Mood board
- Competitor review
- Questionnaire
- Affinity Mapping
- How might we...
- Brainstorming
Research
Who uses a challenger bank?
We all require a bank account, but who is attracted to a challenger bank and why? I started off defining the users - who were they, what were they looking for in a bank and what did they want from a banking application? I began by making the following assumptions;
- Younger generations looking for a bank they can relate to and with a humorous approach to financial management
- Customers seeking clarity, control and fair prices
- Tech savvy, mobile first users
- People in the 16-34 age range
- Sees growth among 35-54 year-olds as trust and features mature
- People looking for convenience, lower fees, and enhanced user experiences
I then asked some people from this target group what tasks they use their banks for most, their replies were:
- Moving money
- Checking balances
- Paying bills - by direct debit or bank transfers
- Checking Credit card use/balances/paying off credit card balances
- Calculating what money is left over/can be moved to savings
They used predominately Mobile and Tablet and when asked about their expectations of an insights/spending page, notably none of them made use of their bank's built-in spending tools. Instead they relied on alternatives such as Excel spreadsheets, noting down transactions or said that they spent their money on the same things each month or felt that their income was too limited to lose track of in the first place. They wanted control over cash flow - particularly in emergencies, didn't want to confront where their money was going or felt their income didn't justify the time investment required to gain insight into their spending.
This led me to delve deeper into the psychology behind spending and saving - learning that our emotions, biases and habits often take control over rational thought. This helped me to better understand what barriers people might experience when managing their finances and to then brainstorm what a banking application could do to help with these, at the same time as balancing the brand values of clarity, trustworthiness and playfulness. Some of the 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 learnt that people who tie their savings to specific goals, for example buying a home, achieving financial independence or retirement tend to do much better. That setting up automatic transfers to savings accounts can boost long-term wealth. Using triggers, such as tying savings to payday can help establish a natural habit loop. Celebrating progress/mile stones can help maintain a persons motivation and visuals of a users' goals can help them maintain/boost their commitment.
I reviewed the solutions of both challenger and traditional banks such as Monzo, Starling, Vipps, Sbanken, Revolut, Bank of Scotland and Santander amongst others. I looked at brands throughout the world that were perceived to be trustworthy and I put together a moodboard, gathering inspiration and ideas. I then had more than enough material to start brainstorming some ideas!
Ideating
I had a good idea from my mood board and initial research of what was required for the accounts page, current account and spending page and I began putting together 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
In addition I wished to look at how I could:
- Inspire users to use the spending tools
- Inform and educate users about financial wealth
In order to be perceived as trustworthy and clear the design needed to utilise white space and present information in a logical and uncluttered way. 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.
The desktop pages were perhaps iterated most
Early iterations
Solution
To build trust and a feeling of clarity I used visual consistency by using consistent colour, typography and generous spacing. I used Darker Grotesque which is a versatile, modern sans serif font - that's good for legibility and its neobrutalist vibes added a playful touch. It's avaialble in several weights, styles and supprts several languages. I utilised whitespace to create a calm and uncluttured design.
In addition to these, other small elements that can add to being seen and known as trustworthy included using the credibility marker from the financial services services compensation scheme (FSCS) (obviously the "real" bank would have to be a part of this!). Making support visible on the homepages and on cards and highlighting through cards that the bank takes security seriously. I used clear, direct language to build confidence.
Making the design playful was challenging! Not only because of the balance to be stuck between being seen as trustworthy, professional and reliable, but also because there wasn't very many "spaces" to add playful elements - and in a prototype that wasn't required to be interactive there was no way to use animation. So I utilised the bold, contrasting green colour to highlight the available balance, but in a handwritten style that contrasts with the professional feel. I also used icons on the cards that were playful and imagery of young, happy people.
In addition I used:
- Images for the pots savings system as clear visuals can boost commitment and people who tie their savings to a goal tend to do better.
- Progress bars on the pots to provide people with a sense of achievement
- Cards to promote behavioural nudges such as tuning on roundups - automatic saving and completing a budget (not get started but complete).
- Icons in the transaction lists to help aid recall
- A "Customise your view" button to provide people with flexibility to set up their page how they wish/need.Cards to show key metrics people should be aware of, such as cash flow, the percent of their income they save, the percent of their income that pays off debt and how much they have in emergency funds.
Accessibility
- 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 text are consistent across devices
- Buttons, icons and links all meet minimum target size
- Minimum contrast and non-text contrast all meet WCAG guidelines
- 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 chosen to present "spending over a year" as these are more effective at showing change over time. A horizontal bar chart was used as these are optimal for people to view and understand quickly as the bars are closer to each other to compare. The edges of the bars were deliberately not too rounded for accessibility purposes. A subtle texture was added to the bars in the graph to accommodate people who don't see colour differences so well or at all.
View the desktop prototype below.
What did I learn?
Working on this project I began utilising grids more efficiently, ensuring that every detail was aligned and checking that language was consistent across pages and devices - whether that be on links, labels, navigation menus or page titles. I now understand how icon stroke weight should feel balanced with the typeface. Having focused on mobile-first design in previous projects, this project deepened my understanding of both the differences and opportunities that different devices present.
I think consistency is probably the key thing I learnt from this project. I also enjoyed the challenge of trying to create a design that is both trustworthy, clear and playful. It really pushed me to think about what elements could be playful and all the small things that add up to creating a design that builds trust and is clear.
In terms of my working process I learnt it was useful to keep track of iterations, I found myself updating components then losing the previous versions which could potentially be needed to show that something had been 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!
