UX design and the case for illustration

A UX designer’s process more or less follows this formula: interpret user research, make design decisions, then apply a visual language. The ‘visual language’ part of the process is often based on the brand elements or guidelines that we’re given to work with — we choose a button style and a font colour, a type hierarchy and a set of icons, but sometimes this is not enough.

Illustration is something I often use in my design work as it can be a useful tool to solve design problems. In general, it’s a powerful tool in design, but I also believe it can be an especially brilliant specialism in the realm of UX design, especially when we apply UX thinking to illustration practice.

We’ve started to tailor illustration specifically for digital experiences, making them more usable, more memorable and generally more awesome — and the results have been incredible. What follows is why I believe illustration has such a positive effect, and tips for when it should be considered during a design process.

Illustration is a visual aid to the UI 

People are skim readers! Be honest — how often do you take the time to read the three main features of a service on a website homepage? Similarly, how often do you read through the entire tutorial section of an app?

When I land on a web page for the first time I do an up-down-speed-scroll to get an overall impression. If I can’t work out roughly what the company is based on in this initial swipe, I’m not necessarily sticking around. Harsh, I know — but at this stage of a user’s journey, time and attention spans are incredibly short and investment is low.

Illustration is an efficient way to convey a piece of information or a concept at just a glance, so it can provide a nice solution to this problem. Illustration works especially well when your service is relatively complex — the use of metaphor is a common way of explaining a concept in illustrative practices. For more about why illustration is so great, check out ‘Let’s talk about illustration‘ by Emily Trotter.

Also, let’s not forget the discipline of designing for tiny 320px wide mobile screens. The amount of screen space we have to play with on mobile is so low, sometimes it’s tricky to communicate everything we need to. Long paragraphs of content certainly has its strengths in an article context, but within an app or website, it can be problematic for users with cognitive impairments, such as dyslexia. Are you using a whole screen-length of copy to explain something? Pop in a simple illustration to explain it and you can cut that copy all the way down to its roots.

Let’s say, for instance, a web page’s main purpose is to explain a delivery process. Here’s an example of a text-only approach verses one where illustration has been used to explain the concept — this is often not something that can be easily explained with text in a succinct way.

Project tip: When you come to the wireframing stage of a project, get a team together of a Copywriter, Researcher and Illustrator (take a read of ‘The Power of Three’ to find out more). Discuss the possible layouts of the design at this stage; get estimates for character limits and available space for illustrations, and pinpoint where it would be useful.

Illustration has got your back, through good journeys and bad

There are two things that as designers we have to deal with: managing pain points and creating delight through the design.

Some say that Delight™ is achieved thorough good usability. Of course usability is the aim, but really delight is in the details. It’s a little *pling* made when you collect a cartoon coin, the incredibly satisfying alien animation when you pull down to refresh reddit, and the little heart that goes *pop* when you like someone’s work on dribbble. It’s like a little endorphin release in your brain that communicates something while also feels like a reward for good behaviour. Illustration, animation and sound are absolutely key to creating these beautiful little moments that make an experience. Perhaps UX illustrators should take more responsibility for creating them.

Illustration is also a great way to soften the effect of pain points in a journey. Error messages, final purchase confirmation screens and loading screens are excellent examples of where this is commonly done.

The fact is, illustrations are likeable. Seemingly inaccessible topics and complicated processes can be simply explained and warmed up just by using supporting illustrations. They create a playfulness and overall nice vibe that can leave a huge impact on someone’s lasting memory of an experience. It’s one thing to create a usable experience, but it would be pretty remarkable to create something that is also enjoyable and memorable.

Project tip: The trick is to identify the opportunities early so you can allow for illustration in your design. The next time you are making user journeys, get an illustrator involved. Work together to include the user’s emotional needs/internal monologue at every stage so that we can easily understand and identify pain points. Once we have those, we can set recommendations for where in the journey illustration would be most valuable.

Illustration boosts brand identity

Stock photography can only add so much personality to a brand. In contrast, a brand can be drastically improved with the addition of unique, custom-made illustrations. It’s common for a brand to commission illustrators whose work fits their brand image to further distinguish them from the crowd, and this kind of activity can absolutely be translated into the UX design of a digital experience — and it can be provided by a single Illustrator or Illustration team.

We have worked with a few clients to do this — sometimes with new brands, but mostly with brands that already well established and well-known. It is possible to have multiple styles of illustration under a brand identity — but using our knowledge of the specific needs of the user interface, we have more to guide us towards a particular one. For example, will the images need to look like a diagram, or use character design? Will they need to be animated? Will they need to fit into small spaces? All of these things will dictate how it looks.

The most remarkable result of the use of illustration has been an increase in trust and comfort levels of users. Due to the fact that most people are fond of illustration, they found the brand to be trustworthy and friendly when we asked their opinion. Such use of illustration has actually altered the user’s perception of the brand, and to do this on the true interface between a company and their customers could potentially leave more of an impression than traditional advertising might.

We have evidence that illustration works

Thankfully, this isn’t just a theory! We’ve recently been putting our illustrated journeys through usability testing, with some pretty interesting results.

Gauging and interpreting how visual design affects an experience is an art in itself — one I will cover in a future post— but the results are visible. We tested illustrations on loading screens, as brand character design ‘mascots’, in error states and on final payment screens. The results found that when illustration is integrated well, our participants were fond of the experience even when there are clear usability issues. An emotional connection is forged between the user and the product, making them more trusting of the journey and more willing to forgive long load times or errors.

We’ve also begun to test the effect of different illustration styles on particularly sensitive, specialist audience types so that we can develop a style that makes them feel more comfortable. Rather than simply commissioning a piece of artwork for a specific audience (as would normally be the case), we have used testing to develop a style over time into something that works, which is an infinitely more valuable and rewarding process.

More illustration in UX!

This is still in its early days — the full extent of the benefits of using illustration in UX haven’t yet surfaced, but it’s a pretty amazing start! Through more discussion, more testing, and more opportunities to explore illustration in projects we will find out the full extent of its value.