CASE STUDY
BANKING RESPONSIVE WEB APP
The client is a newly established bank that wants to encourage young people to save more and become involved in their finances.
They want to push the boundaries of how banks typically appear and make the customer feel that saving is fun.
The goal is to establish an interface that is trustworthy, playful, and clear in message and information delivery.
Style guide
01
Research
The interface of banking applications is often not very engaging and inspiring. You log in and do what you need to, but they are not personal, and they all look somewhat similar. It doesn't make the user feel important to the bank.
I researched Dribble, Behance, and Pinterest and the bank apps existing on these sites have features of interest. Many of them has Dark Mode theme and a more masculine, cool outlook.
I felt quit early in the process I wanted to go more light and colourful to reach a broader customer base.
02
MOOD BOARDS
The Bauhaus Illustrations was a large inspiration point for my direction. Bauhaus is something that is timeless, credible, clear and appeals to young people as well.
Work with smart default and biometric ID, app should be polite and recognise the customer. Dare to be clear and avoid a cluttered interface. Follow conventions.
Lead the user through the process, clear navigation. Find the balance between clear and playful. Light mode theme gives a more airy expression. Less is more.
03
ITERATIONS
I did several iterations to find the right balance between playfulness, trustworthy and clear.
It was a challenge to work with accessibility because I wanted patterns, colours and illustrations to be a part of the design. It took me many iterations to find the right way to go.
I tried out a quit clean design for a while and I really liked it but then the wireframes lost the playfulness.
I tried around a lot with colours and gradient, I didn’t want it to feel too retro. In the end I removed the gradient, I thought it was stronger without.
Final Result Desktop
By testing with users a few times, I arrived at this result. I have worked extensively back and forth to find the balance between trustworthy, playful, and clean.
In a playful Bauhaus-inspired manner, the app illustrates how much one sets savings goals, how much is saved, and where the money is allocated, to encourage young people to save more.
Font: Spartan, medium and bold.
Colours: I used many colours but the 3 most significant are: dark blue, blue and yellow. Blue stands for trust and stability and yellow stands for happiness and energy.
Tools: Adobe illustrator, Figma
I wanted to make it clear to see progress when you have a goal to save for, so it feels rewarding to set aside money.
Since I want to encourage the user to start saving more, I have focused a lot on the clarity of what is on the account, where the money has gone, and how much is left.