Mintd
The Brief
For your assignment, you will create the UI for a new responsive banking application. Your client is a challenger brand looking to make waves in the financial world. They’re not afraid to add more personality to their UI than the well-known, established banks while keeping things intuitive.
Your design needs to work responsively across desktop, tablet, and mobile layouts.
the problem with existing
banking apps
Existing banking products have typically been regarded as dull in their aesthetic. Although functional, they are oftentimes complicated to navigate, putting products and services ahead of their most frequent use cases. It's understandable that these products lead to an increase in the cognitive load of the user; impacting their engagement, enjoyment, and faith in the product.
Taking these issues into consideration, I wanted to design an interface that acknowledged the disruptive brand tones, while respecting the expectations and conventions of a trustworthy banking product.
phase 1: RESEARCH
brand tone
As part of the assignment, I could choose the name of the banking site. The bank however had existing brand principles for its tone and personality:
Playful: Using our product should be a joy for users. We’re not afraid to add some extra personality into our style like colour, animation, and shape, but not at the cost of being intuitive.
Clear: We’re dealing with people’s money, so we need to make sure to present their information in a clear and uncluttered way. White space is our friend.
Trustworthy: Our product must convey a sense of trustworthiness in presentation.
mood boards
With the bank's principles in mind, I began collating imagery of UI that captured a sense of playfulness, clearness, and trustworthiness. I found that there were themes within each group, which at times seemed contradictory in terms of aesthetics.
Playful UI leans towards brighter colours, rounded shapes, simple iconography and 'bouncy' UI animations. It portrays a sense of light-heartedness and it encourages you to interact. The UI examples featured on this moodboard are eye-catching and could be considered fresh and youthful in appearance.
Clear UI has a logical layout and hierarchy. The CTAs are distinct and accessible, and the user's actions are validated and verified. It should be clear to the user where they are in the process. This moodboard contains examples of considered use of space, bold colours used appropriately, and use of shape that helps display data intelligibly.
Trustworthy UI suggests an advanced level of security, reassuring copy, and imagery that denotes safety and control. Iconography is utilised to assure the user: padlocks, shields, and fingerprint recognition. The colours are far more muted: cool, metallic tones are reminiscent of metal safes and locks.
colour, shape & typography
For additional inspiration, I captured references of existing businesses and products that use colour, shape, and typography effectively to convey their brand.
Colour is incredibly powerful in brand identity. The examples in my moodboard are businesses that use colour that supports 'playful' and 'clear' brand tones. The use of pastel colours is becoming increasingly popular across digital products and is something not previously seen in financial applications, however, Klarna and N26 have broken that mould.
Shape can help to make a product more engaging and works hand in hand with the brand identity. I found the use of shape repetition within the Headspace app really inspiring. The round, soft shapes harmonise with the theme of meditation and mindfulness and the use of circular shapes pairs with the brand logo.
Typography can also support the brand identity. I found that modern organisations tend to use sans-serif fonts. These fonts come across as more contemporary, approachable, and relatable; something I feel a banking application would benefit from.
phase 2: DESIGN
THE BRAND
For the brand name, I wanted to use a word that was short and memorable but also acknowledges the brand's playful tone. The name is derived from the word "minted", British slang for wealthy. The word was shortened to make it unique to the brand, but it also scales down well for smaller screens.
The origami motif is a playful theme that runs throughout the UI of the screens. The angular shapes however are reminiscent of the shapes used within 'secure' and 'trustworthy' products.
The sans serif Syncopate font worked well in contrast with the angles of the 'M'. The mix of both upper and lowercase is playful, but its display properties make it suitable for a professional business logo.
DESIGN SYSTEM
phase 3: FINAL DESIGNS
Please click on the below images to see the designs in more detail.
MOBILE
TABLET
DESKTOP
