Case study · Live music

Open Stage

The jam, in order.

A real-time queue app for open mic and jam nights. Performers discover the right room, prepare their set once, and see exactly when they’re on.

Context
Lead product designer · prototype to product
My focus
Product, UX/UI and the front-end build
Platform
Responsive web app with real-time sync
Scope
Join wizard, set preparation, live queue, community, host lineup

3D is unavailable in this browser, so the case study shows without its animated backgrounds.

Skip to final design
Scroll the story
01 / The challenge

Getting on stageshouldn’t bethis hard.

The real problem was not event discovery alone. It was uncertainty at every handoff between interest and performance.

Details live across social posts, venue pages and word of mouth. Performers can’t tell what’s required or whether they’re confirmed. Lineups change live without giving everyone the same view, and the connections made after a set disappear when the night and the chat end.

My role

What I owned,end to end.

Role
Lead product designer
Platform
Responsive web app · Austin, Texas
Stage
2026 · Prototype to product
What I did
Product strategyUX architectureInteraction designStyle guide
02 / Research & goals

The work beganbackstage.

Rather than testing isolated features, the research followed the rhythm of a real open-mic night, from first discovery to the connection made after a set. Each design decision traces back to a real handoff, role or uncertainty in the room.

A night-in-the-life study · small venues and open-mic operations
3

time horizons: before the venue, during the wait, and after the set.

3

core perspectives: performer, collaborator and host, in one night.

6

critical handoffs: discovery, commitment, preparation, arrival, queue, connection.

01 / BEFOREDiscover and decide.

Where information appears, what creates trust, and what stays unclear before committing.

02 / AT THE VENUEPrepare and wait.

How performers share their set, understand status, and respond to live changes.

03 / AFTERWARDPerform and reconnect.

What turns one performance into confidence, collaboration or another opportunity.

03 / Competitive landscape

A crowded market.A missingworkflow.

Adjacent products solve important slices of the night. None is built around the performer’s complete open-mic experience, from choosing a room to seeing a live place in line and carrying a connection forward.

MeetupEventbriteVampr
Discover live eventsMusician networkPrepare a setLive performer queuePost-set connection
DESIGN OPPORTUNITY

One connected operating layer.

Replace fragmented tools with one shared source of truth for the whole night.

04 / Feature comparison

Fragmented tools.No live queue anywhere.

Five capabilities across the adjacent products. Events and networking are covered in pieces; preparing a set and following a live performer queue are missing everywhere.

Capability comparison of Open Stage Jam, Meetup, Eventbrite and Vampr
CapabilityOpen Stage JamMeetupEventbriteVampr
Discover live eventsOpen Stage Jam✓Meetup✓Eventbrite✓Vampr✕
Musician networkOpen Stage Jam✓Meetup◐Eventbrite✕Vampr✓
Prepare a setOpen Stage Jam✓Meetup✕Eventbrite✕Vampr◐
Live performer queueOpen Stage Jam✓Meetup✕Eventbrite✕Vampr✕
Post-set connectionOpen Stage Jam✓Meetup◐Eventbrite✕Vampr✓
✓ Core◐ Partial✕ Not central

Desk research reflects each product’s current positioning, not an exhaustive feature audit.

05 / Who it’s for

Meet Alex.

Alex

Vocalist · Austin, TX · 2–4 open mics a month

“I’m ready to perform. I just need to know what happens next.”

The emerging performer. Talented enough to perform, but still building the confidence, network and repeatable stage experience needed to grow.

PAIN POINTS
  • Scattered discovery. Details live across venue posts, group chats and word of mouth.
  • Invisible status. After signing up, Alex can’t see confirmation, timing or place in line.
  • Lost momentum. Useful connections made after a set rarely continue beyond the room.
WHAT DRIVES ALEX
  • Motivation. Build confidence and momentum through consistent stage time.
  • Core need. A trusted room, clear expectations and a visible place in line.
  • Today. Finds nights through social posts, venue pages and musician friends.

Design opportunity · replace anxious waiting with preparation, status and connection

06 / Emotional journey

Confidence dropsbefore the first note.

The highest friction happens after a performer commits but before the lineup becomes visible. They have invested time, arrived and prepared, yet still can’t answer: “Am I actually on?”

Confidence rises while Alex discovers and chooses a night, drops sharply after joining, bottoms out while waiting with no visible status, then recovers on stage and peaks when connecting afterward.

  1. 01DiscoverFinds a promising nightCurious
  2. 02DecideChecks venue and fitHopeful
  3. 03JoinCommits without clarityExposed
  4. 04WaitNo visible status or timingAnxious
  5. 05PerformThe room becomes realFocused
  6. 06ConnectThe night creates momentumEnergized
07 / User story

Same musician.Two different nights.

Alex’s goal never changes: find the right room, arrive prepared and earn stage time. What changes is the amount of uncertainty the experience asks them to carry.

Without the app

