UI Case Study.
User interface for responsive banking app.
My client is a challenger brand looking to make waves in the financial world. They want to build an intuitive app that will help them to stand out from the crowd, a new product that people can trust and that works responsively across desktop, tablet and mobile.
The three core brand values established already by my client - playful, clean and trustworthy - need to be infused into the branding and the interface of this new and innovative banking app whose ultimate goal is to lead the market and set the trends.
Scope: Professional Certificate in Visual Design
My Role: Branding. Visual / UI Design.
Timeline: Fall 2021.
Tools: Figma, Adobe InDesign, Illustrator, Photoshop.
Design process.
Turning banking into fun.
My goal is to bring the brand and all the visual aspects of the app to the next level so that it clearly differentiates from their competition. After some preliminary research, I discover that most leading banking apps in the market have boring and rigid interfaces, far from being engaging or memorable.
For a new banking app that wants to stand out from the crowd, it is crucial to deliver vibrant and catchy visual elements. My approach is to prioritise ‘playful’ as the differentiating core value of the brand that will be infused on every aspect of the branding and visual design, closely supported by ‘clean’ and ‘trustworthy’, the other brand’s key values.
Moodboard with proposed look and feel.
Telling a brand new story.
When creating the brand and visual identity from scratch, finding the right word to represent the tone and style of the company can be tricky. Giro is a catchy, memorable and dynamic word within the financial jargon that resonates with the brand’s core values and has endless graphic possibilities.
The logo is font-based, determined and recognizable. ‘Hatch’ is a modern, fun and distinctive typeface. The slab serif radiates playfulness but also trust. Giro doesn’t need a motto or further introduction. It’s simply Giro, your best new friend that transforms dull and challenging daily finances into enjoyable and easy-to-do tasks.
Unfolding high fidelity.
Based on the wireframes handed over by the UX design team, I start working with sketches. This allows me for rapid experimentation and iteration.
After shaping some solid proposals, I move into Figma to create high fidelity wireframes that can be iterated fast to test different graphic languages.
A selection of these will be tested later with a group of my peers with the result of 80% of them loving the most the proposal with the bold illustration.
Powerful imagery.
This very carefully curated illustration is fresh, contemporary and will provide the product with a distinctive and meaningful tone that the leading banking apps in the market lack. The illustration will tell the app’s users of human and engaging stories which narrative line will carry them smoothly along their journey across the app.
The colour palette is a mix of bold and vivid colours that lift the interface and add another distinctive element to help the app to differentiate from their competitors. The combination of colour provides high contrast among all visual elements transmitting a sense of clarity and therefore trustworthiness. Accessibility is a relevant criteria when deciding on the final colours combination.
Responsive designs.
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the difference.
Don’t worry about sounding professional. Sound like you. There are over 1.5 billion websites out there, but your story is what’s going to separate this one from the rest. If you read the words back and don’t hear your own voice in your head, that’s a good sign you still have more work to do.
Tap to view screens in Figma.
The learnings.
Better not to rush and invest time planning. I started materialising the hi-fi designs too early and I should have given more time before rushing into Figma with many key aspects of the responsive designs still unresolved.
When designing for responsive, it is easier to start with the mobile layout first as it helps to prioritise the content between essential and secondary.
Creating a strong visual hierarchy on all the screens is crucial to guide a logical progression of the content. The most important elements need to be prioritised so they are viewed first and so on.
Using responsive design patterns that work across different devices.
Don’t clutter your screens. Less is more.