COLORLIFE
END-TO-END MOBILE APP DESIGN
ROLE
UI/UX Designer | Idea Generation, Market Research, Wireframing, Prototyping, Brand Development
PROJECT CONTEXT
THE PROCESS
What is Colorlife?
Colorlife is an app designed to assist individuals with color blindness or color deficiencies in navigating a color-rich world. With Colorlife, users can easily identify and differentiate the colors they encounter. Also with the integration with Natural Language Processing (NLP), users no longer need to feel overwhelmed by the color codes they come across daily.
01
Problem definition.
What are users’ needs & use cases? What are the problems they are facing?
DURATION
7 days
Jan 20, 2025 - Jan 27, 2025
02
Empathize.
Conduct market research to understand and define user challenges.
03
TEAM
Independent
Ideate.
How might I solve the pain points? What features can I design/ build? What are the goals & hypotheses? Begin drawing user flows and creating low-fidelity wireframes.
TOOL
Figma, Fig Jam, Adobe Illustrator
04
Prototype.
Map out interactions into a prototype and usability testing.
Overview
Do you know what colorblindness actually is?
According to Canadian Association of Optometrists (CAO), there is one type of colour blindness, and three types of colour deficiency: two different types of red-green deficiency (protanope & deuteranope) and one blue-yellow deficiency (tritanope).
#1 RED-GREEN DEFICIENCY
🍄 Difficulty distinguishing between shades of red, orange, brown, and green
The most common and are often inherited
Unable to perceive red wavelengths of light, which makes certain shades of red appear more green and less bright (Protanope)
Unable to perceive green wavelengths of light, which makes certain shades of green look more red (Deuteranope - most common type)
#2 BLUE-YELLOW DEFICIENCY
💎 Difficulty distinguishing light blues with grays, dark purples with black, greens with blues, and oranges with reds
Rare and generally acquired after damage to the optic nerve
Unable to perceive blue wavelengths of light, making it hard to distinguish between blue and green, purple and red, or yellow and pink. It also dulls colors (Tritanope).
The term “colour blindness” is frequently used to describe people with “colour deficiency”. Only a very small percentage of people are truly colour blind which is a complete inability to distinguish colours such that everything is seen only in shades of black and white (Unable to perceive any wavelength of colour (Achromatopsia).
Background
Before jumping into interviews, I took some time to further explore the problem space.
I joined the r/Colorblind section on Reddit to learn about the challenges colorblind individuals faces everyday. The hundreds of responses I received were eye-opening and completely changed my perspective, as I hadn’t considered these issues before. Here’s a brief summary of the main challenges they shared:
PAIN POINT #1
Please don’t ask me to pass you the “green pillow” or the “red pen” or literally anything defined by color. Choose any other trait. Also, no I can’t see the red flowers!
PAIN POINT #3
I can’t drive at night in certain areas because there’s too much visual noise and I can’t pick out the traffic lights.
PAIN POINT #5
LED dashboard lights and similar alert lights have been generally the bane of my existence. I can never tell if the defroster is on.
PAIN POINT #2
Making sure my clothes "match," especially those with colorful patterns, feels like an Ishihara test trying to spot all the subtle colors. And defining neutrals is a whole other challenge: is this brown, dull green, or dull red?
PAIN POINT #4
I’m always cautious about mold on bread, especially since the green mold sometimes looks just like the flour on the artisan breads I love.
PAIN POINT #6
I want people with normal color vision can understand how we perceive the color world because sometimes it’s really hard to explain what we’re facing everyday!
The goal
How might we help each colorblind individual with different types of deficiencies to recognize the colors immediately?
Research + Analysis
The problem
Individuals with color blindness or color deficiencies face challenges in many aspects of their daily lives, and these challenges contribute significantly to the inconveniences they experience. Some people do their best to adapt to color-coded environments, even though they can’t be 100% sure about the true colors they are seeing every day.
The 3 main categories of challenges they encounter daily are:
Food
Knowing if meat or chicken is still raw
Choosing ripe fruits and vegetables based on texture and smell
Spinach can look like cow pat, and colorblind children might say some of their food looks like poo!
Being wary of mold on bread, as sometimes green mold has the same texture as the flour on artisan breads
Clothes
The wardrobe often consists mainly of blue, black, gray, and white because they’ve made color-related mistakes in the past and are no longer interested in taking that risk.
The need to ask their partners or children about specific patterns so that they can match with their clothes or things involved in pairs (socks)
Things involving color codes
The need to ask coworkers or staff (in supermarkets, shopping malls, etc.) to verify colors on a weekly or daily basis for maps, charts, mobile games, colored LEDs, etc.
In the market, there are 2 key products that are considered essential support sources for individuals with color blindness: colorblind glasses and colorblind apps. Below is a brief summary of these products. Despite the benefits they offer, there are still some drawbacks that need to be addressed in order to meet the demands of users.
Colorblind glasses
Expensive (ranging from $100 to over $400).
Placebo effects (headaches, eye irritation, and vision side effects).
Cannot be worn at night or while driving because these glasses limit the amount of light that reaches your retina, which can cause problems with vision and reaction time.
Do not allow someone with a color vision deficiency to see all the colors on the visible spectrum.
Do not reveal new colors or restore lost forms of color vision.
Colorblind apps
My Solution
📱 Minimalist Design
Focused on the essentials with simple illustrations and icons
️🎨 Section for non-colorblind individuals
Where they can explore and learn since colorblind people often want to show others what they see
This feature can help educate non-colorblind individuals and foster greater understanding
👀 Colorblind test
Free colorblind test to determine your type of color deficiency
✍️ Clear & concise instructions
Our communication relies mostly on written text
🤔 Simple names that convey colors’ characteristics to avoid confusion
Avoid names (peach, amber, etc. that may be hard to recognize immediately)
Ideation
I compiled a list of all the features from the 3 most popular apps in this field, testing each one to evaluate their pros and cons. Based on that analysis, I focused on preserving the best features while brainstorming ways to improve the progression and overall user experience. From there, I outlined the core features for my app. After the brainstorming phase, I moved on to sketching and creating the sitemap.
Design system & Components
While working on the design system, I focused on key elements such as typography, shadows, icons, border radius, colors, and spacing. For the components, I delivered buttons, descriptions, indicator progress bars, patterns, checkboxes, and navigation.
BRANDING IDENTITY
Final Design
I decided to focus on creating illustrations that are simple, yet still capture the theme of eyes and vision. I wanted to bring these characteristics into the mascots, so even with the minimalist style, the emotions and actions would still bring a vibrant energy.
Here are some of the options I explored, which led to the final illustrations created using Adobe Illustrator.
FINAL SCREENS
Onboarding
Color Adjust
Home
Red Deficiency
Green Deficiency
Blue Deficiency
Vision Mode
Home
Red Deficiency
Green Deficiency
Blue Deficiency
Test
Photos
Switch Cam
& Languages
TAKEAWAYS
Keep it simple & focus solely on the users
📌 Unlike other apps that focus heavily on visuals and colors, I emphasize written communication and aim to keep the main features as simple as possible with the design based on two basic colors as black and white.
📌 I focus a lot on the names and descriptions of colors. By integrating natural language processing (NLP) into the color descriptions, I use keywords related to feelings, emotions, experiences, taste, and smell.
📌 One of the things colorblind people really want is for those with normal vision to understand how they perceive the world. It’s often frustrating for them, especially in a visual world dominated by colors, when they are asked to perform tasks that rely on color differentiation. They want others to understand their perspective, but often lack the tools to make that happen. That’s why I developed a feature called “Vision Mode.” This mode allows non-colorblind users to experience the world as colorblind people do, helping them gain a deeper understanding of the challenges colorblind individuals face in their daily lives and reducing the chances of miscommunication.
In the future…
📌 Introducing a Settings section with various options, including text size, spacing, contrast, highlighted links, text alignment, and saturation.