Iconography design

Aligning the RateSetter brand experience.

Iconography hero

Brands which renew their iconography whilst protecting its integrity build strong brand connection and equity. These brands become iconic. Managing a brand’s Iconography refers to the process of identifying, analysing and optimising the concrete elements which project the intended brand experience.[1]

The problem

Icons are a part of the illustration family at RateSetter, but serve a very different purpose. Icons should be more literal than illustrations and used to bring clarity to their subject. Therefore, they should always be simple and easily understood.

RateSetter needed a new set of icons to match the visual style of the rebrand. The primary goal was to create a library of icons that could be easily understood and visually different from both illustrations and UI to avoid confusing customers.

How I approached the challenge

Getting the right tone for the icons was challenging as the visual style of the RateSetter website was based on the usage of bold colours and geometry. Also, few illustrative assets existed when the new brand was launched, so iconography was used with a cross purpose of making complex ideas more accessible, breaking apart sections and drawing the eye to content.

Iconography development

Benchmarking

By analysing the homepages of other financial/peer-to-peer companies, I identified a common style and purpose for their icons. The appearance of the icons consisted of outlines and were very simple and discrete. I then researched the styles developed by professional UI designers to see how particular topics could be communicated with iconography.

What didn’t work?

The design team and I created an initial set of icons that were very striking and had lots of personality. However, the bold colours and thick strokes just didn’t work. When I applied a UX critique to the designs, it became apparent that the icons could be confused for navigational devices, or were too complicated and therefore not understood. The use of icons required definition as they lacked a clear purpose - they were being used both illustratively and as a visual language for the website.

Icon set used at launch

What I accomplished

When I simplified the icons they became more effective. I removed the background shapes and kept detail to a minimum. I designed them on a 40px x 40px grid and exported them as outlines to ensure they would maintain their proportions when resized. Using round caps added a sense of openness and optimism to the icons. This was really important when tested on the RateSetter website as gaining the trust of a customer was a principle requisite.

I produced a library of 50+ vector icons using these rules and rationale, with variations for use on different types of backgrounds and media. The iconography library was shared across RateSetter for projects including powerpoint presentations, emails and printed assets, adding a level of consistency which hadn’t existed before.

Refined iconography

[1] Equity: Brand Iconography http://added-value.com/2010/01/01/equity-brand-iconography/