Freeish Time: Introducing Hexy

Hexy was born out of necessity, our Mobile Team Lead and I had been working together on a colour issue that had been plaguing us for a while, in a nutshell, different phone and monitor screens display colors differently, the two examples we were up against were P3 and sRGB, so while the color would pass our contrast checker in P3 for example, it wouldn’t in sRGB, and vice versa, meaning the colors would be inaccessible to some user. We tried an iOS app which is pretty popular on the store but it only showed correct contrast ratios for p3 screenshots so we instead decided to build our own!

This inspired us to utilize our Freeish Time to create a tool that would not only solve this headache, but also ensure all future projects were tailored to every user type. Because we aren’t building tech for good, unless we are ensuring it is accessible to all.

Teamwork is the dreamwork. Our Mobile Team Lead built a very simple SwiftUI app which allows you to import a screenshot, pick two colours from it, and thus compare the contrast ratio between the two colors. 

Simples!

With this geniously created this demo app, it  would find a color code on the screen and convert it to it’s sRGB or P3 alternative, but because it was a demo, it lacked a bit of creative flair and any form of a user journey, meaning it would be quite hard to navigate and use in a real world environment…

This is where I came in!

I started with a few sketches of how the user might navigate this app, and then when I had that, I set about making a bit of branding around it. Who was this app for? Why would people use it? What could I do to make it a bit more unique?

This was where Hexy was born.

Hexy is a little companion app where it will act as a little bot (Similar to Dom the pizza bot), and work out the colors for you. Adding in this little extra feature made the app so much more personalized and enjoyable for the users.

I also floated the idea of color alternatives, but that was a whole can of worms, so we decided to park it, but it was top of my list for future amends if there was ever a V2.

Key learning in terms of getting the correct color (color profile) from the screenshots was to make sure to use UIColorPicker, and it also saved a lot of time building a colour picker UI when one already exists and functions flawlessly for this task. 

The whole system of learning different color types, and realising that not every color contrast app does what you want it to, we need to make apps that everyone can use, and realising small things like this can have a big impact on users!

I’ve never looked into color contrast apps. Looking at a new market that isn’t really Cube based was different. Being a UI designer, my thought process the entire time was, how could I make it more interesting for users?

I know there was a bit of a sticking point during the build that our Dev had trouble getting the RGB values from Swift’s UIColor type. We needed values in the range 0-255 to perform calculations but UIColor’s getRed can return values outside of this range. Instead we used UIColor’s CGColor’s components!

The standard user journeys were a bit of a learning curve, usually we’ll have a fleshed out user journey from our talented UX designers, but because I was heading up this project, I had to not only map out the users journey, but also create the user interface, #firstworldproblems

It’s not a very popular market at the moment. So it was uncharted territory thinking about how to break into that market and innovate it?

The app can be used by us now to reliably test color contrast ratios in our apps and compare them with standards across all screen color profiles!
It’s a bit self explanatory, but being in the creative team means we care a lot about colors and the way they display on various phone screens, so this is a big step forward in all our processes.

We always strive to find new ways to innovate, but sometimes we just need to take a step back and look at things from a different set of eyes rather than trying to be the authority. Something that is simply there to make accessibility that much easier to include in a build.