Designing AI Summaries for a voice messaging platform
Helping users instantly understand long voice conversations without listening to every message
Overview
Voxer is a push-to-talk voice messaging app used by teams, first responders, and high-stakes communicators. As conversations grew longer and more frequent, users struggled to catch up after missing messages.
My goal was to design an AI-powered summary experience that surfaced the key points of any conversation instantly, within the existing iOS, Android, and web frameworks without disrupting the core voice-first experience users relied on.
The problem
Users were spending significant time scrubbing through long voice threads to get caught up. This created friction for power users and reduced the perceived value of Voxer in high-volume communication environments.
- Users were leaving conversations unread rather than catching up
- Re-engagement dropped significantly after 3+ missed messages in a thread
- Power users managing multiple chats needed a faster triage method
My role
I led end-to-end design of AI Summaries from defining the problem and shaping requirements with engineering, through interaction design, visual design, and handoff. I worked directly with the engineering team to understand the capabilities and constraints of the underlying AI model, and collaborated with product to define the right scope for the initial release.
Design process
Starting with the user's mental model
Before sketching any UI, I mapped out where users were in a conversation when they most needed a summary. This shaped where summaries could make the most impact.
Defining the entry point
The biggest design decision was where to place the summary trigger. I explored three approaches:
- Under a long press menu of options
- An explicit "Summarize" button within the message bubble
- A summary panel accessible from the chat detail page
After testing with internal users, the surfaced button won.
Designing for trust
AI-generated content requires users to trust its accuracy. I designed the summary component to clearly attribute it as AI-generated, show the time range it covers, and allow users to expand and jump to the original messages it references.
Fitting within existing frameworks
Working within the constraints of the existing iOS and Android design systems was a core challenge. I designed the summary component to integrate with the current apps using existing type styles, color tokens, and interaction patterns.
The Tradeoffs
Due to engineering constraints the tradeoff was to move the final summarization to the message details page.
The design
The final AI Summary experience included a "Summarize" entry point in the message bubble, a summary panel that generates inline, and graceful edge case handling for long threads, and failed generation states. The component was designed once and adapted for iOS, Android, and web.
Outcome
AI Summaries shipped across iOS, Android, and web as part of Voxer's AI feature suite directly addressing one of the top user complaints around catching up on long threads.
What I learned
Designing AI features is fundamentally about designing for trust. Users need to understand what the AI is doing, when it's doing it, and how to verify or override it.
Working within an existing design system also sharpened my thinking about component design. Every decision had to be justified not just for this feature, but for how it would scale to the AI features that came after it.