Character, process, & heart: Creating Slack's illustration voice

A behind-the-scenes look at researching, concepting, and creating an illustration voice, system, and custom 40+ asset library

When Slack approached me in January 2017 to create an illustration voice and library, I was excited to experiment.

Although Slack is an enterprise tech brand, I wanted to look outside the tech industry for inspiration. If our goal was to create a brand that's warm, friendly, and distinct — why not study how the animation industry designs characters, or how simple visual narratives are constructed in publishing? By diversifying our inspirations, we not only learned a ton but crafted a voice that at the time was fresh and unexpected.
Since launching in 2017, this aesthetic has become a trend in the tech industry. I don't think that's a bad thing in itself. But I do believe that to create an illustration identity that's distinctive, new, and powerful, it's important to take an intentional, process-driven approach.

In this case study, I'm going to take you through my approach to researching, technically analyzing, and incorporating warmth and character design into Slack's illustration voice.
Know your references

Step One: Research & Moodboards

When we kicked off the initial moodboard phase of this project, we were guided by our highest-level values: to create an illustration voice for Slack that felt warm and friendly but polished and sophisticated — and not stock. I gravitated towards story-driven fields like animation and publishing to learn about how they achieved this balance.

We learned so much. I referenced much of Mary Blair's legendary body of visual development at Disney for designing warm, whimsical characters. And it was hard not to fall in love with the "minimal realist" compositional balance that Charley Harper strikes, particularly in his advertising and publishing work. The history of illustration is filled with rich references like this for us to study, and I was excited to bring in some of these cues into tech enterprise illustration.

Initial moodboards: Illustrations by Charley Harper (top left, bottom right) and Mary Blair (top right, bottom left). Just see how they combine sturdy, stylized characters grounded in realism with ultra-minimal, stylized linework to create these deceptively simple visual narratives. Gah!

More moodboardin': Some of my past illustrations done for Slack's blog (2016-2017)

Slack Creative Director Brandon Velestuk mentioned wanting these illustrations to feel  "Slack-y." Fortunately over the last three years, I've had the pleasure of working with Slack in various capacities , from product UI illustrations, to editorial blog posts, to internal events and large ice cream trucks.

As such, my recent editorial pieces for the Slack blog, done in my personal voice, served as natural starting points as well.

Voice & Concept

Step Two: A two-part approach to creating the system

With our moodboards, research, and values in tow, the next step was to begin the exploration process, keeping in mind our specific use cases and needs.

With product illustrations in particular, constraints include balancing limited screen real estate, a specific call to action, and the user's limited attention span on digital. Product illustrations also need to immediately grab your attention as compositionally quick reads with a specific, pointed message.
This illustration, is designed to fit a specific product screenshot both in composition (framing the searchbar UI) and content (illustrating the concept of "search").

With that said, we couldn't simply take my more colorful, lush editorial work for the Slack blog, drop it into the Slack product UI, and call it a day — as it would have totally overpowered the surrounding screen real estate. A successful product illustration has intention and can't be swapped around like a stock image.

But we can study the principles of what works from our inspirations, in crafting our own unique voice. For example, two qualities that I loved about Charley Harper and Mary Blair's work were their deceptively simple, intricate compositions and bold, punchy use of color. I took some of these cues and applied them to my earlier Slack editorial work as a starting point.

Early color explorations

Here's an example of how we incorporated some of these cues. You'll notice that both Mary Blair and Charley Harper's work (as well as work from the animation and publishing industries in general) make excellent use of color: warm, whimsical, and bright. Both fields include younger audiences, so this makes sense. In these earlier explorations I experimented with some of these more unusual colors, like bright yellow and neon pink. However, given Slack's position as a professional enterprise company, going "full storybook" in palette wouldn't have been entirely appropriate. Simply adding darker colors (e.g. purple and deep blue, as seen on the right) creates a sense of groundedness and balances out some of these more whimsical color cues.

I find it valuable to always focus on voice and technique ("how" we draw) first rather than get bogged down in the concept ("what" we draw). Putting on our product manager hat, it's more efficient to isolate this one variable first — to first take a somewhat generic concept and use that as a base for stylistic explorations.

For example, in the below illustration, I used the stock concept of a female character at her computer (the "what") as a vehicle purely to explore color and style (the "how"). You can see how the tone of the illustration changes when we reduce the number of colors in the palette and increasingly stylize the characterization of the figure, again taking cues from the whimsicality of children's illustration.

Voice ("how" we draw): Quick explorations from sketch fidelity to color. Close, but not quiiiite there!

After several rounds of this exploration, we'd translated our broadest high-level brand values into tactical illustration-level ones, e.g. character-driven, gesturally hand-drawn, with a bold primary palette.

By this point, we were a month into the process (March 2017), and I felt comfortable taking this voice and moving on to tackle some of the most important pieces of our library. In this case, the highest-leverage illustration was for the homepage. Below, you can see several of the sketch iterations made while refining the concept.

Scribbly sketches ("what" we draw): Early sketches for the homepage. Some of these sketches were also used for other pages.

