Skip to main content
UI Coach Logo
Intermediate

Build a Playlist Together

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

Mobile, Responsive web1 to 2 hours

The brief

Understand the problem

Background

Shared playlists can quickly become chaotic when everyone can reorder or remove tracks. Groups need lightweight contribution rules and clear attribution without turning casual music planning into formal administration.

User context

Sofia is building a three-hour road-trip playlist with four friends. One person prefers explicit-content filters, two friends keep adding the same songs, and nobody agrees on the opening sequence.

Product problem

Contributors need freedom to add music while the group needs a fair way to resolve duplicates, ordering conflicts, and access changes.

Objective

Create invitation, contribution, group ordering, and change-history states for one collaborative playlist.

What to design

Define the experience

Required experience

  • Join a playlist with a clear role and contribution rules
  • Add tracks while seeing duplicates and content restrictions
  • Suggest or vote on an order without silently overwriting changes
  • Review and undo a recent playlist edit

Screens and states

  • Playlist overview
  • Track search and add
  • Group ordering
  • Activity and undo

Core user flow

Follow the critical path

  1. 01

    Sofia invites friends as contributors and enables an explicit-content limit

  2. 02

    A friend searches for a track and chooses an existing version instead of adding a duplicate

  3. 03

    The group suggests opening tracks and sees where preferences overlap

  4. 04

    Sofia confirms the opening sequence while the rest remains collaboratively ordered

  5. 05

    A mistaken removal is restored from the activity history

Product rules

Requirements and constraints

Requirements

  • Show owner, contributor, and listener capabilities before invitation acceptance
  • Detect likely duplicates across album, live, clean, and remastered versions
  • Attribute additions, removals, and ordering changes
  • Offer a visible rule for how votes or suggestions affect final order
  • Support undo for recent destructive edits without discarding later unrelated changes

Constraints

  • Track availability can differ by contributor region
  • A content filter cannot guarantee that every track is correctly labeled
  • Only the playlist owner can change membership roles

Reality check

States worth considering

A track becomes unavailable after it is ordered
Two contributors reorder the same songs at once
The owner leaves the group
A removed contributor has downloaded the playlist for offline listening

Finish line

What to deliver

  • Four responsive screens covering contribution, collaborative ordering, and recovery from a mistaken edit

Optional direction

Visual resources

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

Font pairing
NunitoPT Sans

Nunito & PT Sans

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

Icons
Illustrations

Keep practicing

Intermediate
Music

Hum or Lyric Song Search

Design a music discovery flow that identifies a song from a melody fragment or remembered words and communicates uncertain matches.

Mobile1 to 2 hours
Interaction DesignError Handling
Intermediate
E-commerce

Adjust a Household Replenishment Subscription

Design a recurring order experience that predicts supply needs while making quantity, frequency, skips, and price changes easy to control.

Mobile2 to 4 hours
Information ArchitectureInteraction Design
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
Intermediate
Productivity

Accessible Paper to Text Capture

Design a document capture app that turns printed text into editable, readable content while preserving uncertainty and page structure.

Mobile2 to 4 hours
AccessibilityMobile Design
Intermediate
Social

Choose a Meetup Plan as a Group

Design a group decision flow that turns different schedules, budgets, locations, and interests into one workable meetup plan.

Mobile2 to 4 hours
Product ThinkingInformation Architecture