Illustration in Product Design: Calculated, not cute.

“Ooooooh so you make those little pictures. Aw that’s sweet.”

“Wait. So that’s ALL you do? Like, you’re JUST an illustrator? Is that the ONLY thing you can do?”

You have noticed the “trend” of using illustration—if you haven’t, hit the pause button, check the popular page of Dribbble, and then get back to me. Airbnb, Dropbox, Google—that hella good new intercom marketing page—have all embraced illustration as a distinguishing part of their products. By Dribbble presence alone, illustrators are making their way into the way we design our digital world in a big way. What’s going on? Is illustration here to stay? Or is it fated to go the way of the long shadow and subtle texture?

Of course, illustration has been prevalent for years, we’re only now starting to take notice. It’s obvious why it is becoming more popular in recent years; straight up: illustration is likeable. You have a greater willingness to try new things when you like them. You are more understanding when things go wrong if you like them. But where illustration differentiates itself as a tool—and definitely not a trend—is its ability to communicate and to empathize. It can seamlessly distill abstract ideas to the core of what drives you to use a product, and articulate it thoughtfully and authentically.

Illustration tells a story

It’s easy to get lost inside the ecosystem of your own product. You can’t help but lose perspective when you spend your time agonizing over transitions and, uh, style sheets.. (yeah okay so I obviously don’t know what you agonize over… but I know you’re agonizing over *something* only you would notice. Hi. We’re all designers here). Explaining to your user why they should use your product; how it will fit into their lives; why it is definitely-for-sure not a waste of time to try your product over someone else’s; is out of reach. Illustration brings metaphor and story telling back into your arsenal of ways to share your product. It takes abstract ideas and articulates them in a way that we can relate to. It transcends the evolving digital landscape, unearths the real reasons that compel us to use a product every day, and finds a way to share them in a concise and relevant way.

Illustration communicates your values

Articulating and communicating brand values are a critical part of any lasting product. Borrowing from the qualities of any successful brand; we know it must be memorable, unique, and timeless. We know a successful brand has a personality; traits and values that a consumer relates to. But a product is not a brand. A product is a tool (with a brand). A tool with limited screen space and competing goals. “Memorable, unique and timeless” arguably can be accomplished smoothly with the right product design. Communicating the traits and values is decidedly more challenging. With usability at the helm, and every pixel coveted by each emerging feature, brand values often take a backseat.

Illustration can capture the brand values, and deliver them back to the user. It gives the user something human to connect to, through an authentic interpretation of the principles the brand was build around. It confirms that there are real people behind the product. The loyalty built out of shared values and human connection consistently lead to a richer and more lasting relationship.

Illustration has a voice

Within your product, your audience can change. Their tasks can vary. Their emotional states fluctuate. We’re pretty good at anticipating the emotional state of our users, but articulating our empathy to that emotional state remains a challenge. How do we reach out of the screen and say we get how frustrated they are? Or, how do we share our sincere delight in our users successes? And then, how do we do both in the same breath? On the same platform; With the same UI; and remain meaningful and connected?

Yeah I mean you knew where I was going with that. Illustration has a voice. Like any voice, it can change in tone and volume to reflect the nuances of a given situation. When you anticipate emotions, and adapt accordingly, the user is more attentive, and receptive to the information you’re trying to give them.

Illustration catches your user

I’m not sure why 404 pages and error messages got allocated to the “not our problem” “deal with it if we get a chance” or if you’re lucky “funny easter egg” corners of the web. I mean, talk about pain points. We send entire teams of UX researchers to watch eye trackers and make sure the button is in the right place, but skip explaining why LITERALLY EVERYTHING just went wrong. I’m pretty sure half my friendships are just shared PTSD of an unexplained adobe crash.

Not taking ownership of these moments is bad design. They’re the I-completely-forgot-what-the-experience-was-up-to-now; I’m-telling-everyone-this-sucks; I’m-switching-to-Sketch moments, and we’ve been slotting them into the “I guess if I find the time” section of our to-do lists.

There’s nothing we can do about software breaking (well we can, but let’s assume somebody is already working on that part). All we can do is own it when things go wrong. Adding an illustration takes your product from saying “You’re on your own.” to “I got your back.” It’s a chance to talk to your user. Illustration creates an intimacy that communicates sincerity in saying “we’re working on it” or “we understand that this software is your livelihood”. It’s an opportunity to take your user out of a frustrating situation, and lead them back into a positive experience.

Illustration guides your user

Yeah so we said “I got your back” when the software failed. What now? Illustration can lead your user back to the intended use of your product, or guide them to new features. It can turn an empty state message into a learning opportunity, taking on an on-boarding role and teaching the user the links between concepts and the product specific jargon we’ve assigned them. It can guide your user through the workflows, or explain abstract ideas or processes. It creates an welcoming atmosphere where you can speak directly to your user, and makes them more receptive when things are complicated.

Illustration completes the designed experience

If I can’t win you over on anything else, I know I can catch you on follow-through. A finished product. No loose ends. An experience that was thought out and designed from start to finish. It’s designing for edge cases and alternative needs. It’s expecting your user to be curious and explore, and then meeting them on the other side with all the delight and warmth they’d hope to experience in a potentially unknown space.

I’m not saying that everyone needs to start drawing all over all their products. Illustration is not always the answer (actually it’s a pretty inappropriate answer a lot of the time). But to ignore illustration as “cute” instead of “calculated” does your product a disservice. When used correctly, it’s a powerful tool that augments your content, and closes the gap between you and your user, making it easier to seamlessly communicate and ultimately leads to a better experience.

*Bonus Waterboy metaphor I obviously couldn’t make work, but also couldn’t cut due to unforeseeable circumstances (aka I said I could do it):
Okay so it’s like.. If UX is the Louisiana State Mud Dogs, then brand is Henry Winkler and illustration is Adam Sandler (without the anger issues). Sure, we’ll bring you some icons if it means we can be on the field. But Coach knows we’re a powerhouse. Just let him put us in the playbook, he knows when to call us off the bench. Suddenly we’re winning the bourbon bowl and you’re looking at the MVP. Or something like that. Okay, so sports metaphors are not my thing (& I don’t really remember how it the movie ends, if we’re being honest).