WordPress.com: Designing an inclusive illustration brand
I love that illustrations have become such a key part of the tech branding landscape. But here's an observation: tech illustrations often feature the same sets of things: young, white people (usually men), surrounded by gadgets, with a cup of coffee, in a beautiful tech world.
For consumer-oriented products, this creates an incredibly limiting and exclusive brand image, unless you are solely targeting city-dwelling, coastal tech millennials.
One important way we can address this is by creating marketing and product imagery that is more representative and inclusive.
When the WordPress.com design team asked me to develop their illustration brand and 60+ product illustrations, these values were a major focus of the project, especially as part of their mission to democratize publishing.
Building a character set
Starting out, we wanted to approach the design of the characters to include different body types. Because our characters are stylized and not anatomically precise, I expressed this abstractly — from square, angular blocky figures to rounded, curvier ones. I built a range of complementary skin tones into the color palette as well, instead of relying on white as the default skin tone color.
To further include racial and cultural diversity, we explored a range of physical features — face shapes, hair style, expressions, etc.
This may all seem purely symbolic, but Diógenes Brito hits the nail on the head about what this optically communicates in his write-up about using a brown hand in Slack's "Add to Slack" button feature.
The team continued to challenge any preconceived ideas and biases about what inclusion meant — I learned so much through their invaluable feedback. For instance, Mel observed that our initial character set was filled with very binary-identifying characters, leading the team to discuss gender fluidity and incorporate gender-neutral characters as well.
User research is also another useful way to spot your biases. After field visits out to real users, John made a great point about how depicting your typical illustrated "latte / laptop world" comes off as very exclusionary to a huge part of the audience that don't exist in this flashy sphere — mom-and-pop shops, individual entrepreneurs, small / medium businesses, etc:
— John Maeda
With that in mind, I developed a series of lightweight line-based backgrounds, illustrating a variety of lifestyles and settings, from workshops to a living room — careful to avoid only depicting tech workspaces. Further dimensions pushed in exploration included occupation, personal style, attire, age, lifestyle, socioeconomic status, etc.
Using these guiding principles of inclusivity, I extended these explorations into a system of characters and avatar templates that the team can pull from in the future, from large to small, for contexts ranging from headers to spot illustrations.
“A line is a dot that went for a walk”
With feedback from the team, this approach was refined down to look less cartoon-ish and a bit more mature, as a huge part of WordPress's audience is comprised of businesses. The above shows a bit of that progression in balancing line against shape. Shapework is used to groud most of the composition, and linework adds in detail as well as a bit more personality.
This project was a true joy to work on! One of my first experiences learning how to design and develop was with my first WordPress blog, back in high school. Friends can attest that I was a true power user — a Teenage Girl Blogger (that's what I called myself); I wrote every day and WordPress.com is one of my favorite websites. As such it was really neat to be able to come back almost a decade later and contribute in the form of illustrations and branding — full circle, almost.
This was also an incredible learning experience with respect to the lessons in inclusivity. It's by no means a finished product or a checkbox to tick off and forget about; it's a constant work in progress, and I'm happy to have grown along this spectrum.
Special thanks to Automattic designers Joan Rho, Kjell Reigstad, & Ballio Chan as well as the WordPress.com & Automattic design teams!