● Case study
Facial Recognition Renewed: A Rapid Sprint Redesign for Inclusivity and Simplicity
date/ Sep 2021
Team/ Qawafel
Location/ Saudi Arabia
Role/ Senior Product Designer
Facial Recognition Renewed: A Rapid Sprint Redesign for Inclusivity and Simplicity
The Challenge
In the fast-paced world of startups, I was the solo designer tasked with creating a compelling user experience for our innovative product. To achieve this, I needed to develop a cohesive color design system that not only looked appealing but also ensured a seamless and comfortable user journey.
The Why
When we started design the colors system we have noticed that colors we design is not the same as what we see by our eys. Lemme show you this test bellow to understand me better
Note
as you can see above that the two colors have the same Saturation and Lightness so why the blue looks darker?
So trying to create a scalable adaptive color theme this way will cause problems and will not help us create accessible colors.
Understanding Color Theory
To begin, I embarked on a journey to understand the science behind color perception. Our eyes perceive colors based on a combination of hue, saturation, and brightness. The What I realized that these attributes play a pivotal role in creating visual harmony and usability.
The Role of Perceptually Uniform Color Spaces
While traditional color palettes served as a starting point, I also explored the color spaces used in popular design tools. Figma, a tool widely used in the design community, primarily relies on RGB (Red, Green, Blue) and HEX (Hexadecimal) color spaces for representing colors.
Traditional color palettes often lead to issues of inconsistent contrast and visual discomfort. This is where Perceptually Uniform Color Spaces, such as CIELAB and CIELCH, shine. They are designed to mimic how the human eye perceives color, ensuring that changes in color values are perceived as consistent and balanced.
Choosing Perceptually Uniform Color Spaces
Perceptually uniform color spaces, such as CIELAB and CIELCH, became my guiding stars. These spaces ensured that the color transitions were perceived as consistent and visually balanced by the human eye. It was a promising foundation for a design system that could stand the test of time.
Research and Exploration
I began my journey by researching existing color design systems and their limitations. It became evident that traditional color palettes often led to issues of contrast, readability, and accessibility. Armed with this knowledge, I embarked on the path to discover a better way.
Iteration and testing
With a clear direction, I started experimenting with color combinations in the chosen perceptually uniform color space. Iteration was the name of the game, and I meticulously tweaked hues, saturations, and brightness levels. The aim was to create a palette that was not only pleasing to look at but also conveyed our brand identity effectively.
Collaboration and Feedback
Although I was the sole designer, I understood the value of diverse perspectives. I actively sought feedback from colleagues, developers, and even potential users. Their input proved invaluable in refining the color design system further.
Implementation
The time had come to breathe life into the color system. I collaborated closely with the development team to ensure seamless implementation. making it easy for everyone to use the color system consistently.
Outcomes
As our product launched, the impact of the perceptually uniform color design system became evident. Our users found the interface more comfortable to use, with improved readability and accessibility. The design system had successfully bridged the gap between aesthetics and functionality.
Conclusion