Playwell • iPad-first PWA • Active development

Ten seconds is a long time on stage

I perform live music alongside designing. A show is forty to fifty songs, and everything I needed to know about each one lived somewhere else. So I designed Playwell, and then built it, which is how I found out how much I had got wrong.

Role
Founder, designer and builder
Platform
iPad-first PWA Responsive web
Status
Active development Native launch planned
Skills
Information architecture Data modelling Design systems Front-end build
Playwell on iPad: the library behind, a song open for performance in front. Shown with a demo library of public-domain English songs.
Overview

Seven places to look, and the song has already started.

Knowing the song is only part of the job. On stage I might need the lyrics, the key, the tempo, the set order, a transition into another song, or a note somebody changed in rehearsal. None of it lived together: the setlist somewhere, lyrics somewhere else, a change sent through WhatsApp, a song saved in Notes, and the key in my head, usually.

Playwell is an iPad-first performance and setlist workspace for musicians: songs, lyrics, keys, tempos, artists, mashups, events and bands. I designed it and built it, specifically so I could find out what a design decision costs three days later on a stage.

Find

Thousands of songs, in seconds

How quickly can I find the right song when I only half-remember what I’m looking for?

Perform

Less interaction, not more

How little can the interface demand once I’m on stage and my hands are busy?

Organize

Songs belong to things

Can the product understand artists, events and mashups, not just rows in a database?

Problem

The problem was never access to music. It was access to context.

There are excellent tools for listening, reading lyrics, sharing files and taking notes. My job during a performance was never “find this song”. It was “tell me what I need to know about this song, right now, without pulling me out of the performance.”

01

Setlists in one app, lyrics in another

02

Changes arriving through WhatsApp mid-rehearsal

03

Keys and tempos kept in memory

04

Four to eight seconds lost per lookup, with a room watching

One song. Seven places.
The reframe

“Not a better music app. A workspace with a very specific tolerance for latency.”

Solution

One workspace, built for the four seconds you actually have.

Underneath Playwell are three moments rather than a set of screens: prepare, find, perform. Every feature has to justify itself against one of them, and the interface gets less demanding exactly as the environment gets more demanding.

PrepareFindPerform

One library, with search at the top of every screen and the tab bar within thumb reach.
What changed on stage

One place to look

Lyrics, key, tempo, notes and what’s next on the same screen.

Search is the way in

Persistent search and direct filtering, with navigation kept deliberately shallow.

Built for a dim stage

Large targets, near-black reading surfaces, and nothing pure white anywhere.

Core Flows

Four moments in a performing week.

Each flow answers one of the questions I kept protecting.

Find

Search a 2,800-song library

Search, all songs, artists, favorites, events and mashups are all views onto one record. Change a key anywhere and it changes everywhere.

Perform

Read lyrics from several feet away

Title and key scaled about 1.6×, lyrics 1.2× on top, a near-black surface and auto-scroll with a real slider. Key, tempo and what’s next stay visible without a tap.

Organize

Run the show from an event

An accordion for performing and a run sheet for organising. Reorder either and the other follows; a key typed for one event never touches the master library.

Organize

Build a mashup from real songs

A mashup is a relationship between songs, not a new record. Sections link to their source song like a Figma component and its instances.

Outcome

From an idea during performances to a product I use in them.

Playwell has no adoption metrics, retention curve or usability score, because it doesn’t yet have users beyond me and the musicians I play with. These are the honest numbers.

2,800+songs

Managed in the working product

1,100→ 2,800+

Library growth that stress-tested the architecture

89checks

Automated browser checks, zero uncaught errors to pass

PWA+ cloud

Installed on iPad, syncing across devices, working offline

Publishing invented numbers would be easy and worth nothing. What’s next is mostly architecture: shared-with-me events, per-song band libraries, sync hardening, onboarding for someone who isn’t me, and eventually native iOS and Android.

Back to the original problem
Before
Seven places to look for one song
After
One record, reachable from six entry points
Before
Setlists as saved documents nobody updates mid-show
After
Events as an operational layer: arrange, adjust, perform, reuse

So, how did we get here?

From what exists today, to why it’s built this way.

Research

I was already the user. Here’s what that is and isn’t.

I could use the product in the exact place the problem happened, so instead of running a study I documented friction where it occurred across the four moments of a performing week: before a show, rehearsal, performance, and after. The loop of perform, notice, change, use again has run through every version.

What it is
Practitioner evidence: repeated exposure to the real environment, under real pressure, with real consequences.
What it isn’t
Formal research. No participant panel, no moderated sessions, no statistical claims.
Friction documented where it happened, across the four moments of a performing week.