I think this is a good example of how continually iterating in the sketch phase can lead to the final result, as ultimately none of these sketches captured the final artwork for the homepage. The final illustration for the homepage is below, though, and you can see traces of the initial concepts in the final output — which we wouldn't have gotten to without the three rounds of sketch ideation prior.

Final artwork: Final illustration for the slack.com homepage, and one of the first assets we created for the library

In sum, my process here generally encompasses two parts: 

1. Let's figure out the rules of the universe first, and
2. Once we have a grasp on that, then we can start building out the rest of our world and filling it with characters.

Ultimately, I think you can trace the influences of Mary Blair and Charley Harper, and the principles behind their work: expressive characters; organic, imperfect shapework; bold colors and warm tone, etc. — and I'm happy to have incorporated some of the whimsicality of animation and children's publishing into enterprise tech illustration in this way.

Sketch
Final
Hello, world

Step Three: Building out a 40+ illustration library

Working with Slack's internal design team as well as Ueno designer Gene Ross, I then illustrated 40+ separate illustrations for Slack's library, from headers to tiny UI spots. You can spot 'em all over slack.com!

Slack University header & spots
Variant homepage headers
Slack University header & spots
About header
IT and Security header & spots
Fun fact: The terminal window (far right) was inspired by my studiomate Amy's Fairyfloss editor theme

Working with Alice was one of the highlights of my year — the excitement she brought to the project was matched only by her sheer talent and ability to bring ideas to life. Alice's speed and precise execution made working together a breeze and really brought the project to another level. 10/10 would work together again.


Gene Ross, Design Lead at Ueno

Getting nerdy with components

Step Four: Applying a product design lens to our system

Another interesting aspect of designing an illustration system is considering all of the different contexts that these illustrations will sit in. In our case, we adapted many of our illustrations to more elegantly fit on smaller screens. I also created a modular system of tiny spots, blobs, and patterns that could be added to oft-overlooked contexts like menus, navigation, and footers.

Having worked as a product designer before becoming an illustrator, this is an aspect of product illustration that I rather (nerdily) enjoy: thinking through all the different non-obvious flows, edge cases, and constraints that these illustrations will eventually sit within, like finding the corner pieces to a puzzle.
Lil UI spots, elements, and patterns

Thank you

An amazing team of engineers, designers, copywriters, etc.  built the the live slack.com, and I was able to work with the talented Slack and Ueno design teams to develop and ship this illustration library. Here are some of the wonderful folks that I most immediately collaborated with:

Kristy Tillman, Creative Director (Slack)

Brandon Velestuk, Creative Director (Slack)

Rosie Bubb, Designer (Slack)

Gene Ross, Designer (Ueno)

Thank you to Slack and Ueno for this opportunity. ♥

Addendum · back to top
Two approaches to illustration

Additional thoughts on the evolution of illustration in tech and where it's going

You made it to the bottom! Give yourself a pat on the back.

The landscape of tech illustration has gone through exciting changes in the last few years. This is a short reflection on that, to be followed by a more in-depth analysis of tech illustration to come. (Sign up for my newsletter if you'd like to receive updates)

Our industry is young, especially compared to the storied fields of publishing and animation — and as such I believe we're only scratching the surface of the amazing potential that illustration can offer to tech products, brands, and experiences. Because many of us are steeped in this context everyday, we often don't notice it, but things change quickly.

For instance, let's take a look back on the trends du jour of illustration in 2015-2016 (below, left): structured, blockier line-art; Bauhaus-inspired, vectorized geometry; and faux-skeuo 3D.

Then & now: Here's what the Dribbble popular page for the #illustration tag looked like a few years ago, to what it looks like today.

Contrast that with where we are today at the end of 2018 (above, right). Even at a quick glance we can see that there have been big shifts: character-driven, much more narrative, lush, and colorful.

When we kicked off this project with Slack in early 2017, the industry was somewhere in between these two worlds. Given the uniqueness of Slack's brand, I wanted to create an illustration voice that was totally unexpected at the time, and custom to their brand needs: warm, friendly, polished, and at times quirky.

Since then, the best of tech illustration has become more character-driven, thoughtful, and inspiring (see the creative, unique work being done by standouts like Airbnb, Mailchimp, Dropbox, and Facebook). At the same time, some have argued that the overall landscape has become more homogenous. I think this is fair — I am often approached by companies who simply want me to reproduce work I've already created for past clients' specific brands (indicating a misalignment with a brand values-driven approach to creating these systems). So how do these two ends of the spectrum co-exist?

I believe there's a time and place for both types of work — illustrations as stock components, and illustrations as intentional, complex extensions of your specific brand. I completely get that companies in different stages require different approaches towards illustration thinking. As your company and its brand matures, so can one's degree of specificity, technicality, and process around illustration thinking.

The best way to move towards the latter — and avoid falling into the trap of whatever is trending at the time — is to start with a process-driven approach that focuses first on diversifying your references, pulling learnings in from other fields as well as the history of illustration, rather than looking to only the industry immediately surrounding us.

Really awesome things happen when we look beyond our immediate peers, competitors, and industry for sources of illustration inspiration. ♥

Thanks for reading this far, and if you're interested in reading more illustration case studies or my additional thoughts on this, please sign up for my newsletter and I'll let you know when I send 'em out! 

Next, read about: