Inclusive Illustrations, By Design

I like to think that designers solve problems, while artists ask questions. And when the two go hand-in-hand, real magic happens. Why? Because the right question gets answered with the right solution — art asks, and design responds.

Here at Automattic we were extremely fortunate to recently get to partner with independent artist and designer Alice Lee, who seamlessly integrates abstract ideas with concrete solutions. The following is an interview with Alice that is followed by another interview with Joan Rho, the designer who led the project.

---

JM: How did you become an illustrator?

AL: My path is a little nontraditional. I was always an artistically curious kid growing up, but was never of the “stand-out art star” variety. Rather, I went to business school, and after graduating, I worked at Dropbox as an early product designer.

Some of my first few projects there involved designing for externally facing projects (new user education, onboarding flows, home & landing pages), and I found that adding illustrations really elevated my work — understandably, no one wants to read paragraphs of text describing file sharing. At the time, there weren’t any dedicated full-time illustrators on the team, so I decided to just do it myself, learning as much as possible on the side and receiving guidance from teammates. Eventually I transitioned over into brand and communications design at Dropbox, working full-time as a product illustrator. I left to freelance almost three years ago and have been illustrating since!

JM: I’ve found that many people confuse an illustrator as someone who is “good at drawing.” I’ve found that description to be terribly narrow-minded. Anything to add?

AL: That’s a really interesting question because it describes two key qualities to being an illustrator. The first is the technical ability to draw — one doesn’t necessarily need to be the “second coming of art,” but it is important to possess a foundation in basic draftsmanship. The second is the conceptual ability to think like a designer — as an illustrator, you’re interpreting challenging design prompts and figuring out how to present visual ideas that often represent complex topics.

Having one piece but not the other is extremely limiting; a great illustrator balances and sharpens both. If you have more of the technical art / draftsmanship piece, this limits the type of high-level projects that you can take on and requires a heavy hand by an art director to guide you through. If you’re more of a conceptual thinker but lack drawing fundamentals, it limits the way that you can express your ideas — e.g. perhaps you can only work in a few basic styles. It’s never so black-and-white, of course, but putting the two together in illustration yields high-quality, conceptually brilliant work.

JM: Having worked in the technology world for many years, what recurring patterns have you seen in the kinds of commissions you’ve been awarded?

AL: I’m excited by the fact that illustration has become a huge part of the tech branding landscape; so many companies are incorporating illustration as keystones of their brand. Companies are now developing their own unique illustration styles that build into their brand voice, exploring different mediums, differentiating themselves, etc.

This is exciting to me because I love to work in a variety of styles and mediums; it’s a great feeling to extend yourself as an artist. Many of my recent projects have involved building illustration branding systems in addition to creating the illustrations themselves, and I love bringing analog media and textures into a traditionally vector world. We experimented with this a bit on this WordPress.com illustration branding project, of adding a subtle, candid brush stroke to accent vectorized, precise shapes. With little touches here and there, under an editing eye, this interplay between mixed media does a lot to elevate what an illustrative voice is saying.

JM: Tell me about your commission from Automattic.

AL: This project had two parts: 1) the first, building out an illustration branding system: the voice and style guidelines for how to create illustrations that extended the brand; 2) the second, producing 50+ illustrations that expressed this style to be used for the product and marketing collateral.

We went through lengthy explorations of the illustration style: what brand did we want to express, and how could it be expressed visually? A key tension was in balancing the friendly, fun, accessible direction of the brand with the business need of still being professional and refined. In many ways, our final output reflects this: it’s a combination of sturdy, grounded shapes that fill out most of the composition, guided by the expressiveness and imperfection of linework that adds in quirky detail. The solidness of these geometric shapes is still tied in to the prior style of illustration used in the product, but the linework adds in personality, playfulness, and a hand-drawn quality.

JM: What was the same with respect to your past work for tech companies, and what was different?

AL: One thing I’ve noticed is that this balance of “warm, relatable, friendly, fun” and “polished, serious” is a common tension in past work for tech companies. I think this is due to a few factors: first, it’s a natural tension to exist when you’re trying to express complicated, often technical concepts via visually appealing illustrations. Second, though I work with each company’s unique brand voice, you can still see my personal voice coming through across all of my work: energetic, bright, and purposeful.

Something different that I loved was how the team uses the WordPress product to document and comment on the design process, because everyone is remote! We had a central illustration blog where I would post up each round of exploration, pose questions to the team, and receive feedback. At the end of each major deliverable, it was nice to look back on the progression and evolution of the style and work produced. It was a very structured way to document the process, which is lacking when your working files exist solely in emails or asynchronous chat tools.

JM: How did it feel to be pushed harder on the inclusion question?

AL: It was something that I deeply appreciated. We all carry our own internal assumptions and biases; and just like in design, assumptions should be challenged and improved with different perspectives, user research, and critical thinking.

For instance, John, you had just gotten back from doing user research in the field, talking to small mom and pop shops and individual entrepreneurs in the suburbs. In some early illustrations, I had drawn a lot of younger characters sipping coffee on their computers to illustrate people working on WordPress.com, and you challenged the “perfect latte / laptop world” that is a common backdrop in tech illustrations.

This made me realize that there was a whole range of characteristics I was missing from my internal definition of inclusiveness in illustration, due to my own biases: age, occupation, location, lifestyle, socioeconomic background, etc. I worked to place characters outside of the “perfect latte / laptop world,” drawing different backdrops in the larger scenes, expressing different jobs and backgrounds through props and attire, and including a section on how to depict age in the style guide.

