Skip to main content
UI Coach Logo
Back to challenges
Intermediate

Build a Playlist Together

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

Mobile, Responsive web

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.

Color palette
#1B1A1A
#E9C5B7
#716561
#8B8C8A
#8C848C
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