Platform: Responsive web
16Personalities is a personality test and life coaching website that serves a global user base in 37 languages.
When visitors take the personality test, their test results include their personality type and an illustration that is associated with that personality. When that user logs in to the website, this illustration is used as their personal avatar in their account and on the community forum. Everyone with the same personality type starts by default with the same avatar.
I joined in 2017 as the sole illustrator on the team. I inherited a legacy illustration set of thousands of illustrations that, with the exception of a few illustrations depicting real-life famous people, all had white skin.
Shortly after starting, I was asked to do an illustration for an article on personality types around the world. I was looking at the color palette, which had one skin tone, and my only thought was, "I can't do this illustration without more skin tones to work with."
The 16personalities team is distributed around the world. I work in California with people from the UK, Russia, Bulgaria, and more. All of our work is done asynchronously. Since I was working with a variety of people from different cultures that I didn't yet know well, I wanted to collect as much information as I could about how the illustrations and color palette had arrived at their current state before jumping in with suggesting improvements.
After a few conversations I learned that the illustrations had been created by a third party design firm that was no longer working with 16Personalities, and everyone I talked to was excited about all the improvements we could make.
I collaborated with the company founder and other team members on an illustration improvement roadmap that we prioritized in this order:
1. Develop a diverse skin tone color palette.
2. Recolor all illustrations currently in use to diversify the main avatars and background characters.
3. Enable forum users to customize the skin tone and accessories of their own personal avatar.
4. Audit all illustrations of real-life famous people for skin tone color accuracy.
5. Expand the core set of avatars to include gender-neutral versions for folks who selected "other" for their gender in the personality test.
I developed the expanded color palette and created all original illustrations for this project. I collaborated on the feature roadmap with the company founder and other team members. I recolored the illustrations of famous people. Another designer helped with the recoloring of existing illustrations. Other team members incorporated the illustrations into the web application. I worked with our community forum moderator to collect feedback from users and she sent updates to specific people who had given us especially valuable input.
I developed nine new skin colors for a total of ten in the finished color palette. Skin color has three dimensions, color (spectrum of pink to olive), saturation (spectrum of bright color to grey), and tone (spectrum of white to black). For this project I used an average color and saturation and focused on delivering a variety of tones that still allowed for sufficient contrast with the dark gray color we use for eyes.
With the new color palette finished I was able to complete the illustration for our personality types around the world article.
These ten people represent the ten most populous countries in the world: India, the United States, China, Brazil, Nigeria, Bangladesh, Pakistan, Japan, Russia, and Indonesia. I didn't want to create stereotypes, so I searched for images of real people in these countries and based each person in the illustration on a person from photographs I found online.
Originally I thought that we should assign random skin tones to our main avatars that represent the 16 personalities. However, the company founder was concerned about this approach because the product depends on people understanding the intentional and meaningful differences between the avatars and the personalities they represent. We decided it would be confusing to assign random skin tones to each avatar and that we wouldn't want to insinuate that certain personality types were more likely to be one skin tone over another.
It also wasn't the right approach to leave the avatars the bright white color that they were, so we chose a medium tone for all of the main avatars and assigned all background characters skin tones at random.
For new illustrations, we also incorporated details of face shape, clothing, and backgrounds that would indicate ethnic and cultural diversity since representation is about much more than skin tone.
On 16Personalities community forums, users' comments are accompanied by their personality type avatar.
We introduced the ability for users to customize the skin tone and accessories for their avatar.
With the many personalities, multiple genders per personality, three to eight options for accessories per avatar, and ten skin tones to choose from, I created 1,870 unique illustrations for this part of the project.
Today over 90% of 16Personalities forum users have one or more types of customization on their personal avatar.
I reviewed all of the famous people illustrations on our site and adjusted skin tones for accuracy.
After updating these illustrations we searched user emails that we had received and sent a note to anyone who had written in with feedback about specific famous people illustrations being the "wrong shade of black," or similar sentiment. They were right.
Before this project, users who took the personality test and selected "other" for their gender didn't have an appropriately representative avatar in the system and were given a male avatar by default. I developed a set of personality-specific gender-neutral avatars for these users.
I started by working on concepts and I sent sketches to colleagues for feedback. I revised the sketches before moving on to digital.
I got more input from colleagues after converting the first round of digital illustration work. Most of the revisions involved tweaking avatars that leaned too much towards one gender or another and trying to get them to be as close to neutral as possible.
The feedback we got from our users was overwhelmingly positive. People really appreciated that we took the time to make our site inclusive for non-binary folks. In addition to reading feedback from our own users on our site, I also searched and found opinions elsewhere. Some people thought that all the avatars looked female but a seemingly equal amount of people thought all of them looked male, which I think is pretty good outcome.
This was a project to improve the diversity and inclusion of the 16Personalities site because it was the right thing to do. At 16Personalities we believe strongly that everyone is welcome in our community and our website needed to reflect that. Although the vast majority of users responded positively, we would have done this work even if some had been against it. Here's one of the messages we received about the changes:
"When I first used this website a few years back, I learned so much about myself. I was happy with everything.
I have been digging through the page again today and I just wanted to hold up the person (or people) who redesigned the website. The format is BEAUTIFUL. The illustrations are gorgeous. Everything is just so wonderful and it makes the experience 1000x better.
Thank you, 16personalities, for everything you do!"
- 16Personalities member
