Content Library Redesign + AI Analytics Dashboard for B2B MarTech SaaS
5 concepts → 3
Taxonomy
Full React build
Prototype
PRD-to-design automation pilot greenlit
Impact
Redesigned the content management system (Media Manager) for ON24's Engagement Hub — a B2B MarTech platform powering enterprise webinars and events. Simplified a broken 5-concept content taxonomy down to 3 (Groups, Categories, Tags), solving a problem the PM's PRD had left unresolved. Built a full interactive React prototype using Claude Code, extracted the design system from existing UI screenshots using AI, and pioneered a PRD-to-design automation workflow that leadership wanted to present company-wide.
The Challenge
ON24's content library had grown organically into a confusing system where five overlapping organizational concepts (folders, groups, categories, tags, and content types) made it nearly impossible for enterprise clients to find and manage their webinar assets. The PM's product requirements document described the problem but didn't resolve the underlying information architecture conflict.
Simultaneously, the company needed a new analytics dashboard to track an emerging data source: AI-driven registrant traffic from ChatGPT, Claude, Gemini, and Perplexity. Stakeholder requirements were ambiguous, mixing confirmed trackable metrics with aspirational ones that hadn't been technically validated.
What I Delivered
- Complete Media Manager redesign with simplified 3-concept taxonomy (Groups, Categories, Tags)
- Full interactive React prototype (Vite, React, Tailwind) built via Claude Code across 10+ prompt phases
- Design system token files (CLAUDE.md, tailwind.config.js, tokens.ts) extracted from existing UI screenshots using AI
- GEO Analytics dashboard mockup: AI-driven registrant traffic reporting with metrics hierarchy separating confirmed vs. aspirational data
- CTA/Conversion Tools modal: restructured from flat UI to 3-tab flow (Setup, Style, Placement)
- Two PRDs written from raw stakeholder meeting transcripts
- PRD-to-design automation pilot proposal — greenlit by PM, expanding to Event Replay and AI Personalization projects
- Speaker Library: shipped in April release for GoLive customers
The AI Workflow
Created a reusable design system extraction workflow: fed Claude screenshots of ON24's existing admin UI and had it extract typography, color, spacing, and component patterns into structured token files (CLAUDE.md, tailwind.config.js, tokens.ts). These became the single source of truth for all AI-generated prototypes.
Used Claude as a "meeting intelligence" layer — feeding raw stakeholder transcripts to extract design-relevant action items, unresolved product decisions, and risks before attending follow-up meetings. Built the React prototype in structured multi-prompt phases where each prompt references existing token files rather than hardcoded styles.
This workflow — PRD in, React prototype out, with AI maintaining design system consistency — became the pilot for a company-wide PRD-to-design automation process.