Peloton Music Player — Kish Hickerson

The Challenge

Same brand. Different problems entirely.

Designing two music products for the same company sounds like it should produce similar work. It didn't. The retail player needed to disappear into a sales associate's workflow — fast to switch, impossible to break, glanceable from across a room. The HQ player needed to reward exploration and feel like a genuine music discovery experience.

The challenge wasn't just solving each problem individually — it was deciding what the two products shared, where they should diverge, and how to keep both unmistakably Peloton without making them feel like the same app.

Two distinct mental models Retail = channel-based ("what fits the moment"). HQ = mood-based ("what do I want to explore"). The browsing paradigm had to be different from the ground up.

Speed vs. depth Retail staff need a channel change in seconds, mid-conversation. HQ users have time to browse, discover, and build listening history.

Zone control complexity Larger stores need different music in different zones simultaneously. The solution couldn't become a mixing board — it needed to stay intuitive under pressure.

Brand consistency under constraint Both apps needed to feel like Peloton without feeling like copies of each other — shared visual language, differentiated interaction models.

Who We Designed For

Three users, two contexts.

Retail — Primary

Store Associates

Switch channels in under 3 seconds without breaking from a customer conversation

Read the room and shift energy by genre or mood instantly

Remove songs that don't fit — without disrupting flow

Control volume across zones without navigating deep settings

Retail — Secondary

Store Managers

Lock playlists during branded events or peak traffic periods

Configure zone permissions and defaults at open/close

Maintain consistent, on-brand atmosphere across the floor

Monitor usage without requiring constant oversight

HQ Player

Peloton HQ Team

Browse by mood, category, genre, and trending content

Discover new music through curated moods and editorial picks

Resume listening — recently played and jump-back-in history

Search across artists, genres, categories, and moods at once

App 01 — Retail Music Player

A tool that gets out of the way.

The retail player is a tool, not an experience. Store associates use it mid-conversation, between demos, while managing a busy showroom floor. Every interaction needed to be fast, obvious, and recoverable. The channel sidebar gives instant access to all genres. The album art carousel makes the active channel unmistakable at a glance. The thumbs-down flow removes songs from a channel permanently — with a clear confirmation to prevent accidents.

From wireframe to final

iPad · Dark theme · Channel-based navigation

Wireframe

Structure & Layout

Channel sidebar + centered album art carousel defined first. Controls anchored to bottom. Structure established before visual direction was locked.

Final Design

Channels View — Sidebar Open

Genre channels with album art thumbnails and artist previews. Active channel (Reggae) highlighted. Volume slider in rail for quick access without leaving the view.

State

Sidebar Collapsed

Full-screen album art mode. Mini player bar at bottom retains essential controls. Expand icon restores the sidebar.

State

Browsing Channels

Sidebar open with channel list. Carousel previews upcoming tracks in the selected channel. One tap to switch — no drilling required.

State

Expanded Player

Sidebar hidden, full focus on now-playing. Track name, artist, album all visible. All controls accessible without scrolling.

Default State

Default Playing View

The most common state — sidebar + player with current track. Progress bar at bottom. Channel name in header for constant orientation.

Interaction

Thumbs Down — Delete Confirmation

"Do you want to delete this song from the Reggae Channel?" Cancel preserves. Delete removes permanently. The modal makes the stakes explicit — this isn't a skip, it's a moderation action.

App 02 — Peloton Radio

Music discovery built for exploration.

The HQ player is the opposite of a tool — it's a music discovery experience. Where the retail player is channel-first and optimized for speed, the HQ player is mood-first and built for depth. Moods are the primary entry point, with color-coded cards and artist imagery that invite browsing. Categories (Genre, Trending, New Music, Decades) provide structure for users who know what they want. Search covers everything in one field.

The design evolved in three clear stages: wireframe structure to establish hierarchy, a color system to give moods distinct identities, and final high-fidelity with editorial artist photography treated in Peloton's concentric ring style.

Design evolution — wireframe to final

macOS · Dark theme · Mood & discovery-based browsing

Stage 1 — Wireframe

Moods — Structure

Content hierarchy locked first: Moods at top (large cards), Categories as horizontal pills, Jump Back In below. All placeholder — proving layout before color.

Stage 2 — Color System

Moods — Color Identity

Each mood gets a distinct color: Focus (blue-slate), Wake-Up (terracotta), Chill (sage), Good Vibes (gold). Color communicates energy before the user reads a label.

Stage 3 — Final

Home — Artist Imagery

Mood cards gain artist photography in Peloton's concentric ring treatment. Categories show editorial thumbnails. Recently Played anchors the bottom with album art grid.

Feature

Search — Unified & Genre Browse

One field covers Artists, Genres, Categories, and Moods — with voice input. Below: a full genre grid with editorial art, discoverable even without a search query.

Feature

Now Playing — Mood-Matched Background

The now-playing view takes on the color of the active mood — Focus pulls its blue-slate into the full background. Color = wayfinding. Users always know which mood they're in.

Side by Side

How the two apps differ by design.

Building both products made the contrast explicit. These aren't two skins on the same app — they're two different products sharing a brand system.

Design Dimension

Retail Player

HQ Player

Primary mental model

Channel-based — "what fits now"

Mood-based — "what do I want to explore"

Entry point

Sidebar channel list

Mood cards + category pills

Speed requirement

Channel switch in under 3 seconds

Rewards exploration and time

Curation model

Pre-curated channels; staff moderate songs

Algorithmic + editorial; personalized history

Not present — channels are the browse model

Unified: artist, genre, mood, category

Color / visual language

Dark, minimal — album art carries the visual

Mood-matched backgrounds; color = meaning

Context of use

Standing, mid-conversation, glanceable iPad

Seated, focused, leisure — desktop

What's shared

Peloton logo mark, thumbs-down control, play/pause/skip, progress bar, dark base, red accent

↑ Same across both

Key Design Decisions

The choices that defined each product.

Channel vs. mood as the organizing principle

The retail player uses channels (Reggae, Motown, Ambient) because store employees think in terms of "what genre fits this moment." The HQ player uses moods (Focus, Chill, Wake-Up) because personal listening is emotional, not categorical. The same music could live in both — but how users reach it had to match their mindset.

Why it matters This isn't a styling decision — it's a fundamental IA choice that shapes every screen that follows.

Thumbs down as channel moderation, not just skip

In most music apps, thumbs down means skip and don't play again. In the retail player, it means remove this song from the channel permanently — affecting everyone in the store. The confirmation modal makes the stakes explicit before the action completes. Familiar UI pattern, unfamiliar consequence: that gap required a guardrail.

Why it matters Matching familiar controls to unfamiliar consequences requires explicit friction, not assumed understanding.

Mood color as navigation, not decoration

Each HQ mood has a distinct color that follows the user into the now-playing view, tinting the entire background. It's not a skin — it's wayfinding. Users always know which mood they're in without reading a label. Inspired by the way Peloton's instructor app uses color to signal ride type and intensity.

Why it matters Color used functionally reduces cognitive load — especially valuable when the content itself (music) is invisible.

Results

Two shipped products. One design system.

Distinct Products Shipped

Retail iPad player and HQ discovery app — designed in parallel with intentionally differentiated UX.

Shared Design System

Logo treatment, control patterns, progress bar, and dark visual base — both products unmistakably Peloton.

Target Channel Switch

Retail player designed for channel changes in under 3 seconds without interrupting customer interactions.

↑

Store Atmosphere Control

Zone-based audio enabled larger stores to run differentiated playlists across multiple floor areas simultaneously.