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
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.
Below is a more detailed look at various phases of the design process, explaining a little more about the various steps taken.
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.
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