Designing diverse and inclusive avatars is hard (but important!)

CareerVillage.org has offered designed avatars for students for years and was at the forefront of offering diverse avatars (long before emojis got skin tones). When the time came this year to revise our avatars to match the revised design of the website, we dug deep into how to make them diverse and inclusive. Here’s how it happened:

Why change our avatars?

To show students that the CareerVillage community is trustworthy, reliable, and cared for, it’s important to present the most polished user experience as we can. That’s why CareerVillage.org has gone through several major design revisions over the years. The most recent avatar styles were lagging behind — almost design debt. Our goal with our avatar redesign was to make them more lovable and personable.

D&I matters in avatar design

Recognizing faces is hard-wired into the human brain, and we’re incredibly adept at identifying and processing small differences in human faces. If avatars are your users’ “face” to the world of your application, then underthinking your avatar selection can greatly set a bad first impression with users. Selecting an avatar is a deeply personal moment that forces you to decide what face you put to the world. The variety and styles of the avatars offered will say a lot to you about whether or not you are truly welcome and represented in that community. And because CareerVillage does not let students upload profile photos for safety and privacy, the avatar selection is an important (and mandatory) step.

Young people in marginalized or forgotten communities are often used to feeling unwelcome and unwanted online. A lack of diverse avatars plays a role in that marginalization. As an organization committed to equitable access to career guidance, we need all youth to know that they are welcome and appreciated.

For too long, the vast majority of avatar libraries available online were dominated by one skin tone: slightly-off-white. In year 3 of CareerVillage we convinced a professional designer to create a custom set of avatars in a variety of skin tones, all in occupation-specific attire. Our students of color loved that they were represented and could find themselves in the avatar set. What they didn’t always love was the sense that the avatars were “aged down” a bit too much. Basically, all young people reported wanting to look a little older rather than younger. After a major rebranding in 2017 that changed the site-wide color palette, we had to redo our avatars and tried a different approach: aging up the avatars a bit and using unrealistic colors on almost all avatars based on the CV color palette of mint and lavender. That worked well, with an interesting side effect where many of our students reported liking the “ambiguousness” of some of the avatars.

The realism-vs-variety tradeoff

We’ve learned from these experiences that the more detailed and realistic your avatar design, the more important it is to have a huge amount of variety. Humans are able to identify with ambiguous avatars to a great extent (but not to infinity: abstract shape avatars feel more like anonymity than humanity), but once you start showing eyes, noses, face shapes, and other facial details, people start to immediately recognize what is right and not right about their avatar.

To give a sense of just how much variety was needed, we spoke with our users and gathered their feedback on our first round of avatars. Here’s some of what we heard:

• “They all look too young.”
• “Why is everyone skinny?”
• “My skin color isn’t there.”
• “None of these look like me.”

This led to a continued expansion of the avatar set, resulting in 167 new avatars, and a template for more. Once you go even partly for realism, there’s no limit to the number of avatars you will eventually want to be supporting. Making a custom “avatar builder” is one option we considered, but it felt over-engineered for our use case, so we’re just working to make sure that our avatars are diverse and inclusive.

What comes next: Open Avatar

We’re open-sourcing our avatars, and we want to encourage you to both use them and contribute to the set. You can find the avatars and other useful information at www.github.com/careervillage/open-avatar and we hope you try them out. (Note: if this link is not live at this time, please check back in the next few days)

How you can help

Moving forward, we’re going to try maintaining our avatars as an open-source repo, to see if the community participates in submitting new and increasingly diverse and inclusive designs. If anyone in our community feels like they are not represented in our new avatars, please contact us to make a pull request! The work of creating diverse avatars is never complete, so take part by letting us know your thoughts!

We hope you will join us and thank you for using CareerVillage.org to give and get career advice!