AI · Enterprise SaaS · 2026
Keeping AI analysis inside the dashboard workflow.
Problem
In the baseline experience, starting analysis on a dashboard forced users to navigate away to a separate AI Executive Summary page, open a central modal to generate text, and manually return to the dashboard to paste it back. The 4-hop context switching added heavy friction, broke analytical momentum, and risked unverified publishing.
Outcome
Redesigned the workflow around a persistent right-side panel that opens inside the active dashboard. Users can discover specialized agents, generate contextual insights, refine drafts inline, and enforce Human Verification without leaving their data. Standardized the interaction model across Angular and Vue reporting engines.
The thesis
Case-study proof
Enough context to judge the choice, inspect the work, and separate evidence from ambition.
Why this, not that
I replaced a disconnected 4-hop modal flow with an in-context right-side panel that keeps dashboard metrics visible. Instead of auto-publishing unreviewed text, I established an explicit Draft -> User Edit -> Human Verification Gate -> Executive Summary Handoff path to ensure human accountability.
Why this case is specific
Preserved live dashboard context and source date ranges while respecting enterprise role boundaries across both an established Angular reporting dashboard and a newer Vue dashboard platform.
What you can inspect
Shipped product workflow redesign + concept extensionsThe case study presents the audit discovery, shipped agent discovery panel, editable draft states, human verification gates, and Executive Summary handoff. Widget and channel creation assistants are explicitly captioned as concept extensions.
Decision to outcome
Analysis stayed inside the dashboard context. Technical constraints around pending generation persistence were resolved through explicit Close confirmation dialogs and immediate Back navigation trade-offs.
Interface evidence
01 / Research & Discovery · Honest Problem Framing
This was not an artificial lab study: discovery emerged from a hands-on usability audit of the existing reporting workflow combined with direct internal stakeholder feedback from agency account managers.
AI generation lived on an isolated page, disconnected from active reporting dashboards.
Audited every click: Dashboard → Separate Page → Modal Dialog → Manual Copy-Paste.
Agency managers complained of losing metric context and feared AI hallucinations in client decks.
Anchor AI in a persistent right-side panel with explicit human verification before export.
02 / Design Rationale · Alternatives Considered
We evaluated three structural archetypes against key enterprise workflow criteria before committing to engineering implementation.
A centered floating dialog triggered from dashboard toolbars.
A standalone AI insights hub separated from active dashboards.
A collapsible 420px drawer embedded directly inside the active dashboard.
03 / Workflow Transformation · Audit-Led Redesign
My usability audit revealed that generating an AI summary required navigating away to a separate page, opening a central modal, and copying text back. The redesign brought the entire workflow into a persistent panel inside the starting dashboard.
Previous Modal Flow (4 Hops)
Disconnected Context1. Select analysis action on main Dashboard
2. Navigate to separate AI Executive Summary page
3. Open central modal to generate response
4. Return to Dashboard to manually paste content
Shipped Panel Flow (1 Context)
In-Dashboard Continuity1. Open right-side AI Panel inside active Dashboard
2. Discover agent, view metrics, and generate text
3. Refine draft inline & mark Human Verification
4. Add directly to Executive Summary without leaving
04 / Technical Constraints · Interruption Logic
Because the backend did not support retaining in-progress responses after leaving, navigation actions during generation required explicit design rules to balance safety and switching speed.
Close Panel Button
Confirmation Modal DialogCancels pending generation if confirmed. Prevents accidental loss of unreviewed responses when exiting the workspace.
Back Arrow Button
Immediate Return to Agent CatalogCancels pending generation without modal friction. Deliberately prioritizes agent-switching speed over prompt warnings.
05 / Governance · Human Verification State Machine
Generated insights cannot auto-publish. Every item passes through explicit human editing and verification gates before handoff to client reports.
Unreviewed Output
Draft StateGenerated response remains isolated inside side panel with raw model confidence and date range context.
Inline Refinement
User EditAnalyst refines wording, adjusts numbers, and verifies source metrics inline inside the active conversation.
Human Verification Gate
Verification StampExplicit verification check recorded. Establishes human review accountability before publishing.
Executive Summary Handoff
Report PublicationVerified insight is transferred directly into executive presentation slides or exported to client stakeholders.
06 / Design Leadership · Driving Alignment
As Lead Product Designer, I orchestrated decisions across Product Management, Backend Engineering, and two separate Frontend teams.
Who I Partnered With
PM + 2 Eng Leads + Reporting OpsAligned with Senior PM on the AI roadmap, Backend Lead on streaming latency, and Frontend leads across Angular and Vue engines.
Resolving Technical Constraints
Close vs. Back Navigation RuleBackend could not retain pending responses on page exit. I established explicit modal confirmations for Close, and instant catalog switching for Back.
Trust State Machine Standards
Draft → Edit → Verify → PublishCreated the four-state AI Trust pattern that was adopted as the company-wide standard for all subsequent generative AI features.
Cross-Platform Governance
Angular & Vue Tokenized SpecsDelivered tokenized Figma specs and behavioral state contracts, allowing two distinct frontend teams to ship a unified user experience.
Interactive State Machine & Motion Demonstration
Select an agent to analyze active dashboard metrics:
Summarizes WoW variance, top campaign outliers, and budget efficiency.
01 / Research & Discovery
Through a structured usability audit and direct feedback from agency account managers, I mapped severe friction in the baseline workflow: generating a summary forced users to leave their dashboard, open a standalone page, trigger a central modal, and copy text back. This created context loss and hesitation around AI hallucinations.
02 / Alternatives Considered
I evaluated three structural models against enterprise workflow criteria: Option A (Modal dialog) was rejected because it blocked chart visibility; Option B (Dedicated AI page) was rejected because it broke report continuity. Option C (Persistent side panel) won because it kept dashboard KPIs in view while supporting streaming output, inline editing, and verified handoff.
03 / Workflow Transformation
The shipped solution replaces the central modal with a right-side panel. Users select specialized AI agents, view generated insights, and inspect underlying dashboard metrics side-by-side without losing visual context or switching pages.
04 / Interruption Logic
The existing backend could not retain an in-progress AI response after leaving the workspace. We designed selective confirmation rules during pending generation to balance safety and navigation speed.
05 / Trust Architecture
AI outputs cannot auto-publish to client reports. Every response passes through an explicit 4-stage Trust State Machine before handoff to an Executive Summary.
06 / Leadership & Cross-Framework Delivery
As Lead Designer, I aligned engineering leads on the Close vs. Back interruption model, established company-wide trust states, and provided tokenized component specs ensuring identical UX across Angular and Vue platforms.
07 / Concept Extensions
Beyond reporting summaries, I explored conversational guidance for widget setup and data channel configuration. These assistants recommend chart types, metrics, and field mappings while leaving final application control with the user. These screens are captioned as concept explorations.
08 / Reflection & Measured Outcomes
The redesign successfully reduced a 4-hop fragmented task into a 1-step contextual panel and enforced 100% human verification for client-facing executive reports. Future iterations will focus on server-side response retention.
Supporting evidence
Exploratory Concepts · Non-Production Explorations
Bring me the difficult part.
Complex workflows, AI trust, and enterprise systems.
Discuss a product challenge