)) RADIO.COM

))

UX Case Study

Redesigning
Radio.com

Brand · Creative Direction · Product Design

Designer

Hannah

Role

Design Lead, Radio.com

Parent Co.

Consumable

01 — The Brief

A new mandate
after acquisition

Consumable acquired Radio.com and needed the product redesigned from the ground up — new brand expression, modernized UX, and a design system built to scale.

01

Establish brand identity

Define Radio.com's visual language as a subbrand within the Consumable family.

02

Modernize the product

Redesign the app experience to solve discovery, retention, and navigation problems.

03

Build for scale

Create a design system and component library ready to support Phase 2 and beyond.

02 — My Role

End-to-end
ownership

As Design Lead, I owned the full creative scope — from brand architecture to shipped UI — working across strategy, identity, and product.

🎨

Brand & Creative Direction

Subbrand identity, visual language, creative direction for marketing and comms.

📐

Design System

Color, typography, iconography, components — built and documented in Figma.

📱

UI & UX Design

User flows, wireframes, prototypes, and high-fidelity screens for MVP and Phase 2.

🔗

Dev Handoff

Annotated specs, redlines, and asset exports for engineering teams.

Deliverables

Subbrand identity Design system User flows Wireframes UI screens Dev handoff Creative direction Marketing comms Phase 2 vision

03 — Brand Identity

Radio.com as a
subbrand of Consumable

Radio.com needed its own distinct creative voice while sitting coherently within Consumable's brand architecture — energetic, dark, and youth-forward.

Brand positioning

Live, local, and culturally connected — the home for listeners who want the pulse of their city and genre, not just an algorithm.

Tone of voice

Bold, energetic, inclusive. Speaks to the commuter, the music head, the news junkie — without talking down to any of them.

Brand architecture

Radio.com operates as a subbrand under Consumable — distinct identity, shared values. All Access premium tier sits within the Radio.com brand.

Parent

Consumable

Subbrand

)) RADIO.COM

Premium Tier

Radio.com All Access

04 — Visual Language & Design System

Building the
design system

Color palette

Darth Torus

#1F055E · Primary dark

Sea Grape

#3C00B7 · Brand purple

Lilac Geode

#AF8EFF · Accent

A State of Mint

#88FCCA · Highlight / CTA

Innocent Snowdrop

#D4C3FF · Soft accent

Typography — Montserrat

Header 1 — ExtraBold 60px

Header 2 — Bold 48px

Header 3 — SemiBold 36px

Body — Light 24px · UI copy and descriptions

Iconography

✓ ★ 🎮 🎧 👑 🚀 🛒 💬

Filled sets in Sea Grape, Darth Torus, and White

05 — Creative Direction

Leading the
creative vision

Creative direction spanned the full brand expression — from the app's dark mode UI language to marketing communications and lifestyle imagery.

Stylized lifestyle photography

Art directed a neon-lit, purple-toned visual world — culturally vibrant, diverse, and emotionally charged.

Marketing & comms direction

Set the visual and tonal direction for campaigns, social assets, and promotional materials across digital channels.

Dark mode as brand expression

Dark mode wasn't just a UI preference — it became the defining aesthetic. Deep purples and glowing accents create a premium, immersive feel.

Visual principles

Dark-first Neon accents Bold type Culturally vibrant Emotionally immersive

Art direction brief

"Music is a physical experience. Imagery should feel like being inside the sound — electric, alive, and deeply human."

06 — App Brand Expression

Brand brought to life
in the product

Dark mode UI

Deep Darth Torus backgrounds with Sea Grape and Lilac Geode accents. Every screen reinforces the brand's premium, immersive feel.

Iconography system

Filled icon sets in three colorways — Sea Grape, Darth Torus, and White — mapped to context: interactive, structural, and on-dark.

All Access premium tier

Crown iconography and Innocent Snowdrop palette distinguish the premium tier without breaking the core brand language.

Design tokens

--color-brand-primary --color-accent-mint --color-surface-dark --font-heading --radius-card --spacing-base

07 — User Flows

Mapping the
key journeys

Flow 1 — Onboarding & sign up

Splash

Welcome screen

→

Sign Up

Email · password · DOB · zip

→

Verify Email

Transactional email

→

Genre Prefs

Tag selection

→

Home Feed

Personalized

Flow 2 — Login & password recovery

Login

Email + password

→

Forgot Password

Email entry

→

Reset Email

Transactional

→

New Password

Reset screen

→

Confirmation

Success / error

Flow 3 — Invite code redemption

Invite Screen

Code entry

→

Validate

Code check

→

Access Granted

Proceed to app

→

Phase 1 — MVP · Onboarding & Auth

Key design decisions

Decision 01

Lifestyle photo backgrounds over flat UI

Using neon-lit photography as screen backgrounds creates immediate immersion and signals the brand world from the very first interaction — before the user has heard a single station.

Brand consistency

Decision 02

Mint as the primary CTA color

