SpeakerCamera

ColorSense

An AI-powered app providing personalized recommendation for individuals with various types of color blindness

My Role:
Research, UX Designer, Prototype Developer

Duration:
13 weeks

Tools:
Figma, p5.js

What's ColorSense?
Concept Statement:
ColorSense is a groundbreaking AI-powered app that provides personalized recommendations for individuals with color blindness. Using a visual color spectrum and verbal descriptions, it enables users to accurately distinguish between different colors and shades.

Target User:
Individuals with color blindness or color vision deficiency, and anyone interested in experiencing an alternative way of understanding colors.
1

Empathize

Quantitative + Qualitative Research

2

Define

Problem Validation

3

Ideate

Solutions + Prioritization

4

Prototype

Design + Development

5

Test

Usability Testing + Iterations

1. Empathize
Quantitative + Qualitative Research

To understand how their lives are affected by the color blindness, I conducted both quantitive research through online survey and qualitative research through in-person interviews.

 
0
 
0%
 
0

Psychology

How much impact does color blindness or color vision deficiency (CVD) have on your daily life and interactions with others?

Behavior

Which of the following activities do you find most challenging due to color blindness or color vision deficiency? (Select all that apply)

John
Sales Representative

"The lack of representation and understanding is frustrating."

Aaron
College Student

"I rely on my friends to help me choose colors that supposedly match, but I often end up feeling self-conscious about my clothing choices.”

Tamara
Science Teacher

"It's frustrating to constantly feel like I'm missing out on the latest fashion trends."

2 - Define
Problem Validation
Problem Statement
Users with color blindness or color vision deficiency (CVD) need a convenient, accessible, and effective tool to distinguish colors and shades in daily activities, such as clothes shopping.
Persona - Meet Jack
Name:
Jack

Location:
New York, NY

Occupation:
Teacher

Goals:
  • Boost confidence in fashion choices despite color blindness.
  • Share advice and experiences with others facing similar challenges.
  • Expand wardrobe options with creative solutions and alternative color palettes.

Challenges:
  • Difficulty distinguishing shades of red and green, making color coordination tough.
  • Limited clothing choices due to reliance on color combinations for style.
  • Feeling self-conscious or anxious about mismatched colors or clashing patterns in public.
3 - Ideate
Solutions + Prioritization
Prioritization Matrix
I ideated and prioritized the possible solutions by considering both effectiveness and development cost, and figured out that a mobile app with intuitive color spectrum and descriptive language would be the most valuable yet feasible solution.
4 - Prototype
Design + Development
Mid-fi Wireframe
I start by drawing out low-fi sketches on paper, and then incorporate main features into the wireframes for receiving early feedback and ensuring effectiveness & accessibility.
Style Tiles
To ensure the accessibility and appeal of MVP products, I adopted a minimal design style with a highly contrasted color palette and clear typography. By differentiating the primary and secondary CTAs, I aimed to create an effective visual hierarchy.
TAKE ACTION NOW
DON'T WAIT ANY LONGER
Hi-fi Prototype
I transformed this concept into a high-fidelity prototype using Figma. Subsequently, I developed it into a detailed first iteration for usability testing, utilizing P5.js and the latest APIs.
TAKE ACTION NOW
DON'T WAIT ANY LONGER
5 - Test
Usability Testing + Iterations
SpeakerCamera
Usability Test
Goals:
    • Identify the effectiveness of navigation 
    • Identify the clarity of content 
    • Identify the appealingness of UI
Methodology:
    • Moderated in-person Tests. 
    • I encouraged participants to think aloud while performing the tasks.
    • Concurrent and Retrospective Probes.
Participants:
    • 5 users with different types of color blindness
Tasks:
    • Task 1. Capture and identify the color of a selected outfit 
    • Task 2. Bookmark item and reference them from the “Favorite” tab 
    • Task 3. Use AI feature to find recommendations for the best match outfit
Observations:
  • Average TOT (Time on Task): 
    • Task 1:  22 seconds
    • Task 2:  12 seconds
    • Task 3:  45 seconds
  • Participants provided positive feedback, highlighting the simplicity of interface, easy-to-follow navigation, and impressive AI recommendation feature.
  • Participants shared insights on some unnecessary features, such as the "Stripes" mode.
 
0
 
0%
 
0%
 
0%
TAKE ACTION NOW
DON'T WAIT ANY LONGER
Iteration
Based on the user feedback, some changes were made to optimize the user's experience, and to ensure all visual components meet the WCAG AA guideline. The major changes include:
  • Removed the "Stripes" Mode
Iteration
The major changes also include:

  • Simplified the color library interface in "Favorite" section
Future Opportunities
I see a lot of future opportunities based on users' feedback. As part of the ongoing iterations, I'm planning to: 

• Incoporote haptic outputs for a more inclusive experience
• Create more customizations for users with additional functionalities 
• Conduct additional playtest sessions in shopping mall & outlets