Some mockups have been abstracted to protect proprietary information
Gryphon.ai is a real-time, AI-powered conversation intelligence platform for live sales coaching and guided selling. The Gryphon One platform is a single solution to provide support to sales teams before, during, and after every call.
Problem: Sales representatives and their managers need a collaborative training interface to allow them to review recorded calls. They should be able to flag the call for review and tag specific utterances to identify important moments. Tags should be easy to edit, but also provide clean data to train artificial intelligence to recognize important moments automatically.
Solution: There was an existing version of the player that displayed the call transcript as a table that stretched across the whole width of the page. The horizontal layout made text too wide for comfortable, efficient reading. I started redesigning the interface with a vertical transcript window that has a max-width of 600px. I took inspiration from the admin interface and our rapidly evolving design system to create a collapsible side drawer. Information about the call fit neatly into the drawer, which left the middle column of the three-column layout for call playback and visualizations. Most of the calls our clients record are audio only and have two participants. We want to expand to allow video and conference calls, so I designed the middle column to have a video screen and a visualization of three or more speakers and their sentiment throughout the call.
Full-width desktop view with expanded side drawer
This design allows the video and visualizations to take center stage, but what if the call does not include video? I worked with the primary developer and his supporting team of contractors to design a dynamically-generated video placeholder. It shows the name of the person who is speaking and any tags that have been added to the current utterance. We were also able to add several ways for a user to scrub the audio, video, and transcript to a specific point, including clicking a timestamped flag in the sidebar or clicking a specific utterance in the transcript. Future features include transcript search, creating and sharing call snippets, and automatic import of participant data from connected CRMs like Salesforce.
Audio-only dynamic visualization
Sizing wireframe