Mobile App Redesign for Colorblindness @Lululemon

BACKGROUND
Color is powerful. It can communicate an emotion, mood or atmosphere, and even express a personality. Colorblind people have difficulty recognizing color, or even fully understanding the meaning of color. However, they still have the same desire to “look nice”, just like everyone else.
THE PROBLEM
Colorblind people want to have a more accessible online shopping experience so that they could find clothes that “look nice” on them easily and wear colors appropriately in front of the general public
MY ROLE
I participated the whole end-to-end design process. More specifically,
  • I discovered user pain points from social aspects and proposed to focus our design solution on helping colorblind people be independent and feel psychologically supported
  • I heavily worked on prototyping the “inclusive color palette” and the “AR fitting room” features
  • I took the project management role (coordinate team meetings, set milestones, mediate conflicts, etc.)
CONTEXT
Design Challenge @CMU
3 weeks
2 collaborators
‍
SKILLS
Accessibility Design
Desktop Research
Mobile App Design
How Might We
‍
design an inclusive color matching experience for colorblind people while integrating it seamlessly into the current online shopping experience process?
OUR SOLUTION
Redesigned color palette and utilized community support to provide an inclusive color matching experience during the online shopping
DESKTOP RESEARCH
01. How do colorblind people shop clothes?
Current applications only help people recognize the images easily, but not provide information to help them make better choices on colors or recognize colors
02. Are online shopping applications accessible?
Current applications only help people recognize the images easily, but not provide information to help them make better choices on colors or recognize colors
03. Are there any tools for accessibility?
Colorblind people can use external tools to better recognize colors. However, these tools cannot help people make color decisions, either.
However, we shouldn’t forget they have the same desire to look nice, just like everyone else.
--------- “Just because I’m colorblind doesn’t mean I don’t like or want to wear nice clothes”
DESIGN OPPORTUNITY
DESIGN EMPHASIS
Besides, I want to emphasize on
CONNECTING ALL TOGETHER
How might we design an inclusive color matching experience for colorblind people while integrating it seamlessly into the current online shopping process?
IDEATION
To stand in users’ shoes, we started by simulating colorblindness’s visual experience via external tools
The solution focused on making color matching more understandable for colorblind people and draw down into the meaning behind colors
‍
After several rounds of brainstorms, we proposed the following 4 features
DESIGN THINKING
One big challenge we met was to redesign the color palette
Besides colorblindness, current color palette makes it hard to recognize because of
1. Lack of Order
  • Multi-color and pure-color are mixed
  • Color in different values (brightness) are mixed
2. Confusing Colors
  • Many colors look very similar      
    E.g. 3-4 red-ish colors, hard to tell the difference
3. Confusing Names
  • Color names are not intuitive/hard to understand
  • Color names are inconsistent across different platforms
DESIGN PROCESS
Our redesign focused on assisting people to distinguish different hues and values (brightness)
At first, we brainstormed several ideas ...
Then we realized that colorblind people CAN distinguish brightness and patterns, which make these designs not the best approach.

Instead, we should minimize the impact on original user experience when adding additional information to the color palette
COLOR PALETTE FINAL DESIGN
Here comes our final design
Utilize "ICONS" and "ORDERS"
A Closer Look ...
Converted from the idea ...
Why a recognizable color palette can help optimize colorblind people's shopping experience?
Provide psychological supports by creating a complete online shopping experience (pick cloth - select color - pick size - checkout), which is the same as everyone
Minimize user flow of selecting colors (e.g number of clicks)
FINAL DESIGN
01 Inclusive Color Palette
Recognize the color easily
  • Use icons to distinguish between different color categories
  • List colors of the same category in order of brightness
  • Add color name directly under each color
02 Shop by mood
Shop with "mood" easily
  • Outfits are categorized by mood
  • Mood and atmosphere behind the color are picturized in words to supplement the lack of visual experience
03 AR Fitting Room
Match the color more intuitively
  • Display AI generated style/mood description for each color matching plan to enhance the decision making process
  • Use gestures to switch clothing colors and try on different matches
04 Community
Understand color with community help
  • Post a vote to ask for feedbacks and shop more independently
  • Share outfits and color palettes to understand the color in social contexts
Be accessible to ALL is not an afterthought
All features in our design can benefit not only colorblind people, but also ALL users 🥳
CONSTRAINT
Did not test on real users since the recruitment via special community groups require IRB approval
Recruit participants from community groups requires IRB approval. Due to the time limit (3 week project), we were not able to get IRB approval and finish the recruitment process.Testing on non-colorblind friends is the best I could do. But if I have enough time to go through this recruitment process, I will recruit 10+ participants to conduct two rounds of user testing, and iterate my design based on their feedback.
Simulated the colorblind experience and conducted desktop research, however, it cannot be an alternative for interviewing a colorblind people.
Conducting desktop research and simulating colorblind experience is the best I could do to understand the user needs and problems. But if I have access to talk with colorblind people, I will do contextual inquiry on their daily life and shopping routine to dive deep into their needs and pain points before I start ideation.
REFLECTION
What I learned
Understanding accessibility builds me a broader and more inclusive perspective
This is my first accessibility related project. I learned not only how to better design for people with different abilities, but also understand user abilities under different social and environmental contexts. I also learned using guidelines such as WCAG to evaluate the tools and applications. These all helped me build a broader and more inclusive perspective for my future designs.
Addressing accessibility is making it accessible for ALL
I am excited to realize that being exposed to accessibility (colorblindness) problems can help me better understand different levels of user abilities. In this project, for example, colorblind people are minor groups who have problem doing color matchings. However, the color matching can be a problem for everyone, only the level of severity differs. The redesign not only provide an inclusive color matching experience for colorblind people, but also benefit everyone.
My Thoughts...
What should we value more: What colorblind people perceive? vs. what the majority of people perceive?
At one moment during the design process,  I started to question myself: Colorblind people CAN see colors, only that these colors are different from what the majority of people perceive. What looks good in their eyes is as same important as what looks good in everyone’s eyes. If I redesign the color matching experience, which one should I value for? Color is subjective. Should I help colorblind people see themselves look good in their eyes or help colorblind people look nice in front of other people? In this project, I emphasized on the social needs that everyone wants to look nice in front of other people. The reason behind is that I don’t have access to research on how colorblind people feel about this question. However, I still think this is a very meaningful topic that I want to explore in the future.
Let's Connect! 🥳
Linkedin
Email
Resume
© 2022 By Krystal Zeng