Designing a Post-Call Media Review & Annotation Tool for Conversation Intelligence
Project Overview
Gryphon.ai is a real-time conversation intelligence platform supporting sales teams before, during, and after each call. The post-call player is a key component of the Gryphon One product suite, enabling sales reps and managers to review, tag, and annotate conversations to improve agent performance and train AI models.
The Challenge
Sales professionals and their managers needed a collaborative, intuitive tool to review recorded calls and flag key moments for training and coaching.
The original playback interface was functional but limiting:
- The call transcript was displayed as a wide horizontal table, which made it difficult to read and navigate
- Users couldn’t easily tag or comment on individual utterances
- The layout didn’t scale well for future enhancements like video support or sentiment visualizations
- The call transcript was displayed as a wide horizontal table, which made it difficult to read and navigate
- Users couldn’t easily tag or comment on individual utterances
- The layout didn’t scale well for future enhancements like video support or sentiment visualizations
Core needs:
- Better readability and navigation of transcripts
- Seamless tagging and flagging for both coaching and AI training
- Flexibility to support audio, video, and multi-participant calls
- Intuitive scrubbing and playback controls
- Better readability and navigation of transcripts
- Seamless tagging and flagging for both coaching and AI training
- Flexibility to support audio, video, and multi-participant calls
- Intuitive scrubbing and playback controls
My Role
As the lead UX/UI designer on the project, I redesigned the interface in collaboration with our lead developer and a team of contractors. The product owner and I ensured there was clear documentation of every feature so QA could test for responsiveness and accurate data. I also leveraged Gryphon’s evolving design system to ensure consistency across tools.
The Solution
We reimagined the player using a three-column layout, drawing from patterns established in the admin portal redesign.
- Left drawer: Collapsible panel for metadata, participant details, and call-wide flags
- Center: Main playback area with video (or audio placeholder), speaker visualizations, and sentiment analysis
- Right: Vertically-scrolling transcript with a max-width of 600px for optimal legibility
- Center: Main playback area with video (or audio placeholder), speaker visualizations, and sentiment analysis
- Right: Vertically-scrolling transcript with a max-width of 600px for optimal legibility
Transcript & Tagging Enhancements:
- Redesigned the transcript interface to support tagging and flagging individual utterances
- Tags are color-coded to highlight negative, neutral, or positive sentiment
- Clicking any transcript segment or sidebar flag scrubs the call to that exact moment
- Redesigned the transcript interface to support tagging and flagging individual utterances
- Tags are color-coded to highlight negative, neutral, or positive sentiment
- Clicking any transcript segment or sidebar flag scrubs the call to that exact moment
Full-width desktop view with expanded side drawer
Tabs in the right-hand column allow for more details to be present without taking up valuable space. Information about the call participants, audio/visual files, and a full transcript search are available. Our interviews with existing power-users revealed that these features were occasionally helpful, but not widely used. The tab layout on the right and collapsable drawer on the left make it easy for each user to customize their view to focus on what they find important.
Because many recorded calls are audio-only, we designed a dynamic video placeholder thats shows the current speaker’s name and tags that have been added to the utterance that is currently playing. The dynamically-generated sentiment view below the video also gives reviewers a glimpse of each call participant's talk time and negative sentiment hotspots that need to be addressed.
Audio-only dynamic visualization
Impact
- Improved readability and user engagement with recorded calls
- Created a scalable foundation for video support and AI training workflows
- Streamlined call review with smarter navigation and annotation tools
- Reinforced consistency with Gryphon’s broader design system
- Created a scalable foundation for video support and AI training workflows
- Streamlined call review with smarter navigation and annotation tools
- Reinforced consistency with Gryphon’s broader design system