Logo of UI Challenges
Sign in
Wireframe example for Voice Message Player
An example interpretation of the prompt
Icon of target

Voice Message Player

Icon of book open

Design a mobile chat bubble for a voice message. It sits inside a conversation thread and behaves like a message, not a standalone media player.

The bubble needs a clear play/pause control, a waveform or progress track, and a duration label. Playback state should be obvious without crowding the message list.

Treat the waveform as both a visual cue and a scrub target if you choose to support seeking. The control area has to work in one thumb, inside a dense chat layout.

Think through sent vs received styling, short vs long clips, and what the bubble looks like before, during, and after playback. It should feel native to messaging on mobile.

Icon of book open

Make the progress state readable even when the waveform is tiny: use a strong contrast fill or active segment so the played portion is obvious at a glance.

Better at UI design with every challenge

Select complexity and generate challenge.

Pick a platform.

You can always choose to receive scheduled challenges. A unique design prompt will be sent to your email daily for the duration you select.

Get a design challenge in your inbox

Daily UI prompts and challenge updates. It’s free.