interlude
A part-time Pilates instructor spends 2–7 days a month building and learning class music. I designed a responsive web app to get that under 30 minutes. A pilot is done; testing with her is next.
7 min read
overview
the problem
The music is the class, and preparing it doesn't fit her week. A. teaches 8–12 classes a week around a full-time job. I interviewed her once and treated what she said as hypotheses, not findings.
"You could be an okay instructor with a great playlist, and it'll be an amazing class."
— A.
She cues to the music — Counts on the beat, starts a variation on the bass drop, holds through the quiet parts. 45-minute arc, ~140 BPM.
Two apps, no link — Songs collect in a Spotify inspo playlist; timing lives in Intervals Pro. Classes run long.
Confidence lags — She learns songs by living with them, and knows them cold by week four, just in time to start over.
the gap
Tools plan a class or play music. None plan the month.
what i built
Shape — songs dropped into a six-section class arc, with total time against 45:00.
Learn — markers on each song’s drops, with a cue note on each.
Teach — one screen for the class: clock, current song, next cue.
Next month — starts as a copy of this one; swap what got stale.
left out on purpose
Auto-arrange — ordering songs is her craft, and the order is how she cues.
AI playlists — new songs are the opposite of what she needs: songs she already knows.
key decisions
plan on a laptop, teach from a phone
finding — she plans in scraps of time and teaches standing at the front of a room.
Responsive web, one link — no install; it opens on the studio laptop or her own phone.
Wide where it’s dense — Shape lays 16 songs across six sections; at 1440px the arc, the list and the tray sit side by side.
Phone where she stands — Learn and Teach are phone-first: a bottom tab bar, and options in bottom sheets within thumb reach.
trade-off — a web app can’t count on audio when the phone locks, so Teach keeps the screen awake while a class runs.
name the fix, not just the problem
finding — her real October playlist is 50:01, for a 45-minute class.
The mid-fi said “5:01 over” and left the maths to her. The hi-fi does the maths.
Three kinds of fix — take a song out; end one early; or both: “Take out Electric Love and end Love Me Like You Do 0:48 early → lands at 45:00”.
One rule for “on time” — within ±30 s counts, on Home, Shape and Teach alike.
Found from anywhere — Home’s overrun has a Fix it link straight to the suggestion.
edge case — if she teaches it anyway, Teach names the casualty: “Sports car gets cut short and 1 song won’t play.”
trade-off — suggestions only trim, never reorder: the order is hers.
draw the arc as effort, not tempo
finding — her class has a shape, but the mid-fi drew it as a row of grey blocks.
Height from tempo turned her first break into the tallest block. In Pilates the movement slows down, not always the music. Height now follows planned effort, and the tempo line exposes the clash: that break averages 135 BPM, as fast as the work around it.
trade-off — tempo still matters, so it rides on top as a dotted line instead of setting the height.
learn by marking, not auto-detection
finding — she learns a song by listening for its drops, and Spotify won’t share audio analysis with new apps.
Four marker types — Build, Drop, Hold, Count in: the moments she actually cues on. Keys B, D, H, C on a laptop.
Fine-tuning — ±1 count nudges, and Loop around it to drill one drop.
An 8-count on the beat — at the song’s BPM, with ½× / 1× / 2× for half-time songs.
Got 5 minutes? — Home loops the drop of the song she knows least, because her confidence is capped by her weakest song.
trade-off — marking by hand is slower, but works on any file, and the marking is the learning.
one screen in class, with two clocks
finding — mid-class she can’t juggle two apps, and the class has to end on time.
Class clock vs. music position — the big clock counts real time to 45:00; the music can drift and recover.
A countdown, not an alert — the cue card counts to the next marker and shows her note. She can prepare without looking away from the room.
Adjust — Started late −1 min, Repeat this song, Skip to Break. The overrun line updates on each.
Room view — only clock, cue and song, readable from a mat.
trade-off — one clock was simpler, and wrong as soon as anything went off-script.
next month starts from this one
finding — she trades variety for familiarity and keeps what worked.
Keep or Swap per song — known songs stay put, with their markers and cues.
Gaps remember — each swap leaves “For Peak (~140 BPM)”, so a replacement is matched to its slot, not a blank class.
Picker order — new inspo songs first, kept songs next, swapped-out songs last.
trade-off — a copy carries over last month’s problems too, so November opens 5:01 over until she trims it.
pilot & scorecard
A dress rehearsal, not validation. I ran my six-task test kit as an instructor like her, on a laptop and a phone, then scored it against the bar I set at the start.
Fixed: songs out of reach — every Home row now opens its song; Learn has an All songs sheet on phones.
Fixed: three ways of adding up time — Shape and Inspo now show placed time plus what unplaced picks would add.
Fixed: swaps lost their slot — gaps now keep their section and tempo.
visual system
One colour means “now” — interlude blue (#B5C7EB) fills only what matters this second, like the cue card and the 5-minute bar. A deeper blue carries text at 7.8:1.
The wash tells you the song — in Learn and Teach the background takes three colours from the album art, so a glance across the room says which song is on.
Glass where content scrolls under — tab bar, transport and sheets stay legible without hiding the list. Reduce transparency makes all of it solid.
Checked — WCAG 2.2 AA in light and dark, with contrast measured on the glass itself.
constraints & reflection
Licensing — her streamed music can’t play in-app. That’s the “one app” goal, and it’s a business question, not a screen.
Sync — laptop and phone don’t share data yet.
Evidence — one interview and a self-run pilot. Next: A., then 5–7 more instructors, on the scorecard above.
I designed in Figma and built the prototype with Claude Code, because a mock-up can’t keep time, and keeping time is the product. A. called it “a great idea”; she’s also a friend, so that’s encouragement, not evidence. Next time I’d put it in her hands before polishing the glass.