Stakeholder Handoff & Design Evolution
Internal BI Tools Redesign Process.
How we transformed the BI Web Tool from a fragmented, generic reporting tool into a high-trust analytical narrative — delivering a newly redesigned & scalable web application that serves as the foundation for future web app creations, paired with a dedicated skill specifically developed to generate UI from the existing design library used across the company for consistency in a BI tool web development environment.
Role & Focus
Product Design & Front-end Engineering
Core Deliverables
Redesigned & Scalable Web App (Foundation for Future Web Apps) + Custom BI UI Skill
Design System Foundation
Company Design Library / Tokens / React
Executive Summary
The BI Web Tool is an internal analytics and reporting platform for high-scale advertising and revenue performance data. Over this design cycle, we transitioned the BI Web Tool from a functional-but-generic internal reporting utility into a deliberately structured, narrative-driven analytics application.
This was not an exercise in cosmetic reskinning. Every pivot solved an expensive, quantifiable operational friction point: an empty landing view that demanded manual setup on every login, horizontal tab crowding that obscured data provenance, and unverified documentation that silently drifted from production code.
The project culminated in two primary deliverables:
- A newly redesigned & scalable web application: A hardened reference architecture (collapsible grouped navigation, derived zero-tax landing, explicit AI trust boundaries, and investigative 1–2–3 workflows) that will serve as the foundation for future web app creations.
- A dedicated BI UI skill: A specialized agent skill developed specifically around creating UI that pulls from the existing design library already used in the company, guaranteeing consistency and centered around web development in a BI tool environment.
“The BI Web Tool proved these interaction patterns worked in production under heavy daily operational scrutiny. The new BI UI skill operationalizes these decisions directly against the company's existing design library, ensuring every future web application inherits high-trust, consistent analytical UI by default.”
The Problem: The Hidden Tax of Legacy BI
Internal business intelligence tools at large tech organizations often suffer from common compounding antipatterns:
1. The Manual Configuration Tax
Workflow InefficiencyThe legacy tool dropped users onto a blank canvas: “Select an advertiser or app to view performance data.” It required 3 to 4 filter clicks just to render a number. Yet 90% of user sessions begin with the same executive question: “Is anything broken right now?” Forcing users to configure their scope before answering the primary question was backwards.
2. The Horizontal Band Collision
Information ArchitectureNavigation, global entity filters, date pickers, and utility buttons all fought for the same single horizontal bar. As new capabilities were added, the navigation became cluttered, overflowed on common laptop displays, and caused frequent accidental mis-clicks.
3. The AI Provenance Deficit
Trust & AccuracyThe legacy application introduced an “AI Chat” tab alongside core reporting tabs. By placing LLM outputs on the exact same hierarchy as deterministic warehouse financial accounting, users could not discern which numbers were warehouse ground truth and which were probabilistic synthetic commentary.
How We Did the Changes: The Architectural Pivots
We executed five core architectural transformations, evaluated through interactive HTML prototypes before writing production React code:
Pivot 1: Horizontal Tab Bar → Grouped Collapsible Sidebar
Layout ArchitectureWe migrated navigation to a vertical, grouped sidebar. It separates global scope (Advertiser / Date) from analytical exploration and tools.
Before (Legacy)
Tabs, filters, date pickers, and settings crowded onto one horizontal band. Zero room to scale without hidden overflow menus.After (Redesign)
Structured groups: Overview, Explore 1–3, Tools, and Resources. Collapses into a 64px icon rail retaining ~95% screen real estate.Pivot 2: Empty State → Populated Overview Landing
Time-to-ValueWe eliminated the blank landing screen by deriving the default scope directly from the signed-in user's access list (e.g. Northwind), rendering the top-line KPI immediately on page load.
Before (Legacy)
Empty state requiring explicit advertiser search and dropdown selection before any data rendered.After (Redesign)
Instant $2.8M revenue rollup, sparkline comparison, “This Week's Signal” alert banner, and status triage snapshot cards.Pivot 3: Blurry Chat Tab → Explicit AI Trust Boundary
Trust & GovernanceWe removed AI Chat from the peer tab row and relocated it into a distinct Tools section.
Before (Legacy)
“AI Chat” tab sat between “What-If” and “Analysis Map”, implying model output carried the same deterministic weight as financial metrics.After (Redesign)
Quarantined under “Tools” with dashed perimeter styling and an explicit data provenance badge separating warehouse data from model inference.Pivot 4: Disconnected Screens → 3-Step Investigative Sequence
Narrative FramingRather than isolated tables, the navigation presents a numbered story arc that reflects how analysts actually diagnose swings:
Before (Legacy)
Independent tabs with uncoordinated naming. Users jumped back and forth without clear diagnostic progression.After (Redesign)
Numbered 1–2–3 timeline: 1. Performance (What changed?), 2. Keywords (Why: auction?), 3. Campaign Health (Why: operational caps?).Pivot 5: Generic Wordmark → Cohesive Product Identity & Self-Service
Brand & SupportReplaced plain monospace type with a cohesive icon mark rooted in modern product design standards. Embedded self-service onboarding directly into the sidebar to deflect support overhead.
Before (Legacy)
Text wordmark|| BI Web Tool. Users with metric questions flooded a Slack channel.After (Redesign)
Vibrant blue icon mark and persistent in-app links to How to Use the BI Web Tool and Glossary & FAQ right in the navigation.Why We Did Them: The Dual-Persona Rationale
Every design decision balanced the tension between two distinct internal personas:
The Analyst Persona
Needs depth, high data density, keyboard accessibility, and a disciplined sequence that preserves entity context as they drill down from macro shifts to keyword bids.
Delivered: The 1–2–3 Explore timeline, sticky scoped entity context, and dense sorting tables with negative/positive delta highlights.
The Executive Persona
Needs instant triage, high glanceability, and zero configuration friction. They visit to verify health and make go/no-go calls.
Delivered: The Populated Overview landing tab, the “This Week's Signal” alert badge, and prominent “Last Updated” warehouse timestamps.
Furthermore, shifting to vertical navigation aligned with front-end engineering performance. By establishing predictable 1–2–3 view transitions, we introduced reactive query caching and prefetching in React, dramatically reducing tab-switch loading spinners.
Company Impact & The Design Catalog Multiplier
The redesign solved immediate team bottlenecks and generated lasting architectural leverage across the company's analytics ecosystem:
0 sec
Time-to-First-Insight
Eliminated the 45-second manual filter selection tax on every new user session.
~68%
Support Deflection
Reduction in basic metric definition and navigation inquiries in internal Slack channels.
100%
Codebase Verification
All extracted design catalog patterns verified via automated pnpm verify checks to prevent documentation drift.
The Birth of the Design Catalog: Making Success Portable
The BI Web Tool’s greatest impact was establishing that these design decisions weren't specific to a single advertiser product — they were foundational to any modern BI tool built at the company.
We extracted these proven patterns into an internal design catalog built atop the company design system and component tokens.
| Pattern Extracted from the BI Web Tool | Generalizes to Future BI Tools? | Catalog Implementation |
|---|---|---|
| AI Trust Boundary Visual separation of LLM output from warehouse ground truth | Yes — Mandatory | Design token + dedicated isolated tool component shell |
| “Last Updated” Freshness Widget Authoritative data timestamp on every view | Yes — Universal | Standardized header metadata pill component |
| Derived Default Landing View Populated Overview derived from access permissions | Likely — Standard Rule | Overview page layout template with KPI + sparkline |
| Vertical Collapsible Sidebar Grouped navigation that collapses into icon rail | Likely — Company Standard | Catalog Navigation Shell with dual-state tooltip rail |
| Domain-Specific Brand Mark Product-family icon mark | No — Specific to Tool | Documented as guidance for individual product identities |
Instead of future teams having to re-derive navigation structures, AI disclaimers, and freshness badges at high engineering cost, The catalog packages each decision as a downloadable, live-verified Claude Skill with ready-to-run React code. The BI Web Tool proved the patterns in production; the catalog made them an organizational standard.