Note: All visual examples are conceptual abstractions for confidentiality.
The Challenge: The "Tab Tax" on Operational Efficiency
In a high-volume call center, every second spent "tabbing" between apps is a direct cost to the business. At the onset of this project, agents were forced to juggle multiple disconnected tools—spreadsheets, legacy CRM windows, and payment portals—while managing real-time conversations with callers.
The Business Risk:
• Cognitive Overload: Constantly resizing windows and manual note-taking led to high error rates and agent fatigue.
• Compliance Gaps: Fragmented caller verification and manual settlement calculations created significant regulatory exposure.
• Operational Blindness: Managers lacked a "single source of truth" for team performance, relying on disparate data sources for coaching.
The Strategic Role: UX Architect & Cross-Functional Lead
As the Principal Product Designer, my mandate was to lead the design-to-production lifecycle for a unified zero-to-one platform. This required more than UI design; it required Systems Thinking to align Product, Engineering, Compliance, and Operations around a single, scalable interaction model.
New Settlement Offers Form
Outbound Call Summary Figma Component
Express Notes Figma Component
The Solution: Four Pillars of Systemic Efficiency
I led the UX architecture for a zero-to-one, multi-persona platform designed to streamline call handling, reduce cognitive load, and create consistent workflows across agents and managers. The solution centered around four core experience pillars:
1. The Guided Call Flow (Verification to Action)
I designed a linear, state-driven workflow that enforces compliance without sacrificing speed.
• The "Gatekeeper" UI: Caller verification was architected as a hard-stop; sensitive data and payment tools remain locked until identity is confirmed.
• Responsive Constraint Design: Since agents often work in split-screen or multi-app environments, I engineered a layout that maintains full utility even at minimal window widths.
2. De-Risking the Transaction (Payment & Settlement)
The most complex business logic was embedded in the Promise-to-Pay and Settlement modules.
• Automated Guardrails: I worked with the Product team to embed pre-authorized settlement criteria directly into the UI, ensuring agents only offer what the business allows.
• Complexity Reduction: Simplified recurring payment flows into a single-pane interface, reducing the "clicks-to-completion" by over 40%.
3. Velocity Tools (Structured Quick Notes)
To eliminate manual note-taking errors, I designed a Quick Notes Configuration system.
• Context-Aware Scripting: The system provides keyboard-triggered shortcuts and branching questions based on the current call state.
• Standardized Data: This ensures that "agent notes" are no longer free-form text but structured data points for better downstream analytics.
4. Performance Governance (Multi-Persona Dashboards)
A unified design system ensured that the Agent's "workplace" and the Manager's "oversight" were built on the same data architecture.
• Agent Dashboards: Gamified KPIs and leaderboards to drive individual performance.
• Manager QA Tools: Real-time visibility into team settlement trends and individual coaching opportunities.
Agent Dashboard
Manager Dashboard
The Engineering Partnership: Production Fidelity
To ensure the zero-to-one vision survived the implementation phase, I operated directly within the production repository.
• Atomic Component Design: I built a production-aligned Figma library that mirrored the React/SCSS structure, eliminating the "interpretation gap" for engineers.
• Code-Level Governance: I participated in PR reviews and refactored UI logic to ensure that the final product was as performant as it was usable.
Outcomes & Internal Impact
While the MVP is currently in active development, the foundational work has already yielded significant strategic value:
• Validated Usability: Prototypes confirmed a significant reduction in cognitive load and faster "time-to-settlement" during initial testing.
• Accelerated Build Cycles: The engineering team adopted the reusable pattern library, reducing frontend development time for new features by nearly a third.
• Regulatory Alignment: Achieved 100% sign-off from Compliance on complex financial workflows through interactive verification prototypes.