A behind-the-scenes look at researching, concepting, and creating an illustration voice, system, and custom 40+ asset library
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.
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 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.
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!
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
Step Four: Applying a product design lens to our system
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. ♥
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.
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!