Service + UX/UI Designer
Student Project
Online Banking App
UI Design
Design Brief:
To design the user interface for a banking application. Your client is a fictional challenger brand, a new competitor to the traditional banking institutions. They want an intuitive interface that will help them stand out from the crowd.
​
Final Screen Designs
The Process
Playful 🪀
Using our product should be a joy for users. We’re not afraid to show some personality through colour and shape, but never at the cost of being intuitive.
​​
Clear 💎
We’re dealing with people’s money, so we need to present information in a logical and uncluttered way.
​
Brand values
Your client already has some established brand principles in place. Their tone and personality are as follows:
​
​
​
Trustworthy 🔒
Users must feel they can trust our product. Finding the balance between playful and trustworthy is part of the challenge of this assignment.
Moodboards
I kicked off the design task by immersing myself in a creative process, crafting mood boards that reflect the core brand principles of Clear, Playful, and Trustworthy. Initially, I searched for images that embodied these values, then delved into an analysis of competitors in the online modern banking world to understand how they manifested clarity, trustworthiness, and playfulness in their screen designs.
These mood boards have been instrumental in shaping my vision for the bank's name, 'Dolphin', which conveys playfulness while maintaining clarity through its oceanic association. Additionally, I've chosen a blue color palette to reinforce a sense of trustworthiness. Feel free to take a closer look at my mood board for a deeper understanding of my creative inspiration.
Developing a Grid System
I developed a responsive 8-point grid system with columns for different screen sizes (mobile, tablet, and desktop). This helped me understand the principles of responsive design and grid layouts using Figma's design tools.
Designing Components
Using inspiration from online banking apps, I have designed components to be used in my screen designs. I have started to develop ideas for the colour palette, drawing inspiration from the colours of the ocean and modelled my call-to-action buttons on the simplicity of those found Revolut banking app.
Typography
After studying the fonts used in online banking apps, I decided to opt for sans-serif fonts. Drawing inspiration from other competitors, I chose Roboto as the primary font due to its modernity and variety of weights. To complement Roboto, I selected Nunito for its playful appearance with rounded edges. I have planned heading sizes and paragraph typography for desktop and phone screens.
Accessibility and Pallete Design
When designing a colour palette, I conducted accessibility research as a starting point.
​
The dolphin logo works in not only colour but also black and white, which passes the accessibility tool test.
​
After iteration lime green was added to the palette to add extra contrast, fun and good accessibility in the data charts.
​
Screen Design Iterations
Iterating the design helped me to re-examine my design-thinking of the layout, colour balance, priority of the primary, secondary and tertiary buttons. The accessibility of the colour contrast and legibility of the design to give a good user experience.​
​