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.

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.

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.
‍

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.

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.

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.
‍