Get out of your bubble! How we designed Cards for Humanity, an inclusive design tool
We created a game that’s gone viral. Here’s how.
As an industry, we’re hungry for shiny new products. “Let’s launch, fast!” “Make an impact!”.
As designers, we design with good intentions, but these don’t always map out to how our products play out in the real world. We use visuals that don’t reflect our audiences. Jargon-y language. It’s easy to get caught up in our own worlds and design for people who look or behave like us.
I’m a designer who has lived in 5 countries, and belonging has been on my mind. How do I relate to different cultures? How do people experience the world? Empathising with people to understand the world from their perspective is what I love to do. Be it for my design and photography work, or just in everyday life.
In 2019, I developed an interest in accessibility, as design for all physical needs. At work, I would look at things like sufficient colour contrast, smooth keyboard navigation. I wrote a blog on how design systems and accessibility uplift one another. But I wanted more.
“What if we did something! You know, something fun, interactive, purpose- driven!”
Designers can have the biggest impact when we challenge our ways of doing things. When we step outside our product bubble. And that’s where Cards for Humanity comes in.
We created Cards for Humanity as a physical card game to facilitate user-focused workshops and help designers think outside their unconscious bias. Then, we started to move remote in 2020, we thought, what if we took the cards online — and made them accessible to people worldwide?
“Let’s make an app for Cards for Humanity. Get together on Monday?”
A couple of developers and I put together a prototype and we pitched it to marketing. They were immediately keen to get on board.
We were excited. We were going to make a tool for people. So that meant bringing together a truly cross-functional team, across design, technology, and marketing.
No room for bias
To bring Cards for Humanity online we started with a totally blank canvas. Initially, we were going to allow our users to pick and choose any card, and build their own user scenarios.
But there was a pivotal moment when my colleague pointed out that selecting a card risks people bringing in their bias. Is “Joyanna, aged 25, is confident” really your target audience or could there be someone you haven’t considered?
We wanted our users to step outside their bubble and to minimise the influence of unconscious bias. So we made sure any card you draw is completely random, handled by code. You can swap out individual cards if you need to, for example, if you’re designing specifically for retirees, then “Lashanda, aged 65” might be more relevant to you.
Designing people in
Cards for Humanity are about inclusive design. It felt only right to make the tool inclusive itself. I wondered, what does an experience that uplifts people look like?
We started with content. We used a positive tone of voice alongside statistics to illustrate that people with impairments aren’t a small minority.
“Cards for Humanity is the sweet spot between idealism and pragmatism. It doesn’t just make statements about how empathy should be thought about but provides actions that can be easily embedded into the design process. This is conducive to change.” — Lead Designer at frog
An inclusive tool should be accessible. So, we implemented keyboard navigation and reduced motion for those who prefer it. I created an inclusive design sub-brand of Idean, which is AA+ compliant.
My favourite part was bringing expression to the game. I sourced a React library that mimics spring physics so cards enter the screen in a natural movement. We wanted it to feel familiar, just like playing physical cards. By using familiarity we aimed to reduce cognitive load too, making the game more inclusive.
Disrupting the design process
If you wanted to inspire designers to design more inclusively, what better place to do it than in a design program? We extended Cards for Humanity to create a Figma plugin. Now people can shuffle the cards right where they design. A place where you might be tempted to take shortcuts and design people out.
Something I learnt from designing and building this Figma plugin is its layout constraints. I loved the challenge. We didn’t want the panel to occupy too much space, so people can view Cards for Humanity and their designs side by side. That way, people can compare the content. We’ve tweaked the layout and text treatment to make them smaller and accessible.
It’s genuinely fun to see how people use it. We’ve heard that at Figma, Cards for Humanity have been used as an inspiration for creating internal empathy cards!
How do you use our Figma plugin? Try it out and drop us a line you have any thoughts.
Bringing it worldwide
Inclusivity didn’t stop at Figma. Localisation helps people feel that they belong. Also, it makes the content understandable to more people. So, we’ve added a Swedish language version of Cards for Humanity.
Creating experiences for international audiences is a designer’s dream. So for this task, collaboration was key. As local experts, our Swedish studio was pivotal to making the translations happen. They translated the content, were looped in throughout the design process, and reviewed the product before launch. Our team in the UK designed the language selector, iterated, and implemented the localisation. Other languages will follow so stay tuned.
While we didn’t know where we’d end up, creating experiences that work for more people was our North Star. Listening to one another, getting ongoing feedback and iteration were crucial parts of the design process. We got feedback from our global studios and soft-launched the product to get feedback from its initial users.
We built Cards for Humanity with the right intentions, but we’ve still got a long way to go. Listening to user feedback, we’ve heard great suggestions like introducing more situational disabilities, for example, “can’t read in the sun”. This is relevant to technology, our field of practice. We revisited our illustrations following feedback that making the skin tones more accurate would feel more inclusive.
Have you got any feedback on Cards for Humanity? Send us a note on cardsforhumanity@idean.com. We’d love to hear your thoughts, to make the tool better for more people.
An inclusive impact
Since launch in the summer of 2020, we’ve had over 43,600 visitors from 160 countries. Community feedback has been phenomenal. We were featured in It’s Nice That and won two design awards at The Drum, including Highly Commended in the Website Design category.
Cards for Humanity has brought me into conversations with people from different backgrounds and disciplines. In the end, people from all around the world and from diverse disciplines used the tool: lawyers, gamers, school teachers… Audiences we couldn’t have imagined.
Getting out of my bubble to create something fun and purpose-led was eye-opening. We all have our own biases that are often hard to see, but important to challenge, particularly when creating products or services for people to use. This is why I think designers and product people should get involved in social impact. We have the power to create, but this comes with responsibility. Tools like Cards for Humanity are here to educate and guide you. To push you out of your bubble — and to burst a few bubbles on the way.
Building the tool was a massive team undertaking, so shout out to everyone who got it off the ground and are keeping it running.
Do you already have a product and want to test how inclusive it is? We’ve just launched a tool to help you with that, The Universal Score.
—
By Eva Tkautz
Lead Product Designer and Creative Developer on Cards for Humanity.
