chrōma: Cosmetic Color Reference

chrōma is a comprehensive color reference designed for the Color Vision Deficiency (CVD) community by bridging any barriers they may face when exploring the world of cosmetics.

Comment 1

Inspiration

Color plays a crucial role in cosmetic products and selecting the ideal shade or color is a core part of the experience. However, individuals with Color Vision Deficiency (CVD) cannot have the same experience as those without, which can discourage them from exploring the cosmetics world. 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.

Individuals with CVD experience several significant pain points when it comes to navigating the world of cosmetics. These include the frustration of ambiguous color labels or packaging, the reliance on others to make an informed purchase, and the feeling of being limited to what they have previously tried and tested. These obstacles can make the already challenging experience of finding the right product even more daunting for CVD users, leading to a sense of exclusion from the beauty industry.

Recognizing the need for increased accessibility to color for users with CVD, we developed chrōma, an online database providing a comprehensive cosmetic color reference specifically for this community. Through chrōma, users can look up products to learn more about the color profile, texture, coverage, sensory or associations with nature of the color, and makeup suggestions. We also designed a grayscale UI option to provide a more comfortable experience for individuals with Acromatopsia (Total Color Blindness). This setting ensures that users exploring our database in greyscale have the same experience as those exploring in color, fulfilling our goal of inclusivity and accessibility. Our goal is to empower individuals with CVD to confidently navigate and explore the world of beauty and makeup by eliminating any barriers they may face.

What it does

chrōma: Cosmetic Color Reference is an app designed to help people with color vision deficiency (CVD) better identify and understand the colors in makeup products. Currently, we have 2 make-up categories (Lips and Eyes), each with two lines of product from Estée Lauder. Each product has multiple shades that users can look through. Each shade information includes:

  • Reference images that help to understand the color
  • Detailed textual color description
  • Alt names for the color
  • Color ‘story’ which allow users to associate the color with sensory feelings in nature
  • Color support information (Hue description, Hex code, RGB, HSL)

We also designed a grayscale UI option to provide a more comfortable experience for individuals with Achromatopsia (Total Color Blindness). This setting ensures that users exploring our database in greyscale have the same experience as those exploring in color, fulfilling our goal of inclusivity and accessibility.

How we built it

Built using the MERN stack:

  • Database: MongoDB
  • Front-end: React.js
  • Back-end: Express.js

Design:

  • User research:
    • On accessibility design in the beauty industry,
    • How individuals with CVD use, purchase, and experience make up,
    • Challenges they may face
    • Understand how they perceive and interpret color
  • Research on best practices for accessible design
  • Produced Low-fidelity and high-fidelity responsive Mobile and Web prototype in Figma
  • Developed design system in Figma

Challenges we ran into

Research:

  • Very little current research about the impacts of CVD and beauty products; difficult to "hear" the voices of the community that might benefit from our idea
  • While we gathered some data through user-testing of our prototype and outside research, further research would be necessary to better understand the needs of our target audience

Design:

  • A few of the design elements did not make the final deployment due to time constraints
  • Designing with a limited range of colors without sacrificing visual hierarchy and delight

Deployment:

  • Deploying a MERN stack app to a server was a much harder feat than trying to deploy a static app or a Frontend-only app
  • Most deployment servers were unable to read our database as a JSON file, resulting in our data not displaying
  • Due to time constraints, we opted to deploy on Heroku instead of reorganizing the folder structure to accommodate the deployment

Rendering Images Dynamically:

  • In order to address the challenges of rendering images dynamically, we decided to store the images on an external website and use their URL links to render the images dynamically.
  • This allowed us to quickly and easily display the images in our app without worrying about storage limitations and imports. (However, we also had to make sure that the images were properly resized and optimized for performance to ensure a smooth user experience.)

Accomplishments that we're proud of

  • Creating a product with CVD community in mind front-and-center; potentially creating a real impact
  • Usability testing and applying feedback on the design from users with CVD
  • Design! (functional, accessible, and responsive UI)
  • Developing a full-stack MERN app in a limited time
  • Git collaboration, PR
  • Everything we learned about creating an accessible product, which can effectively serve everyone!

What we learned

  • Learned a lot about people with CVD and the challenges they face in what non-CVD individuals may take for granted
  • Confronted our own biases and assumptions of what “accessibility” actually means, and reframed what we could consider an accessible product, design and app
  • How to describe color to individuals with CVD

What's next for chrōma: Cosmetic Color Reference

  • Add more categories and products into the database
  • Add more brands beyond Estée Lauder into the database
  • Add search and filter functionality:
    • By similar products or colors
    • Complementary products or colors
  • Display settings that can be personalized (i.e Contrast or text size adjustments)
  • Multiple toggle settings to target all types of CVD (i.e. red-green, blue-yellow, etc.)
  • User Authentication (i.e. build favorites list, own profiles, different access points for different types of users)
  • Community (i.e. discussions, comments, reviews, likes)

Built With

Share this project:

Updates