Four things I was wrong about in front of an audience

Insight 01

Speed matters more than discovery.

Why it mattered

Exploring is pleasant at a desk and a liability mid-show.

→ Persistent search, shallow navigation
Insight 02

A song is more than a title.

Why it mattered

Performers need song, artist, key, tempo, lyrics, event, notes and relationships.

→ The data model is the design
Insight 03

Stage interaction is not desk interaction.

Why it mattered

Divided attention, bad light, busy hands, a device feet away.

→ Less, larger, darker
Design Decisions

Five decisions reality made for me.

Each came from the product failing to describe the world correctly.

Decision 01

A library, or an information system?

Scrolling is fine at fifty songs and a failure at two thousand. So there are multiple paths into one library, and the rule that keeps it coherent is to never duplicate information. Favorites isn’t a folder you copy into, events don’t own their songs, and artists aren’t a second database.

A song opened from inside an event is the same record as in the library. Change a key anywhere and it changes everywhere.
Decision 02

Everything on screen, or what matters now?

Early versions showed every control and field. That worked at a desk and stopped working the first time I used it in low light with a song playing. Search became the primary way in, key, tempo and time signature collapsed behind More filters with a count badge, and edit controls moved away from performance controls entirely.

Small fix
An 8px gap had pushed Sort and Clear onto a second row, costing about 44px of song list. Horizontal space is cheap on an iPad. Vertical isn’t.
Search first. Key, tempo and time behind More filters. Easy mode strips each row to title and key.
Decision 03

A setlist as a document, or an operational layer?

My first model was an event as a list of songs. Real shows broke it inside one night: if a change costs more than living with the error, people live with the error. So events became something you create, arrange, adjust, perform and reuse, with two views that always agree.

Decision 04

When an edge case becomes the model

53 of the 99 records in the bundled library are multi-section. More than half of what I perform isn’t a song, it’s a sequence. A mashup became a relationship between songs, and sections link to a standalone source song so a typo fixed once is fixed everywhere.

Detail
Titles like Song A x Song B auto-split, but only on a whitespace-bounded x, X or ×, so Experience, Taxi and Max are never touched.
Decision 05

The bug that was really a definition

Cross-device sync shipped and did nothing. One line skipped any change authored by the signed-in user, to ignore the echo of my own writes. That’s correct until one person uses two devices. I had written user where I meant device, and every consequence followed correctly from that one wrong noun.

Fix
Echo detection by content rather than identity, server-owned timestamps, a 45-second backstop poll for venue wifi, and sync diagnostics inside the product.
Validation

The prototype doesn’t get the final vote. The performance does.

I don’t have a usability percentage for Playwell and I’m not going to invent one. What I have is a product tested in the least forgiving environment I know, where a failure isn’t a metric, it’s a gap in a song.

  1. 01

    Real performance use

    Shows, in front of people, in real time.

  2. 02

    Rehearsal use

    Where most setlist changes actually happen.

  3. 03

    Large-library testing

    Around three thousand songs, not the twenty a demo would use.

  4. 04

    89 automated browser checks

    Zero uncaught errors required to pass.

  5. 05

    Feedback from other musicians

    The first signal from outside my own head.

Iteration

Playwell wasn’t redesigned once.

It changed every time reality disagreed with me, and each stage answered exactly one question. I built it with no framework and no bundler, offline-first with Supabase and row-level security, so a design decision reached the stage within about three days.

V1
Can I keep my songs in one place? Nothing forced it. I was tired of screenshots.
V2
Can I retrieve anything quickly? Forced by the library passing a few hundred songs.
V2.2
Can I actually use this on stage? Forced by taking it to a real show.
V2.6
Can it represent how musicians work? Forced by playing three songs as one mashup.
V3.0
Can my library survive one device? Forced by everything living in one browser.
V3.1
Can this stop being only my tool? Forced by a bandmate asking to see the setlist.
Playwell today: light and dark themes, the performance view, artists, the run sheet and settings.
Reflection

Knowing when to stop designing for yourself

Playwell started because I understood the problem intimately. That gave me speed. It also gave me bias, and the two are difficult to separate.

  1. 01

    Familiarity hides friction.

    I could tolerate interactions because I knew how they worked, and read labels because I wrote them.

  2. 02

    Assumptions surface outside your head.

    A real library size, a real stage, a real second device and a real bandmate each broke one.

  3. 03

    The next phase needs the opposite.

    Less intuition, more external validation: can another musician perform with it without me explaining it?

Built because I needed it. Still changing because I use it.

Next project

CoinQuest

I stopped trying to limit screen time and gave it a price. A behaviour-design thesis tested in five real homes.