A State of Mint (#88FCCA) cuts through dark purple with strong contrast and draws the eye directly to the action. Used exclusively for primary CTAs, preserving its hierarchy signal.

Visual hierarchy

Decision 03

Pill-shaped fields with translucent fill

Rounded, semi-transparent inputs feel native to the dark, immersive aesthetic while remaining highly legible. The softness contrasts with Montserrat Bold's sharpness to create visual tension.

UI language

Decision 04

Scroll-wheel DOB picker over calendar grid

A native drum-roll date picker is faster and more intuitive on mobile than a calendar grid — especially for birth year selection across decades. Reduces sign-up friction.

Interaction design

Decision 05

Genre tags as toggle pills, not a list

Selectable pill tags with a mint selected state make multi-select feel playful and low-commitment. Users see all options at a glance and can change their mind without friction.

Personalization UX

Decision 06

Branded transactional emails, not generic

Verification and reset templates carry the Radio.com brand header and tone of voice — extending brand experience beyond the app at a critical trust moment.

Brand touchpoints

Phase 1 — MVP

Onboarding & Authentication

← scroll gallery →

Splash

Loading

Welcome

Sign Up

Empty state

Filled

Date picker

Genre Selection

None selected

#pop

#country

Multi-select

Email Templates

Verify email

Invite Code

Code entry

Login

Password Recovery

Forgot password

Reset email

New password

Success

Error

Phase 1 — MVP · In-App Experience

Key design decisions

Decision 01

Vertical action rail over bottom tab bar

Inspired by short-form video UX, the right-side icon rail keeps the music visual front and center while keeping actions thumb-accessible without covering content.

Interaction pattern

Decision 02

Music video as the full-screen player

Rather than static album art, the player uses the song's music video as a full-bleed background — turning listening into a visual experience and differentiating from audio-only competitors.

Brand expression

Decision 03

Trebel CTA — persistent but non-intrusive

The "Listen on Trebel" pill sits consistently below the ad unit on every player screen. Users learn where it lives — it never surprises them or blocks the primary experience.

Integration UX

Decision 04

Genre hashtag as persistent context

Displaying #pop on the player screen keeps users anchored to the genre they're browsing — and doubles as a tap target to return to the genre list.

Navigation clarity

Decision 05

Toast notification for destructive actions

Removing a saved clip shows a bottom toast rather than a confirmation dialog — respecting the user's decision while giving acknowledgment. Fast and non-blocking.

Feedback patterns

Decision 06

On-brand ad with countdown timer

The ad unit uses the brand's deep purple with a visible countdown — keeping it feeling native rather than injected. Users know exactly how long they're waiting.

Monetization UX

Decision 07

Flashback as a second discovery mode

Genre / Flashback tab pair on the preference screen lets users pivot to era-based discovery with one tap. Decade pills (1960s–2020s) make the mental model immediately obvious.

Content discovery

Decision 08

Confirmation dialogs for destructive actions only

Disconnect Apple Music and Delete Account trigger a Yes/Cancel dialog — but lower-stakes actions use a toast. Friction is calibrated to consequence, not applied uniformly.

Error prevention

Phase 1 — MVP

In-App Experience

← scroll gallery →

Genre View

#pop list

Music Clip Player

Playing

Paused

Next song

Doechii

War Pigs

Modals

Share

Listen on…

Saved Clips

Library

Apple Music sync

Remove confirm

Removed toast

Ad Unit

Trebel ad

Settings

Edit profile

08 — Handoff & Specs

Dev-ready
handoff

🎨

Design Tokens

Color, spacing, and typography variables named to match the Radio.com brand system — ready for engineering to consume directly.

📐

Component Specs

All interactive states documented — default, hover, pressed, disabled, loading — for every key UI component.

✏️

Annotations

Figma frames annotated with redlines, interaction notes, and asset export guidelines for iOS and Android.

📏

Grid & Spacing

8pt grid system applied throughout. Responsive breakpoints defined for both platforms.

Phase 2 — Gamification

Badge system design decisions

Decision 01

dB (decibels) as the engagement currency

Rather than generic "points," the app's reward currency is dB — native to radio, instantly meaningful to the audience. It makes the gamification feel native to the product rather than bolted on, and gives the metric a distinct brand identity.

Brand coherence

Decision 02

Badge overlays on the player — not a separate hub

Badge unlock moments appear as full-screen overlays on the player itself rather than routing to a separate screen. The user stays in the listening experience — the reward comes to them, reinforcing the moment they earned it.

Contextual feedback

Decision 03

Two badge visual languages — sphere vs. square

Achievement badges (Top 5% Listener, First-Time Listener to Emerging Artist) use a 3D sphere format — bold and trophy-like. Genre taste badges (Indie Explorer, Chillwave Curator) use a square card format with a lifestyle photo background — more editorial and personal.

Visual system

Decision 04

Locked badges shown — not hidden

The Earned Badges screen shows locked future badges with dB unlock thresholds rather than hiding them. Showing the path ahead (2,000 / 4,000 / 6,000 dB) gives users a clear progression ladder and motivates continued listening without guesswork.

Motivation design

Decision 05

+dB haptic animations on the action rail

When a user earns dB — by liking, listening, or sharing — the music note icon on the action rail animates with a "+100" or "+150" burst. It's immediate, legible, and doesn't interrupt the listening experience. The feedback is celebratory but brief.

Micro-interaction

Decision 06

Congrats modal for reward milestones — not just badge unlocks

A full-screen confetti reward modal ("You've won a reward — tap to view") is reserved for milestone moments, distinct from regular badge unlocks. The visual escalation — glowing orb, confetti, mint CTA — signals that this is a bigger deal than a standard badge.

Reward hierarchy

Phase 2 — Gamification

Player haptic & badge states

← scroll gallery →

dB Earn States

+100 dB · Listen

+150 dB · Like

Like action

Badge Modals

Badge unlock

Reward modal

Badge Assets — Sphere

Top 5% Listener

First-Time Listener

Discovered Artists

Global Sounds

Badge Assets — Card

Indie Explorer

90s Alt Rock Fan

Chillwave Curator

Rising Artist

Earned Badges Screen

Badge list

Profile & dB Balance

Profile / 1,000 dB

09 — Reflection

What I
learned

What worked well

Owning brand and product together meant every UI decision was grounded in the visual language — no disconnect between identity and experience.

What I'd do differently

Earlier usability testing on navigation structure and content hierarchy would have sharpened decisions faster.

MVP → Phase 2 thinking

Designing the system with Phase 2 in mind meant the component architecture was extensible from day one — no throwaway work.

Hannah

Design Lead, Radio.com

Brand & Creative Direction

Visual Language & Design System

UX / UI Design

Dev Handoff

Exploration — Radio Dial Concept

A native
radio dial experience

A standalone concept exploration asking: what if Radio.com leaned all the way into its radio heritage? Rather than a standard content list, users tune through stations, discover content, and manage their listening — all through a familiar but reimagined interface.

The design question

Radio.com is built on the legacy of radio. What would the app feel like if the core interaction model reflected that — tuning, scanning, discovering — rather than defaulting to a scroll-feed pattern?

Scope of exploration

Auth flows, search, saved clips library, Spotify sync, profile and account management — all reimagined under a unified navy/logomark visual language distinct from the main brand direction.

Visual language shift

Deep navy bg Bold )R logomark Lavender gradient CTAs Minimal chrome High contrast type

