Award:

Our Voice of Shadows project just got a grant from Innovation Norway to develop the first phase of design. This incredible opportunity allows us to take a big step forward in creating inclusive, accessible solutions.

My role:

UX-UI design through end-to-end process

Teammates:

Mandana Bababajani Mozhgan Sanie

Tools:

Figma, Miro, Photoshop, Illustration

Duration:

Aug-Sep 2024

Platform:

Mobile

Overview:

Voice of Shadows is an inclusive and innovative mobile app that lets people with low vision identify colors through sound. Using smart technology, it translates colors into unique sound patterns, allowing users to “hear” colors as melodies. This brings a new level of engagement, connection, and enjoyment to their surroundings.

The Inspiration:

Our teammate Mozhgan, an architecture and interior design student at KMD, inspired us with her thesis on creating an inclusive shopping mall for the visually impaired. By using multisensory design—incorporating sound, touch, and smell—she made spaces more accessible.

We also had the incredible opportunity to present our case study at the UD2024 Conference in Oslo. It was amazing to showcase our work and receive valuable feedback on universal design.If you’re curious about our journey and the inspiration behind this project, you can explore the presentation PDF we shared at the conference. It highlights our process, insights, and the core ideas that shaped our approach.

UD2024 Presentation

Background:

For many visually impaired individuals, simple activities like shopping or museum visits can feel isolating, as they miss visual cues that others take for granted. This lack of connection often leads to feelings of isolation and, in some cases, serious mental health issues. Voice of Shadows aims to bridge that gap, enriching daily experiences and improving a deeper connection to the world.

Did you know that 1 out of every 4 blind people has a mental problem and will commit suicide?

500 Million:

It’s estimated that 25% of visually impaired individuals experience severe mental health challenges, including isolation, depression, and a heightened risk of suicide.

2.2 Billion:

Globally, 2.2 billion people struggle with near or distance vision impairment.

Empathize

User Resarch:

Our teammate Mozhgan, who dedicated two years of her master’s studies to understanding visually impaired individuals, led our user research. Her extensive studies, workshops, and findings were essential to shaping our design approach and understanding the real-world challenges faced by our users.

Secondary research:

Imagining “hearing” colors instead of seeing them inspired us to explore sensory perception.

We looked to pioneers like Neil Harbisson—the world’s first cyborg who hears colors—and James Turrell, an artist using light and space to immerse viewers. Their work helped guide our creative vision. This served as an indirect competitive analysis, guiding our creative direction.
To dive deeper, we analyzed existing apps in a competitor matrix, identifying strengths and gaps.
Partnering with Blindeforbundet, we also conducted interviews with ten visually impaired and color-blind individuals in Norway. With translation support, we gathered invaluable insights that directly influenced our app’s design.

Key insights from researches:

Our research highlighted the need for an app that goes beyond mere assistance. Users want a tool that makes color an interactive, immersive experience, helping them reconnect with their environment in meaningful ways.

Understanding Our Users:

By using empathy maps, personas, and storyboards, we gained deep insights into the real needs of visually impaired users. Key findings, like Endre’s desire for independence and Sofia’s wish for social connection, guided our design decisions. Storyboarding highlighted how our app brings colors to life through sound, transforming daily experiences and enhancing users’ sense of engagement and connection.

Define

Project Scope:

This project will focus on developing an MVP for a mobile app that enables visually impaired users to experience color through sound. The target audience is visually impaired adults in Norway, and the MVP will cover core functionalities like color recognition and sound mapping.

Core problem & Value proposition:

Define the Problem with Hypotheses and Assumptions:

Exploring Our Vision:

This structure highlights our top main goals and solutions in a clear, actionable format.

For an in-depth look at our long-term goals, sprint questions, and quick-win solutions, click the button below to dive deeper into our journey and vision for Voice of Shadows.

View full insights document

Point of View Statement:

POV Statement Visually impaired adults need a way to engage with colors independently and meaningfully because existing tools lack the sensory depth to foster an emotional and social connection to their environment, leaving users feeling isolated and disconnected.

Lightning Decision Jam:

This LDJ setup is designed to help the team quickly align on key challenges and implement quick, impactful solutions for Voice of Shadows.

Impact–Effort Matrix:

To further refine priorities, plot tasks on an Effort-Impact Matrix to determine which are high-impact, low-effort (quick wins) and which are high-impact, high-effort (major projects):

MoSCoW Method:

Using the MoSCoW method, categorize tasks based on their importance to the MVP:

Minimum Testable Product:

A mobile app that enables visually impaired users to “hear” colors through unique sound patterns. This MTP aims to provide a functional, engaging experience while addressing the core need for emotional connection and social engagement.

User Journey Map:

This journey map highlights how Voice of Shadows helps visually impaired users discover, engage, and enjoy colors in their everyday lives, enhancing emotional and social connections.

Feature Roadmap:

By focusing on these insights from the user journey map, we can create a more accessible and empowering experience for visually impaired users, ensuring they encounter fewer obstacles and have more positive interactions with the Voice of Shadows app.

Ideate

Site Map & User Flow (Pre-Testing)

We refined the site map and user flow through multiple iterations based on user feedback, aiming for simplicity and clarity.

Final Design of Site Map & User Flow

Final Site Map:

Clear Organization: Main features like color recognition, personalization, and social sharing are logically organized, making navigation intuitive.
Efficient Structure: Improved layout guides users smoothly through the app, providing an accessible and enjoyable experience.

Final User Flow:

