Estée Lauder Accessible Beauty Hackathon
Chroma
How might we make beauty more accessible to the Color Vision Deficient community?
Team
1 Product Designer
4 Software Engineers
(All women of color team 🎊)
Timeline
1 week
Scope of Work
UX research
Design System
Low-fidelity wireframing
Web and Mobile design
High-fidelity Interactive prototype
Tools
Figma
ChatGPT
Colour Vision Deficiency (CVD), often referred to as Colour Blindness, is a visual condition that hinders people's ability to discern colours or variations in colour. Red-green colour blindness is the most prevalent form of CVD, impacting around 1 in 12 men and 1 in 200 women worldwide.
The Challenge
Despite progress in accessible design in the beauty industry, users with CVD still report having limited knowledge of products they're purchasing, and having to adapt to less-than-optimal experiences or forego makeup altogether.
Our design is focused on solving the following question:
How might we help users with CVD accurately perceive and distinguish the color of makeup products during the selection process in order to make an informed purchase decision?
Why it matters?
The significance of color in makeup products is undeniable, and color is vital to the user experience. But for those with CVD, the experience isn't as enjoyable as for non-CVD individuals, deterring them from diving into the realm of cosmetics. Every person should have equal opportunities to explore the beauty world.
Desired outcomes
Recognizing the need for increased accessibility to color for users with CVD, we developed Chroma, an online database providing a comprehensive cosmetic color reference.
Our aim is to empower users with CVD to confidently and boldly explore the world of beauty and makeup through our database. With Chroma, our goal is to empower individuals with CVD to confidently and freely navigate through the world of beauty by bridging any barriers they may face when it comes to color.
Let’s dive in
The Process
Given the two-week timeframe for the project, I strategically prioritized methodologies to best approach the design. While this constraint proved helpful in keeping me focused on the key solutions, some design considerations had to be left out of the final product. However, we intend to continue to enhance and refine it post-hackathon.
Discovery
Research objectives
1
To understand the experiences of CVD individuals using makeup and identify challenges.
2
To understand CVD individuals' color perception and interpretation for informing our product development and design.
3
To review accessibility guidelines, standards, and best practices for design, particularly for users with compromised vision, to ensure our database is inclusive and accessible.
What I discovered
How do individuals with CVD make beauty purchasing decisions?
Assessing the item's texture
Often the sole differentiating factor among products.
Past experience
Users tend to rely on familiar products, restricting their exploration of new options or hues.
Opinions or feedback from others
Which could be discouraging to embark on this journey through the lens of self-exploration.
How do individuals with CVD perceive and understand color?
Users with CVD often associate colors with sensory experiences or natural elements, such as the color blue being associated with water or the sky. These associations are often influenced by what they have learned from others.
Improperly, ambiguous, or absent color labels are a significant accessibility issue
Since it's one of the only means of accurately determining a color, if the label only contains a code or a ambiguous name that doesn't clearly indicate the color, it can lead to confusion, uncertainty, and discouragement.
“I would love for the beauty industry to put color descriptions on their packaging, on their websites, just somewhere so that it’s accessible to anyone who may need it, and anyone who may want it.”
— Natasha Caudill, a content creator with Achromatopsia (Total Color Blindness)
Problem Space
From ambiguous color labels and packaging, to having to rely on others to make informed purchases, to feeling limited in their options, these obstacles can create a sense of exclusion for individuals with CVD wanting to explore the beauty space.
How might we help users with CVD accurately perceive and distinguish the color of makeup products during the selection process in order to make an informed purchase decision?
Introducing Chroma
A Cosmetic Color Reference database to make color more accessible to the Color Vision Deficient community
Navigation & Style Guide
The design prioritizes accessibility and centers on users who experience color differently. It is intentionally straightforward, functional, and provides ample contrast and interaction cues for seamless navigation.
The style guide was also intentionally kept straightforward, by exploring different ways to enhance visual hierarchy and interest in lieu of a wider color system. My goal was to make the colors from the products stand out without sacrificing the overall visual appeal of the database. By utilizing a well-established type system, shadow elevation, and micro-interactions, I experimented with different ways to support visual hierarchy and interaction cues for the CVD community.
Color Swatches
Our core functionality is to make color information easily accessible and understandable. We achieve this by presenting swatches of the color range of a product against pure black (#000000) and pure white (#FFFFFF), serving as a reference for the color's shade and tint.
Color Swatches
To make navigation accessible, clear, and intuitive, the color’s hue and texture description is added to the dropdown, so users can easily select the shade they want to look more into.
Color Descriptions
Based on our user research, we understand that texture and associations with sensory or natural elements are crucial in helping individuals with CVD comprehend color.
With this in mind, we have created a comprehensive breakdown of color information, including:
color description (with alternative names),
color story in relation to sensory or natural elements,
and color support details (Hue description, Hex code, RGB, HSL).
Images
Our selection of images showcases:
the product
the product’s texture
the image depicted in the color story
color swatch alone
and color against black and white to enhance the user's understanding of the color profile.
Greyscale
We also designed a grayscale UI option to provide a more comfortable experience for individuals with Achromatopisa (Total Color Blindness). This setting ensures that users exploring our database in greyscale will have the same experience as those exploring in color, fulfilling our goal of inclusivity and accessibility.
Responsive Design
The design is responsive and optimized for mobile devices and touchscreens, allowing users to access the database wherever they are.
Next Steps
While still in the early stages, we're very excited about the prospect of Chroma in making beauty more accessible to everyone. The next immediate step for me is to test and gather user feedback from the CVD community and iterate and improve base on those feedback.
Future explorations:
Add more categories, products, and brands to the database
Search and filter functionality:
By similar products or colors
Complementary products or colors
Personalized settings (i.e. contrast, text size adjustments) and multiple toggle settings to address different CVD users’ needs
User Authentication (i.e. favorites list, profiles)
Community/Social (i.e. comments, reviews, likes)
Learnings and Reflections
Working alongside four talented women in tech was an enjoyable experience that provided valuable insights into the challenges faced by individuals with CVD. Through this project, I confronted my biases and assumptions regarding accessibility and broadened my understanding of what an inclusive experience entails. Furthermore, I acquired knowledge on communicating color in a more inclusive manner for those who perceive it differently.
