Eric Wagner

How I Cut Design Overhead by 66% on an Enterprise Migration

Lead Product Designer · Workiva · Tech Enablement Team

Thumbnail — hero image

Overview

Role: Lead Product Designer

Team: Sole designer with tech Enablement Team, onboarded 2 supporting designers for final execution

Single-handedly architected the product strategy and design framework for an enterprise-scale migration. By decoupling technical debt from UX redesigns and designing an AI-aligned workflow, I enabled engineering to migrate 31 out of 47 features autonomously.

The Situation: A High-Stakes Tech Migration with Zero Designer Bandwidth

Our core Financial Reporting system was built on a massive complex legacy codebase. It managed intricate XBRL compliance data where a single broken link could invalidate a client's official SEC filing. Because the stakes were so high, engineering spun up a dedicated Enablement Team of Staff and Principal Engineers. Their mission was to establish the foundational architectural patterns and build the migration blueprint for the rest of the Financial Reporting organization.

The migration required a massive, simultaneous architectural shift:

  • Changing the programming language (Dart to TypeScript)
  • Rewriting the API layer (Frugal to OpenAPI)
  • Migrating legacy UI components to our new design system

However, the project lacked a dedicated Product Manager, and design resources were redirected due to an aggressive leadership pivot toward new generative AI features. The two supporting designers and I were already 100% allocated to our existing core roadmaps. Because our design bandwidth was severely strapped, I had to build a system that automated standard tasks, protected data integrity, and allowed engineering to scale without design becoming a bottleneck.

The Breakdown of Core Challenges

The Org-Wide Mission: The Enablement Team had to build a scalable, repeatable framework so the rest of the Financial Reporting organization could migrate their respective features without breaking the broader system.

The "Triple Threat" Setup: Three simultaneous migrations (Dart to TypeScript, Frugal to OpenAPI, Legacy to New Design System) running in parallel, each capable of causing layout regressions independently.

Strapped Design Allocation: Myself and the two execution designers were completely locked into other high-priority roadmaps. With design bandwidth near zero, we couldn't rely on traditional, time-heavy design pipelines to support the engineers.

The Tribal Knowledge Bottleneck: Deeply complex XBRL compliance logic lived entirely in the heads of a few veterans (one of whom just went on leave), threatening to stall design and engineering audits.

Image 1 — The Triple Threat
Three migration pillars (language, API, UI) converging on a breaking layout, with a before/after wireframe showing the collapse

The Strategy: Separating UX Redesigns from Tech Debt to Accelerate Migration Velocity

To protect engineering momentum with zero design bandwidth, I decided to decouple the technical migration from strategic UX redesigns.

Our Enablement Team

Focused strictly on tech infrastructure and design system alignment.

Core Product Squads

Took ownership of future workflow enhancements down the road.

I audited our 47 feature surfaces and built a binary framework based on layout risk. Because swapping in new components causes elements to shift and reflow, I mapped out exactly which layouts could handle an automated swap safely and which ones required manual design guardrails.

Dual-Track Migration Framework

Track Backlog impact Design & dev workflow
No mockup needed
66% of backlog (31 out of 47 surfaces)
Autonomous AI execution: Low-risk, clean component swaps. Engineers fed my structured design.md file directly into AI agents like Cursor and Claude to execute autonomously. We bypassed wireframing and mockups, limiting design consult to final QA, and accessibility checks.
Mockup required
34% of backlog (16 out of 47 surfaces)
Upfront design specs: High-complexity compliance layouts vulnerable to cascading layout and reflow errors. We created mockups upfront for engineers to build manually.

Note on scale: While surfaces varied in size and cross-dependencies, this binary approach ensured that 66% of the backlog could bypass traditional design workflow without sacrificing quality.

Image 2 — Dual-Track Framework
47 surfaces splitting into Path A (66%, autonomous AI loop) and Path B (34%, manual design specs)

Path A (66% of Project): Scaling the Design System via GitHub for Autonomous AI Coding

To make the automated track fully self-serve, I wrote our design guidelines in plain Markdown text using Google's design.md specs and put it right into their GitHub repository. Engineers dropped this file straight into Claude and Cursor. It effectively worked as a system prompt for their AI tools, giving AI agents the layout rules needed to swap components autonomously without breaking the interface.

Image 3 — The design.md System Prompt
Split screen: design.md documentation on the left, Cursor or Claude Code generating compliant component code on the right

Establishing the 5th Principle: Universal Resilience

While our company had previously established four core UX modernization principles, they were built for traditional, design-led workflows. Because engineers and AI agents were now making layout decisions on the fly, I authored and introduced a fifth core principle: Universal Resilience.

This rule mandated that any component upgrade—whether automated via AI or crafted manually by a designer—had to dynamically handle extreme data states and edge-case scaling without fracturing the UI. This gave engineers a clear, shared standard to correct layout issues before code hit production.

Image 4 — Universal Resilience
Financial data table in two states: normal data load vs. extreme load, with redline annotations showing padding constraints, minimum widths, and overflow behavior

Path B (34% of Project): Designing High-Risk Surfaces Upfront to Prevent UI Regressions

For the remaining 16 high-risk surfaces, the threat of breaking the UI was simply too high. Changing the underlying code caused layouts to collapse, so design mapped out cross-dependencies and provided full mockups upfront. This visual guardrail kept the front-end stable and fully compliant.

Scaling Knowledge: Using NotebookLM to Prevent Tribal Knowledge Bottlenecks

I launched XBRL Knowledge Sessions to preserve a decade of tribal knowledge before key veterans went on leave. This kept the project on track and allowed the supporting designers to onboard with zero downtime.

I interviewed veteran PMs, engineers, and services teams, recording the complex technical nuances of our XBRL products. I fed these transcripts into Google NotebookLM to create a searchable Knowledge Bot. When I brought in two supporting designers later, they used this bot to self-serve answers instantly and start executing immediately.

Image 5 — NotebookLM Knowledge Bot
Interface mockup showing XBRL session transcripts as sources, a designer asking a compliance question, and the bot generating a precise answer with citations

Results

  • 66% of Backlog Safely Automated: Eradicated the traditional design bottleneck by enabling engineers to migrate 31 out of 47 surfaces autonomously using AI tools like Cursor and Claude Code
  • Maximized Design Efficiency: Concentrated our limited design bandwidth exclusively on the 16 high-risk, complex surfaces rather than stretching the team thin across dozens of straightforward layouts.
  • Company-Wide Recognition: Selected to present this methodology at our annual tech offsite (LINK 2026). I delivered a virtual Lightning Talk focused on new AI-powered workflows, titled “Scaling Design Expertise Without a Designer in the Room.”
  • The Ultimate Validation: Following the operational success of scaling this project with AI, I was formally transitioned to drive central AI workstreams inside the company's core, high priority AI Team.