Empowering education for visually impaired students

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.

My Role

• Conduct user research
• Provide a UI Kit
• Wireframing
• Create high-fidelity designs (Class and Quiz features)
• Prototyping
• Conduct usability testing (including accessibility testing)

Challenges

• Find users with visual impairment/disability
• Understanding the types of visual impairment
• Understanding about accessibility and inclusive design

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.

https://www.youtube.com/watch?v=Ybh0jbEZ8x4

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

SKETCH

Stick It, Sketch It!

After gaining a basic understanding of visual impairment, we proceed to generate every idea that comes to our mind and write it down on post-its.

Next, each of us sketched ideas using the Crazy 8’s method to depict the solution ideas. There are 4 crazy 8 we made, here below is only my crazy 8.

Crazy 8's (Tebe)

DECIDE

The Vote That Shapes the Vision

After sketching, my teammates and I presented our solution to discuss which features would be better for our users. We then engaged in a constructive critique of each other's solutions, carefully considering the strengths and weaknesses of each solution. Finally, we voted to decide on the best solutions that would address the needs of our users most effectively.

PROTOTYPE

From Sketch to Screen

We turned our ideas into an interactive design focused on usability and accessibility. This allowed us to test key features, simulate the user experience, and gather feedback for improvements.

High-fidelity Designs

From Screen to Hand

In this phase, we transformed our chosen ideas into an interactive prototype that users could experience firsthand. The prototype focused on key features to address accessibility for visually impaired students, ensuring inclusivity and ease of use. This step allowed us to bring our concept closer to reality and prepare for user validation in the next stage.

Or experience it with your own hand

VALIDATE

Accessibility Check: Yay or Nay?

We conducted a moderated usability test to identify any usability and accessibility issues with our design. We invited 3 participants that we interviewed before and we observed them while they performed the tasks we specified, asked them to think aloud and also asked them questions related to their experience while testing. The color blind users didn’t find any issues after conducting the test. However, low vision user tends to prefer the magnifier tool feature over the adjustable font size feature.

This test also helps us validate various accessibility factors, such as color contrast, font size, and the different states of the components we use. It allows us to ensure that the design is accessible for users with visual impairments, such as those with color blindness, low vision, or any other visual impairments.

Key Takeaways

A BIT OF MEME FOR YOU :D

Braille/tactile pavement in Indonesia

Wheelchair ramp fail