Inclusive Design, Day 5/15: To See Yourself in Imagery

This is day 5 of 15 in a short series on inclusive design. If you missed the start, jump to day 1 here.


An inclusive design case study from the design team at Automattic.

Details matter for inclusive design, as noted in this item from the Inclusive Design Checklist found under the “Building including into designs” section: Choose copy and imagery with care.

choose-imagery-with-care.png
Screenshot from the inclusive design checklist.

As a practical example from 2017, I’d like to point to an inclusive illustration project led by Automattic designer Joan Rho with an illustrator named Alice Lee.

Quick scenario: You’re on your phone, going through the onboarding flow for a new app you just downloaded. Helpful illustrations appear, guiding and educating you through the process. Now hold up: are the characters in these illustrations diverse or mainly white? Do they seem to be young tech-oriented millennials, mostly men?

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…

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. — Alice Lee

Here’s the end result of the work to create a more representative set of illustrations, showing the English-language WordPress.com blog home page as a visual example.


Read a full project rundown on the WordPress.com blog: Inclusive Illustrations, By Design (May 2017).

inclusive-illustrations.png
The WordPress.com blog post explaining the project.

Alice Lee wrote up her thoughts on her site, as well: Inclusiveness in illustration — WordPress.com: Designing an Inclusive Illustration Brand.

alice-lee-inclusive-illustrations.png
Screenshot from Alice Lee’s post about the project.

If there is one takeaway I’ve learned from this project, it’s that it is challenging but always necessary to address your own biases & assumptions in order to produce better, more inclusive work.

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. — Alice Lee

To see a similar project from another company, check out Illustrating Balanced and Inclusive Teams by the Atlassian design team.

atlassian-meeples-2017.png
Screenshot of Atlassian’s updated “meeples” illustration library for 2017.

(And let me know in the comments if you’ve seen other examples of this type of inclusive design work elsewhere; I’d love to see it and learn more.)


Inclusive design considers everyone. Wouldn’t you want to see yourself in the imagery?

Starting from a high-level ideal is important — diversity and a broader representation — yet the finished product must reflect that vision down to the smallest design details.

For day 6 of 15 of inclusive design, I’ll dig more into recognizing exclusion as a starting point for better design and good business.


About this Inclusive Design series In about 10 days I’ll give a talk on inclusive design at WordCamp Phoenix 2018. Leading up to the conference I’m publishing notes on voices, stories, products, and other resources: everything I’m learning about this emerging practice. This is day 5 of 15. Read more about the series.

2 thoughts on “Inclusive Design, Day 5/15: To See Yourself in Imagery

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s