Visual Design

Overview

After completing the Diploma in UX Design with the UX Design Institute, I knew the calibre of the courses they provided was excellent. It was for this reason I was keen to enrol on their latest offering - a Professional Certificate in Visual Design. Sainsbury's Bank were happy to cover the costs to help my personal development.

This course, unlike the Diploma, was only 3 months. The coursework included creating mood boards, responsive screen design for a banking platform and a reflection document.

Worked with: Personal project
Tools used: Figma

Mood boards

The first project consisted of creating mood boards that would later help inspire the screen design for the banking platform. I'm very used to creating mood boards, it's something I find helps creativity and a technique I have used throughout my career.

For this project, the mood board had to be split into categories:
Playful, Clear, Trustworthy, Colour, Shape & Typography.

Mood board conclusions

From analysing the mood boards as a collective, I seem to have a style that I lean towards as there are similarities throughout. Making notes on each board also helped to pick out key features that I could look to incorporate or take inspiration from in my own designs.

Paper wireframes

Since this was a UI based project designing screens, I created basic wireframes on paper first. I always start with a pen and paper and sketch out the structure before going to the computer. It's a quick way of getting ideas down on paper and fleshing out basic information architecture.

Making decisions such as type of navigation, layout of content and placement of images are all key decisions that can be narrowed down sooner for me, if I am sketching.

Design system

Creating a design system is key to keeping consistency through a product. At the start of the design stage, I chose fonts and a colour scheme and created a library within Figma for ease of use. Components were also created and their styles added to the library for future use.

Final screens

The final screens included a dashboard, account & spending screen. They were all designed responsively for desktop, tablet and mobile and I chose to go for a native application as opposed to a web application.

Reflection

Reﬂect on your work and say which parts of your project you were really happy with.
My aim for the project was to create a clean, concise platform with soft edges and a trustworthy feel to it. I chose blue as my primary colour due to it’s financial connotations and the feeling of loyalty and wisdom. The simple layout, combined with minimal yet important information, makes for an aesthetically pleasing design. The font I chose is modern, yet easy to read making it a good choice for a banking platform. The flow between mobile, tablet and desktop is strong and the elements can work responsively to create a recognisable design system. I made sure to keep a healthy amount of white space which lets the content breathe on the screen, plus focusses the user to the main elements.

Reﬂect on your work and say which parts of your project you were less happy with.
There are always elements that can be tweaked in a design. The titles above the cards could be improved, especially on the “Spending” screen. More direction could be given to what the information relates to and if I had more time this would be the first thing I would amend. I also think the “My account” screen could have better use of white space – there is plenty of it, but some of the content feels a little sparse. Overall though, I am very happy with the final design and the points I mention are minor changes.

Reﬂect on your work and say what you would do differently if you had unlimited time to work on the design.
My personality is one of a perfectionist. I could work on a design and keep changing parts or elements, but I have learnt in my career that that is not possible. If I had more time, I would work on the wireframes further and flesh them out for longer before adding colour, graphics and copy. Due to the short nature of the course, there was also not enough time to conduct extensive user research or to do much competitive benchmarking. I would also work on the feature set if I had more time. I included elements that weren’t on the provided wireframes which I feel added to the design, however I think there could be other features that could also bring value to the design.