UX Maturity & Leading Design Inclusivity

When RACE21 started, it was a small group of previous mining experts and software workers, the former needing more experience working in the software space. Given this, one of our main focuses as a UX team was creating and fostering“UX Maturity” early within the organization. this was done to help create a user-focused product culture.

I joined early in the group's lifespan. I used my history as an instructor to help teach our converted mining experts and users about UX and software development.

One way I did this was to create a Design Accessibility Working Group. This group was to find any issues of accessibility and to make sure our designs met WCAG compliance. An example of this group's success is when I studied the colour scheme the design team was using in all projects. When I took a closer look at the design system and used a colour blindness simulator tool called Sim Daltonism, I found that the most important colors we used to express confirm, caution, and alert, looked very similar when placed close together on the same page.

To an able-visioned user, there is no issue, however with the majority of colour blindness cases being male (8%), and the majority of mine site users being male (84%), I found this is a concern for our users as in our apps these colours can be used to symbolize something mundane like an uptick in mining production, or something life threatening like if an excavator cable is electrified or not. In my mind, there was no reason to gamble on either when there could be a design solution to solve it.

To solve this I took the project on to learn more about how our eyes see colour and how else we can interpret data without the need for colour. What I found was a 3 fold approach.

The 3 C’s: Colour, Contrast & Context.

Colour:

Color blindness isn’t a complete lack of color vision but rather a different way of experiencing it. People with color blindness often have difficulty distinguishing certain colors due to deficiencies in one or more of their cone cells. As you can see, (or not if you are colour blind), There are various types of colour blindness. We focused mostly on the Deuternopia type, as it is the most common. A misconception is that they cannot see any colours, which isn't true. They can see colours but cannot distinguish as many colours as an able-visioned person. So the issue isn’t that they can’t see colour totally; they just cannot determine as many colours.

To explain this, Here is a set of colours that I have converted into what a colour blind person sees. Interesting huh? To fully coloured eyes we can see the difference between all 4 colours, but to a colour blind user, that is nearly impossible

To explain this, let's pretend you have colour blindness and you are given this app and you are told that cards with a signal red should never be interacted with, only green and yellow items should be. In the below mockup, which card is safe to interact with?

Tricky huh? To fully coloured eyes, the 2 options look almost the same, but they are too far apart to tell, as well there's nothing else in these cards that could tell us which one is which. This is a prime example of why you cannot rely on just colour to signal information to users and why when selecting colours, you have to make sure they are accessible to all vision abilities. The good news is that with a few adjustments, you can make these colours nearly identical but much more accessible.

Contrast:

By adjusting the saturation levels of each colour to a different weight, you will add a minor effect of contrast to the equation. Here is what that looks like:

Now it is more varied, but interestingly the left swatch is nearly identical to the original. The biggest difference is the more saturated green and less saturated yellow, changing these changes how much colour is being sent to a person's eyes. Remember, the issue isn't that they can’t see colour, it is that they cannot distinguish as many colours. People with colour blindness fall in colour distinction, but they excel in shade distinction, IE, how bright or dark a colour is. By changing the effective brightness of these colours, we can make them more accessible to our users.

After adjustment of saturation:

Here are our new colours in situ. Just by changing the brightness or darkness of the colours now, they are distinguishable even without the context of what they represent.

But we aren’t fully accessible just yet. What if a user's monitor isn’t calibrated right, or is in the pit of a mine site all scratched up and full of glare from the sun? What if the user tries to print this page and the printer is out of ink? seeing that it usually is, how else can we supplement this experience to allow for even more usability and more accessibility?

Context:

it’s time for the best part of this approach; how can we breathe some life into this experience? Our little mock-up so far has accessible colours, but what if we can’t rely on those, how else can a user dictate what the information means? We can use context clues and shapes to help the last piece of the puzzle go into.

While doing research for this project, I reached out to colour-blind members of our staff, users, and even friends/family members. The “Ah Ha!” moment for me was when I was interviewing my brother-in-law about how he could drive through intersections with deuteranopia. He said he remembered where each signal was on a traffic light. So rather than “green means go” for him he thinks “bottom is go”.

Another thing he mentioned was that most times he doesn't rely on that system as much, but rather, he just goes or stops when everyone else does too. So in this example, he is using position and context within the world to make decisions instead of colour. How can we incorporate that mentality into our mockup?

Let's start with basic context, simple labels go a long way to solve this issue. In the mock-up I have purposely left out text to make it harder to distinguish the differences between cards, but what if I added some context?

let’s start with labels in the badges, that way users will be able to mentally assign colours to levels of severity but also the location of where to see the severity. Another way we can create context is by adding icons to these severity badges, so even in a colourless scenario, we will have a 4th way to identify the information.

The icons are a very identifiable and powerful aid for any user, but by choosing to only have icons in the labels, we build the idea that icons are meant to signal safety status. This is opposed to having icons in other places, such as the blue buttons and the title where they could diminish or confuse their importance.

This is one small example of the work we did in the Design Accessibility Working Group for Teck. The work we did led to big changes in how the rest of the team designed their projects as well as how the current design system was being used. It allowed us a business to create a platform to see our internal products to other customers around the world, as they now met the WCAG requirements.

Conclusion

As I stated before, I cannot show the direct wireframes from my time at Teck, I hope this shows you one of the greatest insights I had during my time there.