)
)
Time for the latest and greatest to come out of Freeish Time! Just to refresh your memory, “Freeish Time” is the opportunity for our Cubes to focus on their passion projects outside of their work commitments. They have an entire week to identify a problem, build and create a solution, then present it to the rest of the team during our Friday Happy Half Hour meeting.
This has become an integral part of 3 Sided Cube. The encouragement and time to work purely on whatever their heart desires, all while getting a little reprieve from the hustle and bustle from the normal workload is a welcomed treat. Whether they opt to go the “innovation” or “education” route, that invaluable time to focus purely on whatever it is that intrigues them is pretty rad.
The sky’s the limit when it comes to Freeish Time. We sat down with James, our RIDICULOUSLY talented Designer, to chat about his exciting innovation making accessibility the status quo at 3 Sided Cube…
What inspired your innovation time?
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 colours differently, the two examples we were up against were P3 and sRGB, so while the colour would pass our contrast checker in P3 for example, it wouldn’t in sRGB, and vice versa, meaning the colours 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 utilise 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.
Talk us through what you did
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 colours.
Simples!
With this geniously created this demo app, it would find a colour 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 colours for you. Adding in this little extra feature made the app so much more personalised and enjoyable for the users.
I also floated the idea of colour 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.
)
What were the key learnings?
Key learning in terms of getting the correct colour (colour 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 colour types, and realising that not every colour 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 colour 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?
)
Were there any challenges?
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?
How can you use this within your role at 3 Sided Cube?
The app can be used by us now to reliably test colour contrast ratios in our apps and compare them with standards across all screen colour profiles!It’s a bit self explanatory, but being in the creative team means we care a lot about colours 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.
Published on 11 April 2022, last updated on 11 April 2022