Healthcare app call interface mockup

Summary

Dark interface showcasing a live call card with transcription, speaker profile, and compliance metrics overlay on a blurred patient photo background.

Visual description

Dark gray background with vertical line pattern texture. Vertical streaming audio waveform at the top displays "Sally Peterson" as the caller and "Speaking..." status. Central white rounded card contains the speaker's name, time slot, transcript of the conversation, and playback controls with a play button and progress bar. Right side displays a large "65%" metric badge with comparison stats (11% vs Agent Average, 7% vs Org Average) and a green "Compliant" indicator with dot gauge. Bottom left shows a back button and partial avatar thumbnail. Blurred patient photo background creates depth. Typography is clean sans-serif, emphasizing clarity and functional hierarchy.

Key takeaway

The use of a prominent white card against a dark background creates strong focus on critical information. The transcript preview pattern shows how to layer text content without overwhelming the interface. The metrics display (percentage + badge) is a clean way to surface compliance status without text-heavy explanations. Streaming audio waveform (top) grounds the interaction in real-time communication.

Reuse notes

Ideal for healthcare, customer service, or communications platforms where recording, transcription, and compliance matter. The dark theme reduces eye strain for extended use. The card-based layout works equally well in desktop and responsive mobile versions. Works best when the blurred background is a real person/context photo, lending authenticity to the professional interface.