Control Banking UI Design Project

Brief

A new banking app is looking to enter the market and want a great responsive website with a great user experience for their customers. The brand tone is playful, trustworthy and clear, which was taken into account at every stage of the UI design process.

please note this is a fictitious company as part of the UX Design Institute

Solution

As I was working with a blank canvas the first technique was to create a mood board using ideas that sit with the brand tone, to create some inspiration and help with a starting point.

A colour palette was identified early on and tone of blue was used as I felt it can have a playful feeling but also trustworthy as seen in many Irish banks i.e Bank of Ireland, Ulster Bank.

A grid system helped to see where eveything sat on the wireframe mock ups that were supplied and also helped ensure everything looked balanced and visually easy to understand.

I wanted to focus on one screen and have a great starting point and effectively use that as the template for all other screens. Several iterations can be seen below before settling on the main idea for the theme.

Full overview

Below is a more detailed look at various phases of the design process, explaining a little more about the various steps taken.

Mood board and Grid System

As I was working with a blank canvas the first technique was to create a mood board using ideas that sit with the brand tone, to create some inspiration and help with a starting point. I looked at banking apps and other financial apps to see what is currently being used as design solutions and also looked at unrelated apps and websites to see how they solve similar design problems.

While looking at these websites/apps I kept in mind the brand tone of playful, trustworthy and clear and also took inspiration for typography, colour and interactivity.

Once I had some ideas in mind, I wanted to setup a grid system to get everything in place and see what was already aligned well in the wireframes. The wires were to be used as a starting point only and there was full permission to change the designs if needed.

As well as the grid system shown above, there was an 8 point grid setup and all spacing between elements used this 8 point grid system, keeping spacing values to increments of 8.

Visual design iteration

I wanted to focus on one screen and have a great starting point and effectively use that as the template for all other screens. Several iterations can be seen below before settling on the main idea for the theme.

Final visual design for Desktop, Tablet and Mobile (My Accounts screen)

Personal Touch

The use of the customer avatar and the hello message was a way to make the screens feel a bit more personal to the user. Using a financial website/app can sometimes be stressful enough depending on what a user is looking to do. Making the user feel as comfortable and relaxed as possible using the website was a main goal and even though it may seem a small thing, it can help make a user feel more connected.

Navigation icons

The icons that were created were kept very simple so that they would look as good at mobile size as they did desktop size and also to make it very easy for a user to understand what the icon means. The labels are used as a further help to the user when interacting with the navigation.

Navigation Pills

For users to switch between different accounts (current, savings etc.) navigation pills were used as they were visually strong on desktop and transforms nicely on tablet and mobile by allowing a user swipe through the different accounts available.

Final UI screens

Desktop, tablet and mobile screens for Current Account

Desktop, tablet and mobile screens for My Spending



Desktop, tablet and mobile screens for My Accounts

Contact Me

If you like the work you have seen and would be interested in working together on your next project get in touch below and we can talk through your ideas