Heart Story
A while ago, Immoweb’s design team decided to move from Sketch to Figma. The change gave us the opportunity to review our design system which was a bit all over the place and missing consistency. We also wanted to make sure our website and our iOS and Android apps were aligned.
Collaborating closely with our developers, I started to review the design system, mainly simplifying it and making sure everything was accessible — Accessibility is a big topic for us here at Immoweb.
When redesigning the heart icon (the element that allows user to save and unsave a classified), we discovered some contrast issues: a deeper review was therefore necessary.
Like a good little (padawan) designer, I started to look at competitors’ design. I focused first on contrast, tried a lot of combinations for the different states: with or without background, with or without outline, with different thicknesses, heart filled or not,…
I tested the contrast between background and outline. I tried those combinations over plenty of different images. As the heart can appear as an overlay over any kind of classified pictures, I needed to ensure that contrast was high enough in all circumstances.
In the end, I settled for a thicker outline and the background circle and gave the heart a background, because the contrast was better. Then I tried different kinds of reds, to not burn the eye with a red too flashy.
I presented everything. Everyone was happy. Everyone except one colleague who said: “I don’t see the difference between unsaved and saved”…
His problem was that even though contrast was high enough for both states, he couldn’t see the difference between them because it was only relying on colour.
I was so focused on contrast that I had forgotten the bases of accessibility and just kept it as is without questioning.
So I went back to the drawing board and proposed a version without the outline to show the saved state ; it was actually in my tests but I had rejected it because the contrast (from my so little perspective) wasn’t high enough.
I focused on finding a gray that would be enough contrasted with both white and red. I modified a bit the red to not have a “flashy red” issue (which happens when we use a hard red on black). I took the highest contrast winner, displayed it on different part of an image. This time before showing to anyone, I ran my hearts into blindness colour simulator.
Then only I asked to my colleague what he was seeing. Fortunately, he was able to see every heart and recognise the difference between states.
Lessons learned (because failure is good when we are learning from it):
First, it is not because it was like that before (or because someone did it like that elsewhere) that it is necessarily good.
Second, if you can test it with disabled users, do it. It is a gold mine of valuable insights. If not, at least use checkers and simulators.
For those interested in checking contrast, I’m using the plugin Contrast and Stark on Figma but there are plenty of other contrast checkers online (ex: webaim).
For the colour blindness simulation, I am using the plugin Color filters still in Figma or Coblis online.
Thanks for reading!
And special thanks to my dear colleagues Kevin H, Erwan and Vincent M for proofreading this article.