Fragmented night

  1. 01
    Search across posts

    Venue details, requirements and start times conflict.

  2. 02
    Message to confirm

    No reply means arriving without knowing whether there’s space.

  3. 03
    Repeat the set at check-in

    Songs, collaborators and needs are explained again.

  4. 04
    Watch the host for clues

    Lineup changes live, but status stays invisible.

Energy spent managing uncertainty

With Open Stage Jam

Connected night

  1. 01
    Choose with context

    Venue, atmosphere, time and performer fit live together.

  2. 02
    Join with a clear role

    Identity, lineup type and expectations are explicit.

  3. 03
    Arrive stage-ready

    The set and technical notes are already shared.

  4. 04
    Follow the room live

    Now playing, up next and queue status stay visible.

Energy reserved for the performance

One profile

Identity travels forward

One lineup

Performer and host stay aligned

One community

Connections continue afterward

08 / User flow

Two roles,one live line.

Before the screens had a look, they had a structure. Sign-up sets the role and lands on home. Alex joins the lineup, says what they play and who with, picks a song and confirms; the host approves, runs the queue and calls people up. Every handoff between the lanes syncs live.

ScreenRole splitLive sync

08 / User journey

From the doorto the stage.

Each stop on the line is a screen. Scroll to follow Alex from walking in to taking the stage.

01 / 05Eager

Sign up

Alex signs in with Google, Facebook or as a guest, then sets a lightweight identity and role.

DesignA quick wizard with social login, so joining takes seconds at the door.

02 / 05Unsure

Pick a song

Alex searches songs, picks the set, and adds collaborators and stage needs.

DesignEntered once, shared with the host, so no one repeats the set at check-in.

03 / 05Waiting

Join the queue

The host approves the request, and Alex sees their confirmed place in line.

DesignApproval keeps the host in control without leaving performers guessing.

04 / 05Excited

On deck

Alex’s phone shows now playing, up next, and their place in line.

DesignA clear on-deck moment ends the hovering by the stage.

05 / 05In control

Host view

The host approves, reorders and calls people up from one dashboard.

DesignOne live source of truth, synced to every phone in the room.

09 / Final design

Closer to the product.Closer to the decisions.

Scroll through the flow. Each state carries one design decision.

  1. 01 Sign up

    Join at the door.

    Social login and a three-step profile replace the pen and paper.

  2. 02 Song

    Arrive stage-ready.

    Songs, collaborators and technical notes are shared with the host before the night starts.

  3. 03 Queue

    Make the order visible.

    A live list everyone sees, with the performer’s own place highlighted.

  4. 04 On deck

    Call people up.

    A full-screen on-deck state tells performers when to get ready.

  5. 05 Dashboard

    Give the host one screen.

    Approvals, order and the next call-up, all in real time.

The flow, screen by screen

Five screens. One flow.

Real screens from the product. Scroll or drag sideways to turn through the flow.Scroll or swipe sideways to turn through the flow.

Home: tonight’s featured open mics, search and quick actions
01Discover
Your line-up: solo, house band, chosen performers or leave it to the host
02Your line-up
Your set: search and add songs, with suggestions
03Your set
Live queue: who is on stage now
04Live queue
Community: recent performers and people to connect with
05Connect
The full flow, in motion

From the door to the lineup.

The live Open Stage Jam app, in three clips: joining tonight’s lineup from the + button, the guided tour a first-timer gets, and moving between home, the queue, community and profile.

10 / Decisions & trade-offs

Every screenwas a fork.

The two calls that shaped the product most, what I chose, and what I let go.

Fork 01 · Approval

Open list or host approval?

Chosen

Requests go to the host for approval before joining the queue.

Rejected

An open list anyone can add to.

Why. An open list is fast but gets gamed and cluttered. Approval keeps the night curated while the performer still sees their status instantly.

Fork 02 · Entry

Logistics first, or identity first?

Chosen

Google, Facebook, login or guest entry, then a lightweight identity and role.

Rejected

Asking for set details and logistics before the performer knows the product.

Why. The opening sequence reduces commitment anxiety. Performers understand the product, choose how to enter, and establish their role before being asked for logistics.

From paper to product
What’s your name?Enter your nameHow should weintroduce you?e.g. Alex, @alexmusic0/30keep itsimple andwelcomingoptionalbut niceWhat’s your roleon stage?VocalistInstrumentalistBandclearchoicesNow on stagehighlightthe now· InstrumentalistUp nextwhat’scoming upLatersee thefull lineup
01Identity02Role03Live queue

Same three decisionsresolved with confidence

Final performer identity screen
01Identity
Final role selection screen
02Role
Final live queue screen
03Live queue
11 / Behind the stage

The host runsthe whole roomfrom one screen.

The manager dashboard mirrors the performer app in real time, so every change the host makes reaches every phone in the room.

Illustrative recreation · names and songs are sample data

After joining

You're in line.Show it at the door.

Joining gives each performer a check-in code. Show it at the entrance and the host confirms the arrival and the song.

  • Awaiting approval
  • Show or scan
  • Check-in at the door
Community

Meet the playersin the room.

Tap any musician to connect, send a message or ask to jam together.

  • Connect
  • Message
  • Request collab
