Overview

• Branding and UI Design for fictional challenger bank
• Professional Certificate in Visual/UI Design with UX Design Institute
• My contributions:
  • Industry and competitor research
  • Designing brand style
  • Sketching and wireframes
  • Screen layouts

Background

I’ve been designing, managing and creating the content of websites for many years. I’m currently working on the User Experience (UX) design for an app for disabled people. Although my role is focused on the UX, I sometimes need to manage freelance graphic designers and User Interface (UI) designers. Luckily, the UX Design Institute were piloting a Certificate in UI/Visual Design, so I signed up.

Brief

Our brief was to create the User Interface (UI) for a new responsive banking application. The fictional client is a challenger brand aiming to inject more personality into their UI than the established banks. Their brand values are Playful, Clear and Trustworthy. The objectives were:

• Choose a name for your bank
• Create a fresh new interface for a responsive banking application. Something familiar to use, but also more playful than established banks.
• Design polished user interfaces for three screens, each at a desktop, tablet and mobile screen sizes

Project

Moodboards and Research

I gathered examples of real and proposed financial apps for my moodboards. This was really helpful for deciding which features I wanted to include in my UI. I looked at classic examples of graphic design too. My moodboard eventually ran to 19 pages, so I created a one-page document with images that met all three brand values: Playful, Clear and Trustworthy.

I also kept an eye on what my classmates were doing. Here are my notes on my classmates’ work, complete with scribbles, water stains and cat paw prints:

Branding

I wanted to call my bank ‘Squirrel’, as squirrels are known for ‘saving’ their resources. It would would also allow for playful branding with a cute animated mascot. Unfortunately, someone already had that idea. Having investigated the options still available, I settled for a subtle Scottish theme and named my bank ‘Canny’. Canny is a Scottish word meaning “having or showing shrewdness and good judgement, especially in money or business matters” which seemed appropriate for a bank. Whilst I wanted my branding to be reminiscent of Scotland, I didn’t want it to include twee references to tartan and bagpipes. In the end, I kept the Scottish elements simple – just the name and the palette.

Palette

Having created a moodboard of Scottish photographs and themed palettes, I chose colours extracted from a Rene Mackintosh painting, as they had a good range of tonal values and hues. I named the colours after the urban and rural landscapes of Scotland.

I decided to try making a dark theme, as I had never done that before. Google’s Material Design guidelines recommend using lighter colours for dark themes, so I added these to my palette.

Typography

I chose Recoleta as my display typeface as it is warm and friendly. It is also reminiscent of 1970s typefaces, giving it a sense of maturity and wisdom. I eventually chose Lato for the body copy because it is clear and accessible, but the slight roundness means it complements the soft Recoleta.

Imagery & Iconography

For my logo, I chose an owl to go with the ‘wise and canny’ theme. I created multiple iterations to ensure it worked as well as possible at a small size.

Sketching

Sketching was an important part of the entire process. Here are my sketches, from unintelligible scribbles, through to the neatest sketches I can easily manage:

Figma

I work with a developer in my day job, so Figma was a great choice as a prototyping tool. It works on both Mac and PC, which is really helpful when handing over files to my colleague. It’s free too! We’ve been using it ever since.

I tested my palette and typography by adding it to other people’s layouts. This showed that my palette was a bit too “grim” for both light and dark themes. As I result, I carefully increased the saturation and brightness of the colours.

After a bit more sketching I started creating my layouts. Naturally, there was a still a little experimentation along the way – especially when creating the tablet screens:

Handover

In order to simulate both working in a team and a handover, I recruited two friends who recently graduated from design courses: Jo Williamson and Chantal Dipnarine. Their first job was to give me feedback and suggest changes to my UI, which was really useful. You can see an example of the marked improvement below. I also asked them to try making a few changes, to ensure they understood my file structure.

Conclusion

This course has been very useful for my professional development and my current job. Even though we hired UI and graphic designers for our Digital Blue Badge project, I still ended up doing a lot of designing myself because of the tight timescales. The lessons and coursework were therefore invaluable.