B.Nye Retail Media Dashboard

7-Level Enterprise Analytics

ReactRechartsTailwindViteSemantic Zoom + Progressive Disclosure

A retail media agency managing 8 clients across 23 campaigns had no way to see both the executive summary and deal-level detail in one system. I built a dual-mode dashboard — executives see KPI tiles and conversion trends, operators drill through 7 hierarchical levels from agency to creative — with 9 composable chart components and real-time transaction feeds.

Drill-Down Levels

Chart Components

View Modes

Data Dimensions

Problem

Executives needed campaign performance at a glance — ROAS, conversion trends, sales lift. Campaign managers needed to drill into individual deal-level creative performance without losing the bigger picture. No single tool served both audiences, so decisions were slow and context was constantly lost.

Solution

I built a dual-mode dashboard. Executives see KPI tiles, conversion charts, and shopper insights. Operators drill through 7 hierarchical levels — agency to creative — with breadcrumb navigation and contextual metrics at every level. Same data source, two cognitive loads. The mode toggle switches the entire interface in one click.

Architecture

┌─────────────────────────────────────────┐
│          Mode Toggle (Exec / Ops)        │
├────────────────┬────────────────────────┤
│   Executive    │      Operator Mode      │
│     Mode       │                          │
│ ┌────────────┐ │  Agency ▸ Client ▸ ...  │
│ │ KPI Tiles  │ │  ┌─────────────────┐    │
│ │ Charts     │ │  │ Level 1: Client │    │
│ │ AI Cards   │ │  │ Level 2: Campaign│   │
│ │ Live Feed  │ │  │ Level 3: AdGroup │   │
│ └────────────┘ │  │ Level 4: Package │   │
│                │  │ Level 5: Deal    │   │
│  Measurement   │  │ Level 6: Creative│   │
│  Sales Lift    │  │ Level 7: Geo     │   │
│  Insights      │  └─────────────────┘    │
└────────────────┴────────────────────────┘

System Components

Service

Executive Mode

KPI scoreboard, conversion charts, AI insight cards, live transaction feed

Service

Operator Mode

7-level drill-down with breadcrumb nav and contextual metrics

Integration

9 Chart Components

Recharts: area, line, bar, composed — all with custom tooltips and responsive containers

Data Store

Shopper Insights

Category analysis, basket association, loyalty segments, switching behavior, propensity curves

Service

Sales Lift Engine

Incremental vs. expected vs. observed — multi-metric measurement visualization

Data Store

Live Transaction Feed

Real-time purchase events with animated entry, retailer badges, and conversion attribution

Key Engineering

7-Level Hierarchical Drill-Down

Click any row to drill into the next level. Breadcrumb navigation preserves context. Each level has contextual KPIs and a detail table.

// Route structure — nested dynamic segments
/executive                           // KPIs, charts, live feed
/manager                             // Client grid + overview
/manager/:clientId                   // Campaigns for client
/manager/:clientId/:campaignId       // Ad groups
/manager/:clientId/.../:adGroupId    // Packages
/manager/:clientId/.../:packageId    // Deals
/manager/:clientId/.../:dealId       // Creatives
/manager/:clientId/.../:creativeId   // Geo breakdown

Dual Executive/Operator Modes

A mode toggle switches the entire interface between high-level executive dashboards and granular operational views — same data, different cognitive load.

Composable Chart System

9 Recharts components with shared design tokens, custom tooltips, gradient fills, and responsive containers. Dark theme optimized with rgba grid lines.

Glassmorphism UI

Glass card surfaces, gradient mesh backgrounds, animated count-up metrics, and fade-in transitions throughout the dashboard.