Drawing Meaning: The Case for Illustration in UX

This is an article that I have published first on Linkedin in 2019.

Illustration is not getting enough attention as part of the User Experience.

I'm an illustration fan; scrolling down my illustration-ridden Pinterest feed is my visual comfort food. And I don't know if it's only my impression, but I have been missing an in-depth conversation on illustration in the UX community. Animations, gestures, flat and material design are widely discussed, but illustration seems to be left out. Recently I had the chance to reflect on this relationship between illustration and UX by giving a talk in two UX meetups, so here I present some of my insights, in the hope that it will motivate fellow UX designers to consider illustration not as an enhancer but as an integral part of UX.

I see Illustration as particularly influential: it gives me the 'wow', feel-good boost for a product I see for the first time or one I use every day; it informs me that 'we are smart and elegant' or 'we are poor, just starting out' or simply 'we have a bad taste and copied others'. This applies to both digital and physical products alike. A plain tap water bottle, from commodity becomes an expensive product with a story, once a tastefully illustrated label is attached. Advertisers know that; an illustration can tell a story of freshness, purity and wellness in a deep visceral level.

Illustration is coming from the analogue world and has seen glorious moments of ingenuity in the press. In fact there is hardly any industry, illustration has not been a part of; wherever there is content creation, advertisement or packaging of products and services, illustration is present. Illustration creates a feeling of delight and even luxury to the viewer. Think of the full-page illustrations of glossy magazines or the Google celebratory doodles; their goal is to make the viewer stop for a second and be delighted by the view, just before she dives back in her mundane tasks. Illustration weaves the branding and the aesthetics of a company inside a meaningful, positive picture.

Google Doodle for 2019 Women's World Cup – Day 21 : this Doodle portrays the excitement of women's football, wrapped in Google aesthetics, in a way that sparks the interest of viewers that otherwise would be indifferent to a women-playing-football image.

As UX designers, we are looking for visual solutions to abstract problems. Have you ever thought of your wireframes as a piece of geometric abstract art?

The snail, Henri Matisse, 1953, Tate Gallery London

We too aim for visual harmony and we are in charge of creating the frame for it. We design the visual hierarchies and the containers to enable copywriters, designers, developers and business analysts to add content. Being the ones in charge of the overall visual plan, we also define the space for illustration and visuals and their contribution in meaning. And we mostly assign a supporting role to them.

Illustration is often used as a filler material for an empty space.

And I want to challenge this idea. Why the illustrator is invited last in the conversation? What if we gave illustration an equal seat on the table in UX? After all, we create experiences and interactions with value, that the end-users assign anthropomorphic qualities to. In a way, we are creating a character in a movie, a little assistant in the life of the end-user, the protagonist. If the character's behaviour is defined by UX designers, the character's dress shall be defined by visual artists. Or, alternatively, with a little help from a stock photo repository? :)

By praising illustration, I do not imply that photography is a bad option. Authentic photos might be what the visual identity of a particular project asks for. But when we are early involved and have the chance to co-create the character of our users' assistant and its costume - what an opportunity! - we can explore illustration as a visual pathway that can create delight and build a relationship with your end-user. The use cases below illustrate (pun intended!) happy symbioses between illustration and UX.

Illustration sets the ambience

Wealthfront offers automated (robo-)investment services targeting mostly millennials. For their header, they made a pro-illustration choice. They had many options: they could choose to show playback videos of people appearing successful in suits, or a carousel with statistics of how well they've done with their clients, you name it. How this choice serves their purpose? Their header communicates a feeling of calmness, which can be the result of a good investment plan. The illustration exudes a relaxed holiday mood and flawlessly merges with the tagline and the surrounding elements. The login button, the intro to your investment portfolio, is close to an idyllic sky with palm leaves, that is literally out-of-this-world. Under the header, strong stylistic choices are made: more punchlines and cards laying out the numbers.

Illustration communicates a vision in a poetic, imaginative way.

Slack makes deliberate use of illustration. In the description of their core values, the illustration is the dominant visual element. It carries the flag with the Slack colours and shows three people riding the same bike in a minimal, green environment one sunny day. The flag is a tribal symbol and suggests that there is a strong Slack culture. The people riding the tandem bike represent collaboration and synchronisation. The minimal ambience, greens and sun, and the activity itself, biking in the nature, communicate joy and flow (it would be different they drove around in the city). The illustrator managed to encapsulate a vision in a concise manner that create associations of values in us in an emotional level, stronger than any text could achieve.

When we see the image, the associations are being created inside of us, they are personal, they are experienced. By reading the values, we understand them in an intellectual level but we don't experience them.

Visual Concept first, illustration second, content third

Dropbox underwent a major rebranding in 2017. Their new corporate identity is a unique and bold visual concept based on strong contrasts, strong typography and a division that almost dictates the look of every visual, at least in the homepage. On the Dropbox homepage, one can't fail to notice that the visual concept comes first, then the illustration and the content follows. This page doesn't focus on functionality or usability (because then why this font and why this contrast?) but on creating a strong emotional connection with the user. Prioritising the visual aspect, can serve a purpose for a brand, even if the product you sell has little to do with art and creativity.

There are a few more interesting use cases I share in my Workshop and would like to talk about in a future post, but for now, I hope you got some ideas. My purpose was to increase your sensitivity to illustration as a unique User Experience tool, because of its ability to induce emotions and create imaginary ideal worlds. I would like to hear from you, your experiences of shaping UX with illustration and in particular:

Did you ever have the dilemma photography vs. illustration and how did you go about it?

Meanwhile I am breaking down the illustration process for product managers, researchers and other professionals in many different fields, so if you are interested, hit me up here.