Hotjar + Contentsquare 🎉 Hotjar + Contentsquare: we’re joining forces to build better experiences for all. 🎉 Learn more

Last updated Sep 14 2020

⚡Inclusive design

Designing for inclusivity - Ilana Davis

Shopify and Squarespace consultant Ilana Davis makes a case for the importance of building an inclusive website experience that customers—ALL of them—can enjoy and benefit from.
What Ilana covers:

  • Useful stats about the make-up of 2020's ecommerce audiences
  • A real-life example of designing for colorblind inclusivity
  • Quick and practical tips on how to make a website more accessible and inclusive

Click below to read the transcript.


I'm Ilana Davis, working with e-commerce brands on Shopify. Prior to this, I was in HR and recruiting for 10 plus years.

The story that you're about to hear is true. A few years ago, I was working at a large tech company in the recruiting team.

Emails would come in to a shared email box where we would assign emails by color. And if any of you have ever used Outlook, you may look at these categories and know that, although you can see the texts in this view, when you're looking at the inbox, all you can see is a colored square and none of the texts that describes the meaning of that color.

We had someone on our team, let's call them Sam, who was really great at their job but they would always randomly grab emails instead of the emails assigned to them and no one understood why. This went on for two years. Finally, we asked them why they weren't taking the light blue emails that were assigned to them. They didn't even realize the boxes meant anything. It turns out that they're color blind and we were using colors that they couldn't see.

So there's a few things happening here.

One, why did it take them two years to figure this out? I will never know.

And two, we created a process that worked for the majority. We assumed that our experiences were the same as others. When we saw this, they saw this or this or maybe this. And as you can see, each of these colors are very different depending on the type of colorblindness Sam had.

I didn't even know at the time that they were different types. I was working in recruiting at the time, I had no background in design, nor did anyone else on my team. Yet we designed a process for ourselves and never thought about someone else's experience.

So how does this relate to e-commerce you ask? Design principles are the same across all industries.

Designing through inclusivity doesn't mean that you're designing one thing for all people, rather a method of designing a diversity of ways to participate so that everyone has a sense of belonging. Working with, including and learning from people with a range of perspectives, can capture a greater share of the consumer market.

The average American woman wears between a size 16 and 18, 10% of millennials identify as gender-nonconforming, 15% of people worldwide and 20% of Americans live with a disability of some type. LGBTQ consumers represent the fourth largest economy. 75% of female e-commerce shoppers prefer brands that feature a variety of ethnicities in their ads. And 84% of female e-commerce shoppers prefer brands that feature a variety of body types in their ads.

Don't try to be everything to everyone but you can make small tweaks today that makes it much easier than you think.

  • From a technical perspective. all text is not an opportunity to keyword stuff. Instead when writing all text for your images, imagine you're describing the picture to a person over the phone.
  • Use a minimum of 18 pixel font for paragraph text. And for that matter, use relative units like REM or EM instead of pixels.
  • Using high contrast between font colors and background colors, ensure that for example, a customer can read the product details when they're looking at your site from their phone on a sunny day.
  • From a branding perspective, when applicable, go beyond gender norms and expand beyond men or women categories.
  • Consider options for gender-nonconforming by offering products that are unisex.
  • Allowing shoppers to use their native language makes them feel more welcome and providing a more meaningful experience.
  • Use models from a variety of age groups, races, ethnicities and include disabilities in your photography.
  • And add culturally specific products to your product catalog such as food, clothing, care products and more.
  • The issues vary from group to group but in one way, they're very similar. There was a lack of recognition that there is more than one type of shopper or that they each have specific needs. Account for a variety of age groups, races, ethnicities, and include disabilities.

Inclusivity begins with the team you have. It's hard to define every way in which inclusivity is needed in e-commerce and all the ways we could or should evolve to meet the needs of our consumer base. Be authentic. Not all shoppers are looking to get the same things but you must be genuine. Add one idea on how to be more inclusive in your next design meeting or marketing campaign and take steps today to build a more inclusive world.