Bungee
A font you can hear
Goal
Transform a highly visual and mouse-based interface into one that’s fully operable and understandable without sight.
Problem Statement
How might we make the Bungee font accessible without visual reliance?
Duration
4 weeks
Team
Smridhi Gupta
Simran Kaur
Gloria Yang
Lanting Ko
Nandita Malhotra
Skills
Secondary Research
Web Accessibility
UX/UI Design
Tools
Figma
Voice Over
Hume AI
Outcome
What we did?
Unfolded Control Panel
Simplified the interface by removing unnecessary collapsible sections to improve visibility and reduce interaction steps.
Accessible Color Picker
Replaced the default color picker with a swatch-style interface that supports keyboard navigation and screen reader access.
Guided Tutorial
Designed contextual onboarding for both first-time and returning users, with support for hover, focus, and an optional tutorial panel.
From Visual to Multisensory
Introduced audio feedback to let users perceive typographic changes not only visually, but also through sound.
Role
My Role
I was responsible for the UI redesign, applying accessibility standards (WCAG) to remove interaction barriers and improve keyboard and screen reader compatibility. In addition, I designed a step-by-step tutorial to support both first-time and return users engaging with the interface through sound and structure.
Background
What is Bungee?
Bungee is a digital font work by David Jonathan Ross, collected by the Cooper Hewitt Smithsonian Design Museum as part of their digital archive. It is a modular, chromatic display font inspired by urban signage. It allows designers to stack layers, change orientations, and create vibrant typographic compositions.
Challenge
Design for Digital Font Wok Accessibility Within a Museum Framework
However, the current web-based exploration of the Bungee font tester relies heavily on visual interaction. Users with visual impairments are unable to access or engage with the interface. Nearly 20 million Americans, or approximately 8% of the U.S. population, have visual impairments. This highlights the urgent need for a more inclusive and accessible design to support interaction with this digital work in a museum context. Since the project takes place within a museum framework, we cannot touch the original font itself. Instead, we focus on redesigning the way users interact with it.
Research
Accessibility Review of the Current Interface
To better understand the needs of people with visual impairments, we conducted secondary research and performed an interface audit of the original font tester. This included reviewing WCAG guidelines and identifying barriers to screen reader and keyboard access.
User
How do users like Anima face when interacting with the current Bungee?
Finding
Control Panel Violated WCAG SC 2.1.1: Keyboard
The current control panel cannot be navigated using the keyboard, and the UI control sections contain simple and straightforward information that does not need to be collapsed to save space. If the current display structure is kept, it would require additional attributes like <aria-expanded> or <aria-controls>, and add extra clicks even for users navigating with a mouse.
Recommendation
Streamline Interaction through Accessible Navigation
We recommend unfolding the control panel to reduce unnecessary interaction steps and improve visibility. To support keyboard navigation, we mapped out the tab order to highlight the logical flow of the focus ring across all elements. Since users may adjust different parameters at any point, we suggest wrapping the entire interface inside a semantic <form>, allowing them to press Enter to trigger the Play action without needing to tab through the entire panel.
Finding
Default Color Picker Violated WCAG SC 1.1.1: Non-text Content
Color is one of the most essential elements of this experience, and the picker plays a central role in controlling it. While the default color picker also violated WCAG SC 2.1.1: Keyboard, it more fundamentally failed to meet WCAG SC 1.1.1: Non-text Content. Although the original color picker allowed for precise and nuanced color selection, it was not suitable for screen reader or keyboard users. Its interface relied primarily on dragging within a visual spectrum, making it nearly impossible to navigate non-visually or provide meaningful alternative text for all possible color choices.
Recommendation
Replace default Color picker with swatch-style one
To address this finding, we replaced the original color picker with an accessible swatch-style interface that supports keyboard navigation. The new picker is arranged in a grid, with each swatch able to be labeled to provide context for screen reader users. To maintain flexibility, we also included a custom option that allows users to input colors using HEX or RGB values.
Finding
Translate a visual-only experience into a multisensory one
Originally, Bungee was a digital font work tester that allowed users to modify font styles and create their own visual experiences. However, it was not accessible to people with visual impairments, as simply adding visual descriptions does not allow them to truly experience the design. Descriptions may help convey structure or context, but they often fall short in capturing the emotional essence of the visual.
Recommendation
Bridge Visual Design and Sound
By incorporating audio feedback, we aimed to let users perceive the font beyond just visuals or textual descriptions. Users can now adjust parameters and control not only how the font looks, but also how it sounds, bridging visual design with auditory experience.
Finding
Make It Understandable for Every Museum Visitor
This is an innovative approach to digital font work in a museum context. Since visitors may come from diverse backgrounds, many might not be familiar with this kind of interactive experience at first glance.
Recommendation
Create a Keyboard-Friendly Onboarding Experience
Because this is now a web-based digital work, we designed the onboarding tutorial to support both first-time and returning visitors. For first-time users, contextual guidance appears on hover or focus, helping them quickly understand each section. All interactive areas are built with semantic HTML elements to ensure they are keyboard-focusable. To make the guidance accessible to all users, we ensured that tutorials are triggered not only on hover, but also on keyboard focus, allowing screen reader and keyboard users to receive the same assistance without relying on pointer interaction. Returning users can revisit the onboarding experience at any time by clicking the tutorial button, which opens an optional tutorial panel.
Reflection
So, What’s next?
This project was a unique opportunity for me to design within a museum context. While I truly enjoyed creating a multisensory experience, the process also revealed areas for improvement that I look forward to exploring in future projects.
Describe color with more expressive language
We will describe colors using more varied and contextual language. For example, phrases like “orange sunset on the beach” or “green trees in the park” can help users not only identify a color, but also feel something beyond the word “orange” or “green.”
Consider gender-neutral sound design
While designing the voice and visual descriptions, we aim to avoid limiting interpretations or reinforcing gender stereotypes. We will explore what kind of sound should be used and whether there is a more neutral option that still feels expressive.
Expand interaction beyond keyboard
Although this project is currently a web-based experience, Bungee will also be displayed in the Cooper Hewitt museum. We will consider whether other forms of interaction—beyond the keyboard—can be used to navigate the experience. This may change how users engage with it in a public setting.
© 2025 by Lanting Ko. All rights reserved.
© 2025 by Lanting Ko. All rights reserved.
© 2025 by Lanting Ko. All rights reserved.
Bungee
A font you can hear
Goal
Transform a highly visual and mouse-based interface into one that’s fully operable and understandable without sight.
Problem Statement
How might we make the Bungee font accessible without visual reliance?
Duration
4 weeks
Team
Smridhi Gupta
Simran Kaur
Gloria Yang
Lanting Ko
Nandita Malhotra
Skills
Secondary Research
Web Accessibility
UI/UX Design
Tools
Figma
Voice Over
Hume AI
Goal
Transform a highly visual and mouse-based interface into one that’s fully operable and understandable without sight.
Problem Statement
How might we make the Bungee font accessible without visual reliance?
Duration
4 weeks
Team
Smridhi Gupta
Simran Kaur
Gloria Yang
Lanting Ko
Nandita Malhotra
Skills
Secondary Research
Web Accessibility
UI/UX Design
Tools
Figma
Voice Over
Hume AI
Outcome
What we did?
Unfolded Control Panel
Simplified the interface by removing unnecessary collapsible sections to improve visibility and reduce interaction steps.
Accessible Color Picker
Replaced the default color picker with a swatch-style interface that supports keyboard navigation and screen reader access.
Guided Tutorial
Designed contextual onboarding for both first-time and returning users, with support for hover, focus, and an optional tutorial panel.
From Visual to Multisensory
Introduced audio feedback to let users perceive typographic changes not only visually, but also through sound.
Role
My Role
I was responsible for the UI redesign, applying accessibility standards (WCAG) to remove interaction barriers and improve keyboard and screen reader compatibility. In addition, I designed a step-by-step tutorial to support both first-time and return users engaging with the interface through sound and structure.
Background
What is Bungee?
Bungee is a digital font work by David Jonathan Ross, collected by the Cooper Hewitt Smithsonian Design Museum as part of their digital archive. It is a modular, chromatic display font inspired by urban signage. It allows designers to stack layers, change orientations, and create vibrant typographic compositions.
Challenge
Design for Digital Font Wok Accessibility Within a Museum Framework
However, the current web-based exploration of the Bungee font tester relies heavily on visual interaction. Users with visual impairments are unable to access or engage with the interface. Nearly 20 million Americans, or approximately 8% of the U.S. population, have visual impairments. This highlights the urgent need for a more inclusive and accessible design to support interaction with this digital work in a museum context. Since the project takes place within a museum framework, we cannot touch the original font itself. Instead, we focus on redesigning the way users interact with it.
Research
Accessibility Review of the Current Interface
To better understand the needs of people with visual impairments, we conducted secondary research and performed an interface audit of the original font tester. This included reviewing WCAG guidelines and identifying barriers to screen reader and keyboard access.
Finding
Control Panel Violated WCAG SC 2.1.1: Keyboard
The current control panel cannot be navigated using the keyboard, and the UI control sections contain simple and straightforward information that does not need to be collapsed to save space. If the current display structure is kept, it would require additional attributes like <aria-expanded> or <aria-controls>, and add extra clicks even for users navigating with a mouse.
Recommendation
Streamline Interaction through Accessible Navigation
We recommend unfolding the control panel to reduce unnecessary interaction steps and improve visibility. To support keyboard navigation, we mapped out the tab order to highlight the logical flow of the focus ring across all elements. Since users may adjust different parameters at any point, we suggest wrapping the entire interface inside a semantic <form>, allowing them to press Enter to trigger the Play action without needing to tab through the entire panel.
Finding
Default Color Picker Violated WCAG SC 1.1.1: Non-text Content
Color is one of the most essential elements of this experience, and the picker plays a central role in controlling it. While the default color picker also violated WCAG SC 2.1.1: Keyboard, it more fundamentally failed to meet WCAG SC 1.1.1: Non-text Content. Although the original color picker allowed for precise and nuanced color selection, it was not suitable for screen reader or keyboard users. Its interface relied primarily on dragging within a visual spectrum, making it nearly impossible to navigate non-visually or provide meaningful alternative text for all possible color choices.
Recommendation
Replace default Color picker with swatch-style one
To address this finding, we replaced the original color picker with an accessible swatch-style interface that supports keyboard navigation. The new picker is arranged in a grid, with each swatch able to be labeled to provide context for screen reader users. To maintain flexibility, we also included a custom option that allows users to input colors using HEX or RGB values.
Finding
Translate a visual-only experience into a multisensory one
Originally, Bungee was a digital font work tester that allowed users to modify font styles and create their own visual experiences. However, it was not accessible to people with visual impairments, as simply adding visual descriptions does not allow them to truly experience the design. Descriptions may help convey structure or context, but they often fall short in capturing the emotional essence of the visual.
Recommendation
Bridge Visual Design and Sound
By incorporating audio feedback, we aimed to let users perceive the font beyond just visuals or textual descriptions. Users can now adjust parameters and control not only how the font looks, but also how it sounds, bridging visual design with auditory experience.
Finding
Make It Understandable for Every Museum Visitor
This is an innovative approach to digital font work in a museum context. Since visitors may come from diverse backgrounds, many might not be familiar with this kind of interactive experience at first glance.
Recommendation
Create a Keyboard-Friendly Onboarding Experience
Because this is now a web-based digital work, we designed the onboarding tutorial to support both first-time and returning visitors. For first-time users, contextual guidance appears on hover or focus, helping them quickly understand each section. All interactive areas are built with semantic HTML elements to ensure they are keyboard-focusable. To make the guidance accessible to all users, we ensured that tutorials are triggered not only on hover, but also on keyboard focus, allowing screen reader and keyboard users to receive the same assistance without relying on pointer interaction. Returning users can revisit the onboarding experience at any time by clicking the tutorial button, which opens an optional tutorial panel.
Reflection
So, What’s next?
This project was a unique opportunity for me to design within a museum context. While I truly enjoyed creating a multisensory experience, the process also revealed areas for improvement that I look forward to exploring in future projects.
Describe color with more expressive language
We will describe colors using more varied and contextual language. For example, phrases like “orange sunset on the beach” or “green trees in the park” can help users not only identify a color, but also feel something beyond the word “orange” or “green.”
Consider gender-neutral sound design
While designing the voice and visual descriptions, we aim to avoid limiting interpretations or reinforcing gender stereotypes. We will explore what kind of sound should be used and whether there is a more neutral option that still feels expressive.
Expand interaction beyond keyboard
Although this project is currently a web-based experience, Bungee will also be displayed in the Cooper Hewitt museum. We will consider whether other forms of interaction—beyond the keyboard—can be used to navigate the experience. This may change how users engage with it in a public setting.
User
How do users like Anima face when interacting with the current Bungee?