Demo 06 · Design thinking
Redesigning a show page for accessibility
The engineering demos prove I ship. This proves how I decide what to ship. A clear design process, from persona to journey map to information architecture to a measured result. Every artifact is built as code. No Figma needed.
The problem
A listener hears a track on air and wants to find the show, play it, and save it for later. On the current page that takes too many taps, fails keyboard users, and leaves nothing to come back to. I scoped a redesign of the show and listen flow around one person and her scenario.
1 · Persona
Priya, 34. Commuter and member.
Listens on her phone, often one handed on transit.
- Goal: capture a song or show the moment she hears it.
- Goal: get to play in the fewest taps.
- Context: uses VoiceOver some mornings, with bright sun on the screen.
- Frustration: I lose the thing I wanted before I can save it.
2 · Context scenario
Priya is on the bus when a track catches her ear. She pulls out her phone in bright sun with one hand on the rail. She wants to know the show, start it from the top, and follow it so tonight she can pick up where she left off. No squinting, no digging through a menu, and VoiceOver reading everything right. The design has to make that whole arc feel like three easy taps.
The method: write the story first, then pull the requirements from it. The story above leads straight to the opportunities in the experience map.
3 · Experience map
Reading down each phase shows the pain points in red and the design opportunities highlighted. Those are what the redesign has to answer.
Catches a song on air and wants to know what it was.
“What was that? I need to find it before I forget.”
CuriousPainNow playing is buried three taps deep.
OpportunityA persistent now playing bar with one tap to save.
Opens the site on her phone to find the show.
“Which show is on at 9am again?”
UnsurePainThe schedule is a dense table with no clear focus order.
OpportunityA card based schedule with clear focus states.
Starts the live stream or the on demand episode.
“Just let me press play.”
FrustratedPainThe play button is an unlabeled icon. A screen reader says button.
OpportunityA labeled, keyboard ready player (Demo 02).
Wants to follow the show and come back later.
“Will I be able to find this again?”
HesitantPainNo saved state. Nothing personal to return to.
OpportunityA My Station dashboard (Demo 05).
4 · Information architecture and flow
Diagrams as code. They live in the repo as text, not exported images. Left is the site structure. Right is the redesigned task flow.
5 · Wireframes, before and after
- Icon only controls, no labels
- 3.1 to 1 text contrast on cream
- Schedule is a non semantic table
- Focus order jumps around
- No skip link, nav not reachable by keyboard
- Every control labeled and in tab order
- All text 4.5 to 1 or better (AA)
- Card schedule with real headings
- Logical order with a visible focus ring
- Skip link and landmark regions
6 · The result, measured
Accessibility is testable, so the redesign is measured, not claimed. Scores are from axe-core and Lighthouse on the prototype.
| Metric | Before | After |
|---|---|---|
| axe violations | 23 | 0 |
| Lighthouse a11y | 61 | 100 |
| Keyboard operable | Partial | Full |
| Contrast failures | 9 | 0 |
| Labeled controls | 54% | 100% |
These numbers are from the prototype I built for this case study, not a live KCRW page. The accessible player in Demo 02 and the dashboard in Demo 05 are the after of this story, built for real.