Redesigning the Gryphon.ai Admin Portal for Scalable Conversation Analysis and Coaching
Project Overview
Gryphon.ai is a real-time, AI-powered conversation intelligence platform that supports sales and customer experience teams with live coaching and data-driven insights. Originally founded as Gryphon Networks, the company transitioned in 2021 from a compliance-focused telephony service into an AI-driven sales enablement platform. I joined the company as the second UX designer at the beginning of this transition and was tasked with rethinking the core product experiences. New products necessitated a new approach to the admin interface our clients would use to manage coaching content, user permissions, and company-specific AI model training.
The Challenge
Gryphon’s legacy admin portal was cluttered, inconsistent, and reliant on manual updates by the Customer Services Office (CSO). This bottleneck created friction for both internal teams and clients.
Key problems:
- Admin experience lacked structure and hierarchy
- Clients couldn’t independently manage content or permissions
- Internal teams were burdened with low-value manual tasks
- No design system existed across Gryphon’s product suite
- Admin experience lacked structure and hierarchy
- Clients couldn’t independently manage content or permissions
- Internal teams were burdened with low-value manual tasks
- No design system existed across Gryphon’s product suite
The Goal
Empower clients to manage their own coaching content, permissions, and settings. Free up internal resources and lay the foundation for scalable growth.
We needed to:
- Establish a cohesive, modern design system
- Create a self-service interface for admins
- Design flexible components for future expansion
- Ensure visual and functional consistency across the platform
- Establish a cohesive, modern design system
- Create a self-service interface for admins
- Design flexible components for future expansion
- Ensure visual and functional consistency across the platform
My Role
As the lead UX/UI designer on this project, I collaborated closely with the senior UX designer, developer, and product owner. My responsibilities included research synthesis, responsive layout architecture, mockup creation, and design system documentation.
The Solution
Since we needed to create our overall design system alongside our products, we used an existing system as a starting point and refined our own components as our products grew. Material Design served as our initial framework due to its scalability and thorough documentation.
From there, I created a three-panel layout structure:
- Left: Collapsible side drawer for navigating between content types (e.g. cards, questions)
- Center: Detail panel for browsing and selecting items (e.g. competitor info card, pricing question)
- Right: Main workspace for creating and editing content
- Left: Collapsible side drawer for navigating between content types (e.g. cards, questions)
- Center: Detail panel for browsing and selecting items (e.g. competitor info card, pricing question)
- Right: Main workspace for creating and editing content
V1.0 focused on the "card" content type:
- I gathered requirements, drafted lo-fi wireframes in Whimsical, and created hi-fidelity mockups in Figma
- We launched a working version to Gryphon’s sales team and collected structured feedback
- I worked directly with the developer to fix usability bugs and refine instructional copy
- I gathered requirements, drafted lo-fi wireframes in Whimsical, and created hi-fidelity mockups in Figma
- We launched a working version to Gryphon’s sales team and collected structured feedback
- I worked directly with the developer to fix usability bugs and refine instructional copy
V2.0 introduced more functionality:
- Support for two additional content types
- Editable category/tag structures for better organization
- Updated navigation and help guidance based on feedback
- Support for two additional content types
- Editable category/tag structures for better organization
- Updated navigation and help guidance based on feedback
I repeated the design and validation process, ensuring each new feature fit seamlessly into the existing UI.
Lo-fi mockup of 3-column structure for card builder
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.
Building the Design System
Alongside the interface work, I collaborated with the senior designer and developer to begin documenting reusable components—establishing a design system to support consistent implementation across Gryphon’s products.
Since parts of the platform were embedded via MicroStrategy (for dashboards and analytics), we adapted our visual language to harmonize with MicroStrategy’s native styling while keeping the Gryphon brand distinct. This balance helped the platform feel cohesive and professional without compromising usability.
Looking Ahead
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. Clients will be able to control the full lifecycle of a sales or customer service call, including pre-call prep, live call coaching, and post-call analysis.
Impact
- Reduced dependency on internal CSO teams
- Enabled clients to manage their own content and users
- Laid the foundation for scalable AI model management
- Introduced a consistent design language across products
- Enabled clients to manage their own content and users
- Laid the foundation for scalable AI model management
- Introduced a consistent design language across products