Skip to main content
UI Coach Logo
Back to challenges
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.

Mobile

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.

Color palette
#79674F
#EDE6D2
#090C0F
#B7B7B7
#A7A7A7
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