Using Participatory Design to Help People with Color Vision Deficiency

Colorish app mockup
Colorish app mockup

Overview

Suffering from color vision deficiency, it can be difficult to deal with colors. Collaboratively, when you want to choose a specific color while shopping, creating a presentation, or identifying products, it can be challenging at times. Studies suggest that one in every 12 men and one in every 200 women suffer from Color vision deficiency, which means they would see the same colors differently. The image below shows how someone with protanopia, deuteranopia and tritanopia type of color vision deficiency would see the Pepsi logo.

Image for post
Image for post
Three types of Color Vision Deficiency

Problem Statement

Creating a design solution that helps people with color vision deficiency(CVD) solve their challenges in day to day life.

Solution

Image for post
Image for post
Design process

Process

User interview

The protocol follows a five-part structure:

Section 1: The introduction which includes covering all the necessary details like explaining the interview focus and how co-design studies are conducted, promising confidentiality, and requesting permission to record.

Sections 2 & 3: First, we familiarize ourselves with our participants’ daily life. Then we ask questions to understand:

  • Participant’s needs and challenges associated with color blindness
  • Use of technology to manage issues related to color blindness.

Section 4: We focus on the problems that came up when the participant described their daily activities in the previous section. We start to narrow down on the problem by doing some light brainstorming and try to come up with rough design ideas

Section 5: Finally, we will share our understanding and wrap-up the interview.

Learning from the Interview

To articulate all the information obtained from our participant, we created the following:

  • Empathy map: Empathy map helped us create a shared understanding of the participant needs and populate design ideas.
Image for post
Image for post
Empathy Map
  • Detailed analysis of the interview: includes the specific instances
Image for post
Image for post
Detailed analysis of the interview
  • Storyboards: These storyboards are a representation of the potential design ideas and the problem space
Image for post
Image for post
Storyboards

While we debriefed the interview and brainstormed, we came up with the following findings that encouraged us to inform design direction. These formed our set of key insights and are summarized below:

Image for post
Image for post
Key Insights from the User Interview

Co-design session

We started the session with a series of open-ended questions allowing them a chance to speak freely and reassuring them that this is not an interview with right or wrong answers. Since we were conducting this session remotely using Miro — an online whiteboard, to make sure that the user is comfortable with the software, as an activity we asked them to write on a sticky note for 30 seconds based on a prompt. Before moving on to the process of brainstorming and designing actual solutions, we reviewed notes from the previous session that were laid out on an adjacent board in the form of a journey map. This helped jog their memory, revisit some of the problems they had brought up in the interview and ideas that were discussed earlier. Now that we had eased our participant into a creative flow, we dived into the Crazy 8 sketching activities where all 4 team members (including the participants) spend 8 minutes coming up with 8 different solutions, iterating on a new solution every 60 seconds. By the end of this activity, we had lots of lots of sketches to discuss (an example is shown in image). We approached these ideas in a structured manner using heat map voting (see image) and the six thinking hats (see diagram below) to finalize what to include in the prototype.

Image for post
Image for post
Co-design session activities

Prototype

We designed a mobile application called Colorish — that allows users to scan any article of clothing and find the perfect color matches for their outfits. Additionally, it also allows them to create their own personal digital wardrobe and a virtual avatar to try out different outfits in Augmented Reality. Here are some of the key features of this mobile application:

Onboarding — users can sign up and create a profile so that the app can collect information about them and save their preferences.

Image for post
Image for post
Onboarding screen

Digital avatar — the app can scan the users face and generate a completely customizable avatar that they can use to test their outfits in different environments using augmented reality.

Image for post
Image for post
Avatar creation

Scan outfits — add clothes to your digital wardrobe, see color information, color match percentage based on popular color combinations, check compatibility with the rest of your wardrobe.

Image for post
Image for post
Scan outfit

Outfit Planner — based on the form inputs and the users’ preferences, our system will recommend the best looking outfit and a list of other recommendation to pick and choose from.

Image for post
Image for post
Outfit planner

AR — using AR, the system can place the user’s digital avatar wearing the outfit in a virtual environment so that they can visualize themselves in that scenario.

User Testing

• They found the chart showing the wardrobe color palette as interesting and insightful.
• They were excited to try all the new combinations from all the clothes in their existing wardrobe that they hadn’t tried before.
• They thought AR might be worth a shot if it works.
• The “add partner” feature led them to think that this application will later evolve into another social media app and will eventually lose its meaning when shopping becomes the main objective afterwards

Reflection

Design for one and extent to many: Even though the project is focusing on only one participant with color blindness considering his day to day problems, Anybody who has difficulty in choosing an outfit and color combination could benefit from the Colorish app.

Project video presentation

Our team —

Harmit Sampat

Savani Shrotri

Tripti Rajput

MS in HCI @UMBC #GoRetrievers 🐾

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store