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 company began 20 years ago as Gryphon Networks, a compliance checking and telephony infrastructure service. In 2021, it rebranded to Gryphon.ai and launched a sales enablement platform to connect, record, and analyze sales calls. They are using machine learning and artificial intelligence to provide guidance to sales representatives and revenue insights to sales managers.
Problem: Content, data, and security settings for Gryphon's users were controlled by an outdated and messy admin portal. Most settings had to be changed by a member of Gryphon’s Customer Services Office (CSO), which overburdens the team and takes control away from our clients. Clients should be able to create their own coaching content and control which user groups have access to certain features.
Solution: I discussed the need for a cohesive design system across all interfaces with the senior UX designer and product owner and we decided to use Material Design as a starting point. I created a three-column layout with a collapsible side drawer for navigating between content types, a detail drawer for selecting specific content, and a main window for creating and editing content. I outlined the feature requirements for the card content type that would be included in version 1.0, then created l0-fi mockups with Whimsical and high-fidelity mockups with Figma.
Lo-fi mockup of 3-column structure for card builder
After version one was in production, we gave access to Gryphon’s sales team and asked for their feedback. I worked with the developer to fix several bugs and adjust help text. We used suggestions from our sales team to inform how we designed version 2.0, which included two other content types and the ability to add and edit the categories that organize content. I repeated the outline and mockup process for the new features, then collected more feedback after version 2.0 was deployed. Future versions will include feature permission toggles and batch editing content.
Lo-fi mockup of dashboard homepage in version 2.0.
I coordinated with our analytics team to embed a MicroStrategy dashboard into the admin frame.
Throughout the process of designing and building the admin interface, I collaborated with the senior UX designer and developer to document each component for reuse. We developed a cohesive design system that was applied to other products across Gryphon's platform. This design system was bound by the customization possibilities in MicroStrategy since we embedded data and dashboards directly from their platform. We adopted just enough of their design to make our whole product look polished, while also making the Gryphon interface recognizable and separate from others.
This admin interface will become the central hub for monitoring and improving AI training models that will automatically flag calls based on transcription data.
The dashboard will include progress bars and statistics to help client admins understand the benefits of manually tagging calls to provide data to the natural language models.