Features explored

Auth & onboarding Search by tag & artist Saved clips library Spotify sync Profile & account mgmt

Exploration — Radio Dial

Key design decisions

Decision 01

Navy logomark as primary visual anchor

The `)R` logomark on a deep navy background is the first thing users see on every auth screen — reinforcing brand identity at every trust touchpoint. The logo does the heavy lifting so the UI can stay minimal and uncluttered.

Brand expression

Decision 02

Lavender gradient pill CTAs — single per screen

Each auth screen has exactly one primary CTA using the lavender-to-white gradient pill. The single-CTA discipline means users always know where to go next — no competing actions, no decision paralysis on high-stakes auth flows.

Visual hierarchy

Decision 03

Hashtag search as first-class input

Search accepts both hashtag queries (#pop) and artist names from the same field. A #pop search returns a genre-filtered tracklist; an artist name returns artist-specific content. One input, two discovery modes — no extra UI required.

Search UX

Decision 04

Saved clips as a Spotify-syncable playlist

The library isn't just a reading list — it's a launchpad. "Add Playlist to Spotify" and "Listen to Full Songs on Trebel" CTAs sit persistently at the bottom, turning saved clips into actionable next steps. The library becomes a bridge to full listening.

Feature integration

Decision 05

Spotify sync as a dedicated loading state

Syncing to Spotify gets its own full-screen loading state — Radio.com logo → dotted arrow → Spotify logo, with a spinner and "Loading…" label. The visual handoff makes the background process feel intentional and gives users confidence the sync is working.

System feedback

Decision 06

Empty state as a human moment, not a dead end

The no-results search state uses a large outlined frown icon and a "Try again" link — simple, friendly, and immediately actionable. It avoids the cold-wall feeling of a bare "No results found" label by giving users an obvious escape hatch.

Error states

Exploration — Radio Dial

Auth, Search & Library

← scroll gallery →

Splash

Welcome

Loading

Auth

Login

Sign up

Password Recovery

Forgot PW

Reset PW

PW changed

PW error

Search

#pop results

Artist results

No results

Saved Clips Library

Add to Spotify

Listen on Trebel

Remove toast

Spotify Sync

Syncing…

Synced!

Profile

Delete dialog

Deleted

Exploration — Radio Dial

Homepage & Radio Dial Player

← scroll gallery →

The core concept

A physical radio dial anchors the home screen. Album art acts as the "tuned station" — the user rotates through content by swiping left/right, mimicking frequency scanning. Between stations: a mid-switch transition state showing both cards in transit. The vertical action rail (Like · Listen · Save · Share · Profile) stays persistent throughout.

Now Playing

Here Comes The Sun

Tuning →