Simplified Task Completion: Key actions, like selecting colors, customizing sound palettes, and sharing experiences, require minimal steps.
Personalization Features: Users can now save and access favorite color sounds, fostering a deeper connection to the app and enhancing overall engagement.

Ideation Sketches:

High-Fidelity Wireframe:

We translated our chosen sketch into mid-fidelity wireframes and conducted different usability testing. This helped us refine the app’s flow and identify any issues early on. Our first design focused on core functionalities, offering users basic color recognition features with a simple favorites section for saving colors.

Testing

Iterations & Design Fixes:

Based on feedback, we created new sketches and iterated on our wireframes, conducting another round of user testing to ensure the design met visually impaired users’ needs. We also had a feature design decision:

Personalized Color Sound Palette: Enhanced the experience by allowing users to customize their own color sounds.
Theme Options: Added light and dark themes for improved accessibility.
Color Gallery: Enabled saving and organizing favorite color palettes in a dedicated gallery and favorites section.

Prototype

Most designers focus on aesthetics, but we need to prioritize functionality and accessibility, ensuring that everyone can enjoy and use the design with ease. Consider this: 10% of people online face visual challenges, like color blindness or low vision—that’s 2.2 billion people worldwide. Hard-to-read text, whether due to low color contrast or small font sizes, can drive visitors away—even those with perfect vision.

Poor color contrast can:

Make your website harder to read and navigate
Cause users to miss important information
Impact up to 13% of your conversions, especially on e-commerce sites

The good news? Improving color contrast is an easy fix that can boost engagement and conversions instantly. Following WCAG guidelines can even enhance SEO rankings and increase traffic by up to 20%. By addressing readability, keyboard navigation, and form labeling, you’re not only expanding your audience reach but also improving usability for everyone.

Accessible design isn’t just good ethics—it’s good business.

Visual Identity:

Sound and Color Relationship: In this project, we’re merging color with sound to create a unique multi-sensory experience. There’s a direct link between sound frequencies and colors. Alexander Scriabin mapped specific pitches to colors, suggesting that each color has an associated sound, enriching our sensory experience.

How It Works?

Color Properties: Each color is defined by its shape, reflection, frequency, and wavelength.
Sound Conversion: We convert these properties into corresponding sound waves.
Representation: Each color or combination is represented by geometric shapes and gradients, paired with unique sound waves.

Defining the Brand:

Our brand attributes emphasize inclusivity, accessibility, innovation, and empowerment. These qualities reflect our commitment to creating solutions that bridge gaps for visually impaired individuals, using technology and thoughtful design to transform their interaction with the world into a more enriching and inclusive experience.

To create an inclusive design, we prioritized the following elements:

Large Icons and Buttons: Essential for ease of use, accommodating various user needs.
Black and Yellow Color Theme: Recognized as the most effective for visually impaired users, enhancing visibility.
Bold, Simple, and Accessible Design: Featuring both light and dark themes to cater to diverse preferences and environments.

These foundational elements guide our design philosophy, ensuring that Voice of Shadows remains user-centric and accessible for all.

Hi-Fidelity Prototype:

We were finally able to move on to our hi-fi prototype, which included the entire design completely laid out.

Home Screen:

After choosing the theme you can see the home screens features.

Personalize Feature:
Enhances user engagement by allowing customization, making daily interactions with colors more enjoyable.
Save to gallery & favourite Button:
Lets users save favorite color-sound palettes for easy access, creating a personalized experience.
Camera for Object Detection:
Analyzes pictures to detect colors and convert them into corresponding sounds.
Upload/Take a Photo Functionality:
Users can upload or take photos to “hear” the colors, fostering a meaningful connection with their surroundings.

Color Detection Screen:

Home Button:
Quick access to the main menu and app features.
Play Individual Color Sounds:
Listen to each detected color’s sound to appreciate individual hues.
Play All Colors Mixed Sound Together:
Experience a blend of sounds, creating a unique auditory experience.
Save to Gallery & Favorite Colors:
Easily save favorite colors for personalized playback.

Personalized Screen:

Play Each Color Sound:
Enjoy individual sounds from saved color palettes.
Add to Sound-Making Palette:
Combine favorite colors into new sound palettes for a personalized auditory experience.

Save Screen:

Personalized Saved Color Palette:
Displays each saved palette with its image and associated sound, allowing users to revisit favorite combinations anytime.

Final Result: Hi-fidelity prototype:

Our high-fidelity prototype showcases the complete design of Voice of Shadows, with updates based on user feedback for improved accessibility and usability. Key adjustments include:

Enhanced Icon Design: Distinct shapes, like circular and square buttons, improve recognition and usability.
High-Contrast Color Scheme: A bold yellow and black palette ensures high visibility and easy perception, especially for visually impaired users.

Explore the Prototype: Click the button below to interact with the prototype and experience the app’s features firsthand.

Test the prototype

My Learning Outcomes:

This project stands out as one of my favorites. Designing an inclusive app like this is a rare opportunity, allowing me to tap into creativity and understand the users’ experiences deeply.

I learned to trust the research process and remain flexible, moving beyond initial assumptions to explore innovative solutions. Engaging with visually impaired users highlighted the importance of bias-free research and real needs in design.

Through early experimentation and rapid prototyping, I discovered the value of continuous testing for refinement. The project introduced me to multisensory design, blending color and sound for improved accessibility.

Collaborating under deadlines enhanced my teamwork and communication skills, while managing the project honed my critical thinking and project management abilities. This experience reinforced how thoughtful design can empower users.

Borders Website