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

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
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
- 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
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