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?
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.
Target User:
Individuals with color blindness or color vision deficiency, and anyone interested in experiencing an alternative way of understanding colors.
Design Approach
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
How many people are affected by color blindness?
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?
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:
Challenges:
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
- Moderated in-person Tests.
- I encouraged participants to think aloud while performing the tasks.
- Concurrent and Retrospective Probes.
- 5 users with different types of color blindness
- 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
- 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.
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
• Incoporote haptic outputs for a more inclusive experience
• Create more customizations for users with additional functionalities
• Conduct additional playtest sessions in shopping mall & outlets