Events

Every night,one page.

Reached from home and from community: venue, time and the vibe, with the lineup one tap away.

  • Venue and time
  • Join the lineup
  • Entry & tickets
Open Stage: You're in line, with a check-in QR code to show at the entranceOpen Stage community: connect, message or request a collab with a musicianOpen Stage event page: Voices Unplugged at The Blue Door, with Join the Lineup and Entry & Tickets
12 / Style guide

Stage lights.Dark room.

Raw energy, disciplined hierarchy. The system borrows the atmosphere of a small venue without sacrificing usability: red marks action and live status, black holds focus, and warm white gives an editorial counterpoint.

Identity
Open Stage Jam logo: a red microphone inside a spotlight ring above the Open stage Jam wordmark

A microphone held in a spotlight ring. The wordmark pairs a clean sans with a hand-drawn “Jam” in Live Red, the same energy as a flyer taped up by the stage.

Typography
DisplayBebas NeueAaOpen Mic NightABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
CopyDM SansAaTonight’s lineup starts at nine.Aa Bb Cc Dd Ee Ff Gg Hh 0123456789

Bebas Neue is condensed and loud, built for the stage. DM Sans is a neutral sans that stays easy to read in a dark room.

Colour
Live Red#F20A36

Action and live status

Stage Black#070707

Canvas

Coal#11100F

Surfaces and cards

Warm White#EEE9DF

Editorial text

13 / Components

Built from theactual application.

These specimens reproduce the component behavior, labels, state colors and hierarchy of the production build, not a parallel concept system.

01Pill buttons50px radius · one red action per screen
Browse as guest
  • Primary#FF1C38 · 16px bold · red glow
  • Secondary9% white fill · 20% white stroke
  • Social pill8% fill · 2-up grid · 8px gap
02Bottom dockFrosted glass · five destinations · raised red Join
  • Glass6,3,1 at 55% · blur 22px · saturate 1.6
  • ActiveWhite icon · bold label · dot above
  • Join52px radial red · flips to × when open
03Wizard role cardsRole-specific selected states
VOCALISTSinger · Rapper · Spoken Word
INSTRUMENTALISTGuitar · Keys · Bass · Drums…
BAND / GROUPHouse Band · Add Members
  • Card10% stroke · photo bleeds in from the right
  • Selected#FF1C38 accent · title turns #FF4055
  • TypeBebas Neue 20px · Space Grotesk 12px
04Manager queue rowPosition · performer · song · actions
1
Alex RiveraVocalist · Electric Feel
■⋯
2
Jordan KimInstrumentalist · Fast Car
▶⋯
3
The Late ShiftBand · Seven Nation Army
▶⋯
  • Row2% fill · 4% stroke · 56px tall
  • Playing#F0B800 at 5% · gold stroke
  • Actions36px · green play · gold stop
05Firebase sync statusOnline · offline · error
ONLINEOFFLINEERROR
  • Online#1ED760 · pulsing glow
  • Offline#7A7268 · static
  • Error#FF1C38 · 20% stroke
06Collaborator rowCompact identity and removal
M
MIA JOHNSONVocalist · Harmony
D
DANA LEVIKeys
+ Add collaborator
  • Row4% fill · 8% stroke · 10px radius
  • Avatar36px circle · Bebas initial
  • AddDashed 15% stroke

Source · open-jam-v31.html · recreated from production class names and state logic

14 / Accessibility & trust

Readable ina dark bar.

Open Stage is used in low light, with loud music, often with an instrument in one hand.

Low-light contrast

White on the near-black stage UI measures 19.8:1, and the yellow chord text 10.9:1.

One-handed use

Large targets within thumb reach, for someone holding a guitar.

Status in plain words

Your place is always written out, from “You’re #3 on the list” to “You’re up next!”, because sounds get lost in the room.

Readable on stage

Chords and lyrics open in a large, bold, high-contrast view you can read from a mic stand.

15 / Success measures

Turn uncertaintyinto signals.

These are product targets for the next validation cycle, not tested results. Each one translates the contextual research into a behavior the live product can measure.

≤10 s

for performers to understand whether they’re confirmed, waiting or up next

Validation target · status clarity
0×

repeated set entry: role, songs, collaborators and needs travel forward once entered

Workflow target
↓

fewer “when am I on?” interruptions during an active room

Operational target
↑

more post-set collaborations that continue beyond the venue

Community target
16 / Reflection & next steps

What worked.What I’d change.

What worked

Real-time as a design material.

Treating the live queue as the core of the product, not a feature, shaped every screen around one shared truth.

What I’d change

Test on a loud, dark, real night.

Most of the hard problems only show up in the room: glare, noise, and people with their hands full.

What I learned

Building it changed how I design.

Shipping the product myself made me design for real states, like waiting, errors and slow connections, not just ideal screens.

Where I would take it next

Next: venue accounts for multiple hosts, a projector view so the whole room can see the queue, and reduced-motion support.

This is a design case study; the outcomes above are research-based estimates, not measured results.

Open Stage Jam · live app