Skip to main content
UI Coach Logo
Intermediate

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

The brief

Understand the problem

Background

People often remember only a tune, a few incorrect lyrics, or where they heard a song. Recognition can return several plausible results, especially in noisy environments.

User context

Tomas remembers the chorus melody from a cafe but none of the exact words. He wants to hum it, compare likely matches, and open the correct track in his preferred music service.

Product problem

The service must make recording easy, set expectations about confidence, and help users recover when the first match is wrong.

Objective

Create the capture, matching, result comparison, and handoff experience for uncertain song search.

What to design

Define the experience

Required experience

  • Choose humming or lyric search
  • Record and review a short audio sample
  • Compare likely song matches with confidence cues
  • Preview and open a confirmed song in a music service

Screens and states

  • Search method
  • Listening state
  • Match results
  • Song confirmation
  • No confident match

Core user flow

Follow the critical path

  1. 01

    Tomas chooses humming and grants microphone access

  2. 02

    He records a short melody in a noisy room

  3. 03

    The app presents three candidates with short previews

  4. 04

    He confirms one and opens it in his preferred player

Product rules

Requirements and constraints

Requirements

  • Explain microphone use before requesting permission
  • Let users retry without losing prior candidates
  • Avoid presenting low-confidence matches as facts
  • Support lyric fragments with uncertain spelling

Constraints

  • Recording length is limited
  • Music previews may be unavailable by region
  • Background noise can reduce confidence

Reality check

States worth considering

Microphone permission is denied
No result passes the confidence threshold
Several recordings match the same composition
The linked music service is not installed

Finish line

What to deliver

  • Five mobile screens or states including permission and uncertain-result handling

Optional direction

Visual resources

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

Font pairing
Dancing ScriptLedger

Dancing Script & Ledger

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

Icons
Illustrations

Keep practicing

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
Intermediate
Food and dining

Time-Sensitive Grocery Substitution Approval

Design a shopper-to-customer approval flow for unavailable groceries with price, quantity, dietary, and response-window context.

Mobile1 to 2 hours
Mobile DesignInteraction 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
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
Intermediate
Creator tools

Distraction Free Writing Session

Design a focused writing mode that protects a chosen draft, blocks selected distractions, and recovers safely after interruption.

Desktop web2 to 4 hours
Interaction DesignError Handling