Designing Beyond Sight: An Inclusive Web Experience for the Bungee Font Tester
Client Project
Accessibility Evaluation
WCAG
UIUX Design
Audio UX
OVERVIEW
In collaboration with the Cooper Hewitt Museum, my team and I worked to make the Bungee web-based font tester more inclusive and accessible. The goal was to support users who rely on visual description by ensuring the interface could be clearly understood and navigated with a screen reader to ultimately helping Cooper Hewitt Museum to deliver a more equitable digital experience.
THE CHALLENGE
Imagine walking through a city at night. A bold neon sign catches your eye, its layered colors, playful shapes, and dimensional letterforms bringing the street to life. Now imagine experiencing that same moment without being able to see.
How do we translate the visual richness of a typeface like Bungee into something equally expressive and meaningful for those who rely on sound rather than sight?
Client
Cooper Hewitt Museum
Role
Accessibility Specialist
Team
Gloria Yang (Me)
Lan-Ting Ko
Smridhi Gupta
Simran Kaur
Nandita Malhotra
Timeline
Apr - May 2025 / 4 weeks
Skills
User Research
User Interface
Visual Design
WCAG Guidlines
Accessibility Evaluation
OUR SOLUTION 🌟
To bridge this sensory gap, we introduced:
Unfolded Control Panel
Simplified the current interface by removing the accordion style toggles to ensure all controls visible on the panel to improve accessibility, visibility, and reduce interaction steps.
Annotated Color Picker
Replaced the default gradient color picker with a swatch-style with descriptive labels to support keyboard navigation and screen reader accessibility.
Guided Tutorial
Designed a contextual onboarding tutorial to guide users step-by-step to understand the interface, available controls on the panel, and how to use this font tester.
Multi-Sensory Design
Introduced audio feature to let users reimagines how this rich and visual-heavy typography can be experienced not only through sight, but also through sound
↓ So how did we get here? Let me walk you through the process! ↓
BACKGROUND
What is Bungee?
Bungee is a digital font created by David Jonathan Ross and collected by the Cooper Hewitt Museum as part of their digital collection. It is a modular, chromatic display font inspired by urban signage. It allows designers to stack layers, change orientations, and create vibrant typographic compositions.
WE STARTED WITH DOING RESEARCH
It turns out, visual impairment is far more common than most think.
51.9M
Americans experience vision loss
307K
are completely blind
We realized that today’s tools rarely translate visual richness into non-visual forms. And for a digital font tester, a product all about form, rhythm, and weight, that gap is even more striking.
RESEARCHING ON ARTS THAT CAN SEE, FEEL, AND HEAR
To bridge the gap, we conducted industry research on art pieces that are already building multi-sensory experiences – see, feel, and hear.
Clarke Reynolds, a blind artist, transforms letters into tactile code, allowing people to feel the structure of language.
Shannon Lin paints using audio, explores how sound can become texture, shaping visual art through rhythm and resonance.
Dolby’s audio guides, developed by Bobby Goulder, demonstrate how sound can narrate and evoke artworks with clarity and emotion.
Jack Coulter, a synesthetic artist often described as “the painter who sees music in colour,” creates work directly inspired by sound, visualizing music as vibrant, expressive brushstrokes that blur the lines between what we hear and what we see.
These examples showed us that sound and touch aren’t alternatives to vision—they’re powerful mediums for storytelling in their own right.
WHAT WE FOUND THROUGH THE RESEARCH?
From the research, we identified these two key findings that led our design creation:
Audio can guide, describe, and emotionally connect users to visual content in meaningful ways.
When thoughtfully integrated, sound can evoke the mood, rhythm, and texture of visual work.
These insights helped shape how we reimagined the Bungee font tester that is not just as a visual interface, but as an inclusive, multi-sensory experience that speaks to more users in more ways.
FROM INSIGHT TO OUR PERSONA
As we dug into our research, one big question raised on how we should approach to the design solution:
How can we translate sight into sound – not just describe it?
This became our creative north star.
To ground this abstract question in a real user’s experience, we imagined Amina
Amina: museum educator who’s legally blind
🖼 32-year-old museum educator in Chicago, IL
💻 Devices: iPhone, AirPods, Laptop
♿️ Disability: Legally blind since birth
🦮 Assistive Technology (AT): VoiceOver, audio tours, screen reader
ACCESSIBILITY EVALUATION
To better understand how users with visual impairments might engage with the Bungee font tester, we began by conducting secondary research and auditing the original interface. This included reviewing WCAG guidelines and identifying specific barriers to screen reader and keyboard navigation.
What challenges might a user like Amina face with the current Bungee tester?
Challenge #1: Control Panel Violated WCAG SC 2.1.1: Keyboard Access
The existing control panel was not operable by keyboard, blocking essential access for non-mouse users. Even for users with no vision disability, the accordion layout introduced unnecessary friction by requiring extra clicks. Since the controls contain simple content, collapsing them adds complexity without real benefit. If retained, additional ARIA attributes would be needed yet the interface would still fall short of inclusive interaction.
Challenge #2: Default Color Picker Violated WCAG SC 1.1.1: Non-text Content
Color is central to Bungee’s visual identity, but the default color picker posed two major issues. First, it was not navigable by keyboard (violating WCAG 2.1.1). More importantly, it lacked non-visual alternatives (violating WCAG 1.1.1), relying entirely on visual dragging interactions. This excluded users who cannot perceive or manipulate visual color spectrums.
Challenge #3: Bridging Visual and Sensory Gaps
The original font tester was built for visual experimentation, but that approach left out users who rely on non-visual modalities. Descriptions alone is helpful, but couldn't convey the emotional tone and personality of the Bungee typeface. We needed a multi-sensory solution to translate the visual impact into an equally rich experience through sound.
Challenge #4: Make It Intuitive and Accessible for Every User
As a web-based font tester, Bungee should be approachable to a wide audience with varying levels of technical skill and familiarity with interactive design tools. However, the original interface offered little onboarding or guidance, making it unclear how to begin or what the controls did. Without clear labels or descriptions, users, especially those relying on screen readers, faced barriers to understanding the purpose and functionality of each section. A more guided and intuitive experience is essential to ensure accessibility for all users, not just experienced designers or developers.
TRANSLATING FINDINGS INTO SOLUTION
With a deeper understanding of Amina’s challenges as a legally blind museum educator, we set out to redesign the Bungee tester interface to better support users navigating without sight.
Demo 1: Guided Tutorial & Updated Interface
Here's how we brought these ideas to life in Demo 1:
Guided Tutorial for Navigating Nontraditional Interfaces
Navigating nontraditional interfaces can be especially disorienting for screen reader users. To address this, we introduced a guided tutorial that walks users through each section in the same sequence a screen reader reads the DOM. By defining and describing each region, the tutorial makes the purpose of every control clear—removing guesswork and building user confidence.
Simplifying Layouts for Better Usability and Improve Accessibility
We replaced the accordion layout with a fully expanded view so users can see all options like font weight, orientation, and colors all at once. This reduces unnecessary navigation and cognitive load, especially for non-visual users.
We also redesigned the color picker using labeled presets and added a Play button that plays back the design’s “feel” through sound, making Bungee’s spirit accessible to all users. To keep the experience on-brand, we used the Bungee font throughout the interface.
✨ The Challenge: When Visual Richness Meets Accessibility Barriers
The Bungee font by David Jonathan Ross is more than a typeface. It’s a vibrant celebration of urban signage. With layered chromatics, vertical orientations, and bold personality, Bungee is a visual experience.
But what happens when the visual can't be seen?
🔍 “Standard screen readers fall short. They strip away the texture, rhythm, and voice that make Bungee so distinctive.”
Creating an accessible yet expressive experience meant thinking beyond screen reader defaults. We needed to preserve the essence of Bungee for users relying on sound—not sight.
Demo 2: Bridging Sight and Sound for Multi-Sensory Experience
Users can choose font characteristics, and then press Play to hear how those visual styles translate into curated sound effects from bold bass for thick weights to ascending tones for vertical stacking.
WHY THIS APPROACH MATTERS?
Accessibility as Creative Opportunity
This approach transforms accessibility from a checklist item into an innovative creative opportunity. By bridging visual and audio experiences, we:
Honor the creative intent behind Bungee, preserving tone and emotion.
Deliver equal richness of experience, no matter how someone accesses it.
Build a repeatable framework for translating other visual-first typefaces into sound.
FINAL REFLECTION
This isn't just about making Bungee accessible; it's about reimagining what accessibility can be in the digital age. Not just accommodating different needs but celebrating them.
By treating accessibility as a creative challenge rather than a constraint, we unlocked new ways to experience typography and making the web not only more inclusive, but more expressive for everyone.