Web Platform · Branching Audio
2023
The Free Throw
The Free Throw
The Free Throw
A two-choice branching audio experience where each decision changes the soundscape, crowd color, and final outcome, supported by a behind-the-scenes media carousel.
A two-choice branching audio experience where each decision changes the soundscape, crowd color, and final outcome, supported by a behind-the-scenes media carousel.
A two-choice branching audio experience where each decision changes the soundscape, crowd color, and final outcome, supported by a behind-the-scenes media carousel.
Role
Interaction Design · Sound Integration · Front-End Development
Tools and technologies
HTML, CSS, JavaScript, native Audio API, dynamic SVG, keyboard and touch input, swipe-aware media carousel
01 — Challenge
01 — Challenge
The experience needed to make a high-pressure sports moment feel responsive to the listener’s decisions.
The experience needed to make a high-pressure sports moment feel responsive to the listener’s decisions.
The experience needed to make a high-pressure sports moment feel responsive to the listener’s decisions.
02 — Approach
02 — Approach
Used branching state, changing audio, and a dynamically colored SVG crowd to make each choice produce a distinct sensory outcome.
Used branching state, changing audio, and a dynamically colored SVG crowd to make each choice produce a distinct sensory outcome.
Used branching state, changing audio, and a dynamically colored SVG crowd to make each choice produce a distinct sensory outcome.
03 — Result
03 — Result
Four possible outcomes in a responsive audio-led interaction, plus a keyboard, touch, and swipe media gallery.
Four possible outcomes in a responsive audio-led interaction, plus a keyboard, touch, and swipe media gallery.
Four possible outcomes in a responsive audio-led interaction, plus a keyboard, touch, and swipe media gallery.