Skip to main content
UI Coach Logo
Advanced

Continue Music Across a Tour Bus, Watch, and Browser

Design a cross-device music player that adapts controls, context, and handoff behavior to very different environments.

Watch, Desktop web, Tablet4 hours plus

The brief

Understand the problem

Background

A browser supports browsing and queue management, a watch supports quick control, and a vehicle dashboard needs glanceable operation. The same playback session should remain understandable across all three.

User context

Nia is a touring musician. She builds a rehearsal playlist on her laptop, controls it from her watch while setting up, and plays it through the tour bus system later.

Product problem

Copying one interface across devices creates unsafe or unusable controls. Device ownership, output selection, queue state, and interrupted handoff must stay coherent.

Objective

Create one playback system with device-specific controls and a reliable transfer of the active session.

What to design

Define the experience

Required experience

  • Browser library and queue management
  • Watch now-playing and essential controls
  • Vehicle-safe now-playing view
  • Playback transfer and conflict resolution
  • Offline session state

Screens and states

  • Browser queue
  • Watch player
  • Vehicle player
  • Device transfer
  • Offline conflict

Core user flow

Follow the critical path

  1. 01

    Nia builds and reorders a rehearsal queue in the browser

  2. 02

    She starts playback and controls volume from her watch

  3. 03

    She transfers the session to the bus audio system

  4. 04

    Another passenger tries to start a different session

  5. 05

    Nia resolves ownership and preserves the original queue

Product rules

Requirements and constraints

Requirements

  • Adapt available controls to attention and input limits on each device
  • Show active output and controlling device clearly
  • Preserve queue order, position, and playback state during transfer
  • Require explicit confirmation before taking over another session
  • Provide non-visual feedback for essential watch actions
  • Keep vehicle interaction brief and glanceable

Constraints

  • Devices may lose network or Bluetooth connectivity
  • The watch has limited screen space and battery
  • Vehicle controls must minimize attention demand
  • Some tracks may not be downloaded on the target device

Reality check

States worth considering

The target device cannot play one queued track
Two devices claim control simultaneously
Transfer completes but audio remains on the old output
The watch disconnects during an action
The account switches to offline mode mid-session

Finish line

What to deliver

  • Design five cross-device screens that demonstrate adaptive controls, handoff, ownership conflict, and offline behavior.

Optional direction

Visual resources

Use these as a starting constraint if you want one. They are not part of the required solution.

Font pairing
BioRhymeMontserrat

BioRhyme & Montserrat

Clear interface writing gives people the confidence to understand what changed and decide what to do next.

Icons
Illustrations

Keep practicing

Advanced
Music

Music Lesson and Practice Studio

Design a learning hub where a beginner books an instructor and follows a focused weekly instrument practice plan.

Responsive web2 to 4 hours
Service DesignInteraction Design
Advanced
Collaboration

Collaborative Lecture Notes

Design a shared note space where a class can combine observations, discuss uncertain points, and preserve a trustworthy study record.

Desktop web4 hours plus
Product ThinkingInformation Architecture
Advanced
Collaboration

Collaborative Presentation Storyboard

Design a team workspace for shaping a presentation narrative, assigning slides, and resolving feedback before a deadline.

Desktop web4 hours plus
Product ThinkingInformation Architecture
Intermediate
Music

Build a Playlist Together

Design a collaborative playlist flow that makes contribution, ordering, voting, and ownership understandable for a small group.

Mobile1 to 2 hours
Interaction DesignInformation Architecture
Advanced
Developer tools

Code Review Load Balancer

Design a review queue that helps an engineering team assign pull requests by expertise, urgency, and reviewer capacity.

Desktop web2 to 4 hours
Dashboard DesignInformation Architecture
Advanced
Creator tools

Collaborative Story Workshop

Design a writing community where authors can publish a draft, request focused feedback, and accept changes without losing ownership.

Desktop web4 hours plus
Design SystemsInformation Architecture