The transition from skeuomorphism to flat design. Apple’s retina screen. The unification of Android under Google’s Material Design. The rise of design thinking. Augmented reality and virtual reality. The swipe gesture. There’s no doubt that recent years have seen an explosion of tools, methodologies, and tech in the design world. We’ve made light year advances in just the last decade but, unfortunately, there’s one area where we seem to be stuck in the pre-computer days: Diversity.
Most major companies — from tech startups to the Fortune 500 — aren’t doing a great job at representing a diverse range of people. There’s really one face dominating most campaigns and products and using one face is as limiting as using one color when you’re designing. And of course, beyond benign neglect of a diverse range of people, some recent campaigns have been straight up racist. (I’m looking at you, Snapchat.)
The design world is still catching up when it comes to inclusivity. But 2016 gave seven shining examples of diverse design that any designer can learn from. Are you ready to commit to resonating with a wider audience in 2017?
1. Slack's Brown Hand
The darling of the business world right now, Slack is the innovative communication tool which is rapidly replacing email and moving to the heart of every company, from burgeoning startups to the Fortune 500.
In their quest to replace email and revolutionize team messaging, Slack created an “Add to Slack” button, which allows users to easily share content from the web to one of their Slack channels. When lead designer Diógenes Brito sat down to design the button, he realized that the hand didn’t have to be white. Why not design the button’s hand in his own skin tone? While he initially experienced a bit of internal conflict around the decision, Brito’s final design represents a momentous paradigm shift for both Slack and the creative industry.
The button’s final iteration is a brown hand holding the “Add to Slack” sign and it garnered an overwhelmingly positive response from users, who appreciated the subtle — yet powerful — message in this design.
Why it’s brilliant: Slack’s use of the brown hand is a perfect example of how diversity of thought results in more inclusive products. The understated brilliance of it lies in the fact that deciding to be inclusive does not need to be a grand gesture. Inclusivity in design can be as simple as a change of hue; an informed design decision fueled by a diverse culture and launched without fanfare.
Putting this into action: As designers, we spend a lot of time asking questions of our users so that by the time we sit down to create, we have a clear user persona in mind. Although this is an essential part of the design process, I challenge you to ask yourself who you aren't designing for as well. Simply seeking out a wider set of perspectives can lead to a more informed and inclusive design.
2. Facebook’s Friends Icon
With over 500 million active members (50% of whom log in daily), Facebook is the largest social network on the planet. Although Facebook aims to “make the world more open and connected,” for most people, the central use case is the same: Facebook connects you to your friends.
At the heart of this all is the little friends icon. But when Caitlin Winner, Design Manager at Facebook, looked at this friends icon, she made a astute observation: it was promoting gender inequality.
While the original icon showed a man in front of a woman, Winner, together with Facebook’s design team, created a new icon to equalize their positioning. She also redesigned the groups icon to feature a woman in front — and updated everyone’s hairstyles for good measure.
Why it’s brilliant: While these small icons may seem insignificant at first, symbols are actually central to how we represent our ideas, thoughts, and actions in society. Because they exist separately from words, symbols can convey powerful ideas across language and culture lines. This redesign uses subtle iconography to communicate gender equality in a way that’s more powerful than words.
Putting this into action:Be more mindful in the iconography you use. When deciding whether to use block or line styles, or deliberating what icon collection best resonates with your design, give a thought to how your choice of icon might speak to users who don’t look like you.
3. Blend Images
Ask any designer, blogger, or photographer about stock photos and they’ll tell you that the majority of found on traditional stock photo sites range from weird to downright awful. Up until recently, traditional stock photos reinforced racial stereotypes and failed to represent those who sit outside the gender binary. Because of the scarcity of options, designers often present a limited worldview in their work.
That’s why the photos on stock photography site Blended Images are so powerful
Why it’s brilliant: Blend Images present fresh perspectives on how truly representative stock photography can be. The images provide creatives — from designers to marketers — with the assets they need to create work that resonates with a much wider range of people. Blend Images has established itself as the premiere destination for ethnically diverse stock imagery.
Putting this into action: The next time you’re looking for a hero image to display on your client's site, dare to choose a non-traditional gender or race. Your design will not only stand out in a sea of white faces but you might also help your client discover untapped markets within underrepresented groups.
4. Medium
Medium is an online publishing platform developed by Twitter co-founder Evan Williams, with the goal of giving people a place to share stories and ideas beyond 140 characters.
Although Medium best known for it’s effortless writing experience, relentless focus on typography and dedication to the sharing of stories and ideas, there’s a subtle design choice that caught my eye.
A pair of brown hands.
Why it’s brilliant: The hero image is arguably the most important real estate on any site, and for medium to choose an African-American’s hands for this important spot sends a powerful statement that Medium is not just for the tech elite; Medium is for everyone.
It’s a tiny detail, but for the numerous minority groups who have long sought safe spaces in which to express themselves free from fear, this is a powerful statement.
Putting this into action: There is immense untapped opportunity to be found in making underrepresented groups feel as though they are included in the products we create. This move by Medium was simple and easy, but profound -- and you can simply and easily follow their example by not defaulting to the majority in your image choices. Might I suggest something from Blend Images instead?
5. Apple’s MacBook Pro Launch Video
As the camera pans through the kitchen and into the bedroom of the latest advertisement for Apple, we see something we’d never expect: a differently-abled woman getting ready for her day, writing an email on her flashy MacBook Pro. Her voice narrates how her Apple products help her live the life she wants to live, as we watch moments in the lives of differently-abled people learning, playing, and connecting.
It’s been three years since Apple last updated their signature MacBook Pro line. Three long years. Tensions were high as to how they would bring the product up to speed in the current social climate, and they nailed it.
Why it’s brilliant: Apple chose to use differently-abled people to showcase their new stance on accessibility and inclusion. It’s not often that we see differently-abled people represented in tech, or tech products created specifically for them. It was a risky move to introduce their new flagship product through the experiences of a non-traditional user, but this move made a bold statement that Macs really are for everyone.
Putting this into action: No matter who your primary user might be, I challenge you to conduct user testing with the differently-abled. You can even grab a copy of Smashing Magazine's’ book on Inclusive Design Patterns that is packed with plenty of actionable insights.
6. Window’s All In One Commercial
For some time, Apple’s dominance has relegated Microsoft to a second-place position in the eyes of consumers. But 2016 was the year that Microsoft came back, and they chose an wonderfully diverse way to do it.
Given that the target for this product is the creative community — which is predominantly white males — it would make sense for Microsoft to use a white male in their launch video. But, this time, Microsoft chose another direction.
For the unveiling of their new flagship product, Microsoft chose to use a woman of color as the lead. What makes this more meaningful is: rather than using a professional actor, they chose a member of the surface team.
Why this is brilliant: Microsoft’s launch video shows how taking an inclusive stance can be as subtle as choosing a nontraditional face in your promotion campaigns. By daring to place a woman of color front and center in the most important product launch of the year, they radically assert their position as a truly inclusive company.
Putting this into action:I think the biggest takeaway here is about being willing to admit that we, as men, are not the center of the universe. And when we choose to design from a place of acknowledging this we are more empathetic, collaborate better and create products that speak to those who rarely feel like their needs are validated.
7. Emoji unicode consortium
Emojis are just vapid little icons, right? Wrong. Together with GIFs, emojis are a powerful communication medium of the digital generation. Everything from emotions to complex stories can be told in emoji form, but up until recently there has been a lack of diversity within the emojis on the keyboards of handsets around the world.
Bowing to public pressure, the Unicode consortium finally released emojis that not only acknowledge different races but also celebrate non-traditional gender roles, giving people from all different backgrounds the ability to express themselves with symbols that represent who they are.
Why it’s brilliant: This new “emoji parity” represents a new way of representing the full spectrum of races and genders in everyday communication, indicating an evolution in what we culturally consider to be “normal.”
Putting this into action: Have fun! whenever you see an feeling or idea that is not in emoji format, set yourself a challenge and design one! Push unicode until we have as many ways to express ourselves as there are perspectives in the world
Ready to commit?
More than almost any other profession, we designers have the ability to create the world we want to see. We have the tools needed to make the beautiful, useful, innovative things the market desires. And these seven examples? They prove we already have the tools to make the world more inclusive and accepting.
All you need now is the will — and I’m pretty sure you do.