JM: What is difficult about taking this direction? And what is easier?

AL: It is always challenging but necessary to address your own biases and assumptions in order to produce better work. In the above example, for instance, user research about who actually uses the product helped inform what the brand illustrations looked like — which in turn results in visuals that are more in line with the business objective of catering to the actual users.

It can be difficult because it’s also personal: the biases in a person’s artwork can also reflect their personal biases. Sometimes it can be hard to be challenged on that, but it’s necessary to acknowledge and no one is ever finished with this journey. I also think it is easier to start with inclusion and representation as core values than it is to tack it on after you’ve finished the branding process.

JM: What are your hopes for how people use this language you’ve produced for us?

AL: Artistically, I hope that this language can be extended and applied across the platform by many collaborators: designers, illustrators, animators, etc. I always love to see how a style evolves, and I also think it is really cool to have distinct mini-styles within a larger brand family — so that would be neat to see.

Socially, I hope that we can use these conversations around inclusivity to spark a larger dialogue in the illustration community about what it means to be inclusive in the work we produce. For instance, I personally rarely see people of color depicted in tech product illustrations (or, on a personal note, even Asian characters). When John pointed out the “perfect beautiful latte / laptop world” bias that’s common in tech illustration, I sat back and thought to myself, “you’re so right!” It made me realize some of my own assumptions about what should be depicted in illustration, and I hope that we can continually challenge each other within the illustration community.

Just like photographers, art directors, and designers, we as illustrators have the power to be thoughtful and inclusive in our work, to create artwork that shows people that anyone can use these products, not just a certain perceived stereotype of who “should” be.

---

I’ve found over the years that behind every innovative project launched by a company partnering with an outside artist, there’s a special somebody within the company who cared enough to make the case for doing things differently. That person, in the case of this project, is Joan Rho — one of our new Marketing Designers here at Automattic.

JM: How did you come by the work of Alice Lee?

JR: I’d seen Alice’s illustration work before and admired both the quality of her work and range of styles she was able to execute. After a brief initial chat with her about her work, her process, and learning that she was already familiar with our platform having been a longtime blogger on WordPress.com, I could tell she’d be a great collaborator who could help us elevate and unify our brand’s visual language.

JM: What is “design”?

JR: It’s communication, it’s innovation, it’s aesthetics, it’s optimization, and it’s strategic. Design shapes the way a message or experience is delivered. Good design is informed by human behavior—it makes things easier to use, more intuitive, and more enjoyable to experience.

JM: Can you describe the development of this project — from its conception to completion?

JR: Our company, Automattic, was founded on open-source principles: community, collaboration, and hard work. We’re fully distributed with our ~550 employees spanning the globe representing over 50 countries and over 76 different languages. WordPress.com, our major product in our family of offerings, is powered by WordPress, the open-source software project (which was co-founded by our CEO). WordPress.com has been around since 2005 and is primarily known as a powerful blogging platform. However, these days, you can use WordPress.com to do much more—such as starting a website for your business, creating a portfolio, or even just getting a domain name. So, as part of updating our message to communicate this better, we wanted our visual language to also reflect what we stand for and what we offer.

This illustration project was a collaborative effort that looped in many different members of our Automattic team spanning various timezones, cultures, and backgrounds. Some of our collaborators weren’t even designers, but one thing they all had in common was that they intimately knew WordPress.com and Automattic, which helped me greatly as a relative newcomer to the company. I had the benefit of working closely with Kjell Reigstad, a more veteran designer on the team, who was my “brand partner” in this project from the start. Kjell’s knowledge of our brand’s history helped us develop an illustration language that combined a geometric style in line with how we historically represented the WordPress.com brand with a newer, organic style that felt more distinctive and embodied our brand values and personality.

JM: What are a few turning points in its evolution where you saw “inclusion” coming into the picture?

JR: During one of our creative reviews, we were exploring the representation of human characters (which we hadn’t ever used before across our site pages or UI) and it was actually a comment by you, John, that initiated the discussion of introducing more diversity in skin tones, body types, hair color, age, etc. into these characters. Many Automatticians joined the conversation thanks to a prompt by Mel Choyce, sharing personal stories and pictures of themselves and their friends representing a wide variety of people, backgrounds, and personal styles. This provided inspiration for the diverse cast of characters you can now see across our brand illustrations. As a minority female who grew up seeing mostly Caucasians represented in media and design, it’s been very rewarding to help shape a more inclusive brand identity.

JM: When you consider our company, as a fellow newbie as we joined around the same time last year, what lessons do you take away from leading this project with Alice?

JR: Your best work will always be the result of collaboration. Great collaboration happens only with equal trust, respect, and engagement from everyone involved. Leadership isn’t about bossing people around; it’s about fostering an environment that encourages great collaboration.

JM: Any shoutouts for other designers who participated in this work?

JR: Shoutout to Alice Lee, Kjell Reigstad, Ballio Chan, John Maeda, Ashleigh Axios, Dave Whitley, Davide Casali, Mel Choyce, and all of the Automatticians who participated in the brand discussions and creative reviews throughout the process.

---

Yu can read the complete story behind these illustrations at Alice Lee’s site right here from the same titled post, Inclusiveness in Illustration.

---

Email Newsletter

Missing out on the latest WordPress.com developments? Enter your email below to receive future announcements direct to your inbox. An email confirmation will be sent before you will start receiving notifications—please check your spam folder if you don't receive this.

Email Address:

Follow

Join 110.1M other subscribers