Function over form: Best practices for illustration in product design
Illustration is on the rise in digital design. As digital services and products have become more abstract and hard to visualise, brands are using it as a core part of their visual identity to support key messaging, make their products easier to understand and improve consumer sentiment.
When distinctive, illustration can set a brand or product apart from competitors and can even be more recognisable than a logo. However, it’s easy to fall into the trap of using illustration purely for aesthetics. Generic stock illustrations are often used in design purely because they ‘brighten up the page’.
In this article I’ll be delving deeper into why illustrations are so important to our team, our approach and style at what3words, as well as processes that work well for us. These insights are transferable across industries and may help you make better-informed decisions when it comes to illustration for your business.
How it all began
At what3words we started experimenting with illustration to see whether it would improve our communication with users. If you have downloaded our app recently, you will have come across our new introductory illustrated carousel. After A/B testing this feature, we saw engagement of our app increase by 20%; the illustrations helped users quickly understand what3words and motivated them to use the app more. Since then, we’ve been testing out illustrations throughout our products — in particular, our developer website, which we launched last week. In the rest of this post, I’ll explain our information design approach to illustration, which we’ve rooted in function over form.
Why use illustration?
what3words is all about solving real problems for real people, so we always aim to use photography from real-life situations within our communications. However, consider the difficulty of relying on photography exclusively when trying to communicate a very specific situation. Image libraries are great for generic photos, but fall short when trying to find an image portraying ‘band members meeting at the back entrance of a festival in the middle of a field’. The alternative would be to create the photo ourselves, but this can quickly get expensive.
Illustration can also add value when it comes to communicating a message to a broad audience. Photography is reliant on real people, which means age, ethnicity, social status, and culture are communicated whether you want them to be or not. Illustrations allow you to keep things vague and generic, which ensures different audiences are not put off by irrelevant-looking content.
Also, consider the difficulty of photography when trying to communicate abstract messaging. Within our developer website, for example, we’ve had to communicate concepts such as ‘API key security’ and ‘Creating an Autosuggest input box’. As you will discover on a Google image search for something like ‘tech security’, the web is full of some pretty abstract, Tron-style graphics that don’t really communicate anything. This is where illustration can add real value.
Style of illustration
Rapid asset creation
When we first experimented with the illustration style, the number one requirement was that the illustrations had to be quick and easy to generate, as they were not something we could put a lot of time and resources into. However, because of the need to show the what3words grid within many scenes, it had to be 3D. This is why we opted for a highly simplified isometric style. With isometric you don’t need to worry about scale or perspective; assets can be reused across illustrations, and (when you need a helping hand) isometric source images are easy to come by. It works as effectively at showing a group of user testers as it does for showing what3words being added to an ArcGIS mapping system.
Accessibility
Accessibility is a top priority for all UX and UI designers. We’re constantly checking contrasts, colour combinations, font sizes and more, to make sure our audience can use our products comfortably. This is often overlooked when it comes to illustration; subtle colours with low contrast are really common. This may be enough if the illustrations are just for decorative purposes, but when relying on them to communicate specific messages, this needs more consideration. This is why we’ve opted for a style of illustration with a blue stroke line around key shapes — the illustrations retain clarity even with complete colour blindness, or poor screen resolutions.
Brand communication
Another defining attribute of our illustration style is the strong colour palette. This is based on the what3words brand colours, which tie the illustrations to the rest of our marketing material. The bright and vivid colours give what3words an approachable tone.
Process
Our illustrations begin as scamps, rough, grey-scale sketches that are drawn on the iPad Pro. We use scamps to test the layout and concept of the illustrations, and quickly iterate them after sharing them with the team. This reduces wasted time — only the illustrations we are sure we want to use will get developed into high fidelity.
Once the scamps have been approved by the wider team, they can be developed into full colour illustrations. This is done in Adobe Illustrator, which allows us to export the illustrations as SVGs (scalable vectors). This allows the images to retain quality when resized, so the same asset can be used on small and large screen sizes. Creating illustrations as vectors means they can be altered quickly and easily, and can be turned into animations — something we’re currently experimenting with.
In summary, illustration can be a brilliant tool to enhance your brand and improve communication to your audience. Having the resources in-house can help keep turn-around time to a minimum, although there is an enormous pool of highly talented, affordable freelancers across the UK and the rest of the world that you may like to consider, as it can be done remotely.
The most difficult part of the information design approach to illustration is the translation — taking a complex or abstract concept and visualising it into something users can instantly understand. This can only be achieved with a deep understanding of your product, and this is worth considering when working with illustrators both inside or outside of your company.
Looking for a job with a purpose? At what3words we’re creating a global standard for addressing that makes a difference. We’re hiring for a range of positions, from tech to marketing and sales. Check out our open positions here.
