Designers have good intentions, but small overlooked details can subtly reinforce concepts that exclude certain people, even if your company preaches diversity and inclusivity. Sometimes we get so focused on making pixel-perfect designs, adhering to a particular color scheme, and making great UI that we forget to look at deeper implications of what we design and how it might affect specific groups of people. Listed below are a few examples of designs I’ve seen that may make people feel excluded from your brand and company.
1. Lack of diversity in stock photos.
Stock photos are a great way to show the culture of your company without hiring a photographer. However, be careful when selecting photos. Don’t just look for people who are happy-but-not-overly-happy-because-that-looks-fake— also remember to include diversity in your selection. Excluding people of color from stock photos implies that your company doesn’t value diversity. Implicit racist bias is still a problem in the workplace, and there’s a push for companies to do more to promote diversity in the workplace. If your company emphasizes diversity but that sentiment isn’t represented in the stock photos, it sends mixed messages. The stock photo you choose can even negate the content that you’re publishing, as Rob Humphrey, Senior Account Executive at LinkedIn, explained in this post.
2. Maleness as the norm in icons.
Caitlin Winner, design manager at Facebook, led the initiative to change the Facebook friends icon after discovering that it featured a male silhouette in the foreground and a smaller female silhouette in the background. She redesigned the icon to make the male and female icons the same size. By not making one particular gender seem like the most important one, Caitlin’s new icon promoted gender equality. As content consultant Lindsay Patton wrote here, simple imagery can have a big impact on people.
If you’re making a website and showing different icons for different resources, and all of them look like men, you’re subtly saying that your product is geared at men and not women. This might work if you’re selling a product just for men, but otherwise, you may be unknowingly pushing 50% of the population away from your company.
3. Making America the default.
When you’re choosing a globe icon, most designers automatically choose one displaying the Americas, or more specifically, the USA. Especially for US-based designers like myself, it’s automatic to only look at things from our perspective. One relatively simple way to fix this is to have a few different globe icons that change based on the user’s location. Facebook Software Engineer Brian Jew and Facebook Product Designer Julyanne Liang worked together to design new globe icons for users not in the American half of the world. If you’re in Asia, why would the globe icon on your profile have the Americas on it instead of the part of the world that you live in?
4. Not accounting for color-blindness.
If you’re a web developer/designer, make sure you test your website for color-blindness. The easiest way to do this, as explained here, is to make sure that colors are not your only method of conveying important information. In the above example, the map of the London Underground should use another way to get the information across to people who are color-blind. This could be in the form of alt text, different line types denoted in a key, or text in the web page that supplements the color-dependent method. There are many online resources you can use to easily test your website for color-blindness. This contributes to a much better UX for these users and allows you to clearly communicate your information.
5. Accidentally portraying hierarchy when there isn’t one.
I was looking at a company’s website the other day, and they had photos of their nine executive board members in a 3×3 layout. One was the president, and the other eight were VPs of various departments. The president was male, four VPs were female, and four VPs were male. However, the way they were arranged had all the women on the bottom. This was just a coincidence, as the VPs were alphabetical, and the men all had last names that started earlier in the alphabet than the women’s names did. But most people aren’t going to take the time to check the order of last names. Since the rank of the VPs is unknown to an outsider, it would have been easy to rearrange the VPs. Aesthetically, it looks better, but more importantly, it sends the message to women that they can be successful at this company. Otherwise, it looks like men run the company and that even the women in charge are still less powerful than the men. It implies that women at this company can be successful… but not *too* successful, as those roles are reserved for men. Little design tweaks like rearranging their photo order (still keeping the president first, of course) emphasizes your company’s diversity and opportunities for success.
…does any of this actually matter?
Maybe you’re asking yourself if this is really matters, or if anyone is actually going to notice or care if an icon is male or female. But as a designer, you have the capability to make people feel included or excluded by the steps you take in your design. And especially if your company preaches diversity and inclusivity, you don’t want to send mixed signals about your values by contradicting them in your design. A little effort can go a long way.