Logo of UI Challenges
Sign in

Gallery

See what others have created

Voice Memo Recorder
WM

weeping_mausoleum

@weeping_mausoleum

EasyCamera & Media

Voice Memo Recorder

Design the main voice memo recording screen for mobile. The center of the screen is a large record control that can switch to pause while recording.

A waveform visualization should animate or update to show incoming audio, so the user can tell the mic is live even before they speak.

This is a quick-capture media flow, so the layout should stay minimal and thumb-friendly. The record control needs to be the obvious focal point, with the waveform supporting it rather than competing for attention.

Treat the screen as a live capture state, not a setup page. Show enough context to make the recording feel active, but keep the interface quiet and focused.

What to deliver

  • Design the idle recording screen with the primary record button.
  • Design the active recording state with the control switched to pause.
  • Show the waveform visualization reacting to captured audio.
  • Include the key timer or duration readout if needed for context.
  • Place any secondary actions so they do not pull focus from recording.

Make the waveform react immediately when recording starts, even if it begins with low amplitude, so the live state is unmistakable.