Creating an assessment app sounds simple, right? Now add the challenge
of making it accessible for students with visual impairments—that’s how
Tara: Teman Netra was born.
Before you read the study case, here is the story behind it:
Tara: Teman Netra is a platform developed in a “4C UX Challenge”
competition held by Universitas Brawijaya. They call it “challenge”
because in the final stage every team has to make a product within a
week with a predetermined theme. The challenge itself is to create a
mobile app to help students with disabilities in terms of doing
quizzes & course evaluations. Our team decided to make a learning
platform to help students with visual impairment/disability. The
platform also helps teachers to evaluate students’ quizzes.
PROJECT OVERVIEW
❓ Problems
Students with visual impairments face
significant challenges when taking quizzes through traditional methods, resulting
in lower scores and poor performance.
These methods often lack accessibility and inclusivity, leaving students struggling to participate equally. Additionally,
delayed evaluations from teachers create further obstacles, hindering
timely feedback and progress.
🎯 Objectives
To create an accessible and inclusive platform that enables students with visual impairments to take quizzes independently
and receive instant evaluations, empowering them to achieve better academic performance.
Design Process
Since we had to make the product within a week, our team decided to use
the Design Sprint framework to tackle this problem. It helped us to
challenge our assumptions about the users’ problems in a short amount of
time.
Phases of Design Sprint. Image by Interaction Design Foundation.
UNDERSTAND
Types of Color Blindness
Since our product focuses on visual impairment/disability, the first
thing that came first to our mind was color blindness. So, we need to
understand the overview of the color blindness. I found out that there
are many types of color blindness, the common types are Protanopia and
Deuteranopia — which makes you unable to tell the difference between red
and green, and Tritanopia — which makes you unable to tell the
difference between blue and green, purple and red, and yellow and pink,
also makes colors look less bright (National Eye Institute, 2019).
After getting a basic understanding of it, we are concerned about our
color system, “what if the users misunderstand the color?” “does it
matter to give color to our product?” “should we make it black and
white?”. Therefore, to challenge our assumptions, we tested our color
system using Coblis — Color Blindness Simulator to get each perspective for each type of color blindness.
Normal Color System
Protanopia (Red-blind)
Deuteranopia (Green-blind)
Tritanopia (Blue-blind)
Monochromacy
If you take a look of the color systems above, the problem is not with
our primary color (Blue), but the main problem is with the color state
(positive (green), negative (red), warning (yellow)). Users are unable
to interpret the state of the component, for example an error, success,
or warning on a text field or button if they can’t see the color state.
To solve this problem, we have to create a design system that has extra
information in each state of the component, such as supporting text and
icon to make it more clear.
States on text field component
Wait, how do totally blind people use an app? 🤔
We were wondering, how do blind people actually use an app? Through
online research, we got a video that shows us how they do it, in this
video they compared the accessibility on Gojek and Grab to order a
food.
We realized that they were using an accessibility feature called
screen reader or text-to-speech or VoiceOver (iOS) to read alternative
text (alt text) aloud as feedback. Unfortunately, Figma didn’t support
alt text to be read by screen reader and we didn’t find any tool,
plugin, or website which can be linked to Figma to do so.
Besides that, we conducted interviews to 3 users who were diagnosed
with color blindness and low vision, two users are color blind
(Protanomaly and Tritanomaly) and one has blurred vision to understand
their pain points. Honestly, we surprised that we found a person with
Tritanomaly (Blue-weak) color blindness because only 1 in
30.000-50.000 is affected by this type of color vision deficiency (CooperVision, 2015), which is rare.
From the interview, we mapped out their emotions, thoughts, and pain
points, helping us design a solution that genuinely meets their needs.
Empathy Map
