Customer Support|Contact Us

July 15, 2018

Diversity & Inclusivity Matters in UX/UI – Key Factors to Design a Great Product

Archives
Diverse group of three coworkers looking at laptop together in bright lit room

There’s a trend emerging in the tech scene around the topics of diversity and inclusivity. Campaigns, guidelines and best practices of how to embrace diversity in the workplace and design inclusive products are showing up everywhere and some companies are even changing their internal structure to adopt this mindset.
Most people probably have a clue of what diversity and inclusiveness mean. But how do we apply them to tech and design? Focusing on diversity issues, the biggest concern seems to be building gender inclusive teams, but also empowering ethnic representation and welcoming a variety of roles and backgrounds. Aligned with this, being inclusive means considering as many people’s needs and abilities as possible during the design process, in order to build a product usable by the widest range of people.

Here at Citibeats, we’re not only aware of these topics and guidelines, but also make them the pillars of our product and practices. Not just because they’re trending and good for the business, but because they’re key to design a great product! See below four ways in which we apply them to our product.

1. Know our users

First and foremost, we need to understand who our users are: what they do, what their background is, how and in which context they are using Citibeats. When we are working on a new release, we always validate it with some of our end users to make sure we are aligned with their needs and expectations, responding to their suggestions. These validations are also important to challenge our assumptions. Although we know we aren’t designing for ourselves, sometimes it’s hard to move away from our own perception and experiences. Without noticing it, we might be building a product that is a little bit biased towards ourselves. That is when a quick interview with our users sends us back to reality. Let me give you an example.
Citibeats is a tool that collects and analyses citizens’ concerns. In order to provide quality data, the user needs to perform somehow complex tasks. At first, we thought that simplifying these tasks and giving clear instructions with easy-to-understand vocabulary would be the best approach. Obviously, we were assuming our end users were people outside the tech scene with no previous knowledge of the theme. Well, a few pilots and some interviews later, we realised they do understand “techy” language that allows them to perform more complex tasks, consequently yielding better results.
 

2. Involve the whole team

At Citibeats, we are lucky to have a diverse team made up of people from totally different backgrounds and with a set of experiences that makes each one of us unique. Consequently, when designing our product we try to listen and collect all these different voices and implicate all of them in the process. After all, we have the shared responsibility of making Citibeats great. The broader the range of people we involve, the more we learn, and the richer the product will be.

3. Accessibility

In a simple way, an accessible product is making sure that all of our users can consume our content. There are a lot of articles talking about accessibility best practices for people with permanent and situational disabilities. This is particularly important when we have a public open product, used by a lot of people in all kinds of different situations (think Facebook, or Twitter, or your Bank’s Mobile App).
Citibeats is not one of those cases. Nevertheless, there are some aspects we took into consideration to make sure our users won’t have problems analysing our content.
  • Contrast. Good contrast is the foundation of good colour design. We make sure our text size supports a comfortable reading and its colour against the background follows the standard WCAG 2.0 levels (AA and AAA).
  • Icons. A nice-looking icon is always a plus when designing attractive user interfaces. However, if its meaning is confusing, no beauty will save it. To avoid this, in our platform, we always put together icons and their text labels.
  • Colours. An accessibility best practice is not to use colour alone as the only means of communicating something to the user. We try to apply this everywhere we can. For example, we add labels to input errors, provide clear explanations on charts, use a different text style on links, and so on. However, we do rely on colour to differentiate categories on our dashboard charts. This was a thought-through decision. As we can show up to 20 categories, adding 20 patterns or text labels to every chart would make it overwhelming rather than helpful. As a solution, and thinking about the colourblind community, we added a feature –configurable by the user– which changes the colour palette to one accessible to people who suffer from this disability.

4. Being clear and consistent

One thing we need to have in mind is that Citibeats is not the only web product out there, nor the one our users use the most. There are established patterns and familiar conventions used by almost every digital product and breaking them would do more harm than good. By following them, we make sure Citibeats is an intuitive product where people feel comfortable to use and explore.
 

Final thoughts

To become more inclusive, we need to develop a better understanding of exclusion.

John Maeda, Automattic’s Global Head, Computational Design and Inclusion
As Citibeats keeps growing, one of our challenges is to constantly analyse what could prevent our customers from using the platform smoothly –what could be exclusive. This means being in control of who our users are, and know the problems they may face before they happen. We know it will be hard. Topics like personal disabilities and lack of diversity are uncomfortable. But that’s how we know that tackling these issues is the right thing to do.
At Citibeats we want to create a better society and a smarter future for everyone. By applying diversity and inclusivity in design we believe we are a step closer to achieving that goal!