03 Design Systems · Enterprise UX · Research · Product Ownership

Design System
Documentation
Portal

Documentation hadn't been updated since 2018. Two UX groups had just merged. Tribal knowledge was walking out the door. I led the research, redesigned the portal from the ground up, and stepped into the Product Owner role mid-project when the team needed it.

Role
UX Researcher → Designer
→ Acting Product Owner
Scale
100,000+ employees
50+ global brands
Research
30+ teammates
surveyed and interviewed
Context
Global pharmaceutical
enterprise design system
Impact

Results

↓
Support Requests
Significant reduction from design teams post-launch
↑
Deploy Speed
Faster marketing site launches across brands
50+
Brands Served
International pharmaceutical portfolio
30+
People Researched
Designers, developers, stakeholders
Challenge

The Perfect Storm

Following the merger of two UX groups into one Enterprise UX organization, we faced several compounding problems simultaneously.

Documentation from 2018. A development-focused portal alienating designers. Tribal knowledge leaving as people exited. Enterprise-scale complexity across a global pharmaceutical portfolio. Leadership bandwidth consumed by team dynamics.

Scale of the Problem

  • 50+ international brands requiring consistent yet flexible guidance
  • 100,000+ global employees potentially impacted by design system decisions
  • Outdated tooling — Sketch-era docs in a Figma-first organization
  • Security constraints limiting cloud design tool access in pharma
  • Designers inspecting code and manually converting RGB to hex just to find component states
Research

Discovery

I ran a comprehensive research sprint across the merged organization before touching a single design decision.

Survey Research

Comprehensive assessment to 30+ teammates across disciplines using Microsoft Forms — quantifying the pain before qualifying it.

User Interviews

1:1 moderated interviews with designers, developers, and design system consumers to understand the daily friction in detail.

Card Sort Analysis

Hybrid card sort to surface how users mentally organized components and content — letting their model drive the IA, not mine.

Industry Benchmarking

Competitive analysis of documentation patterns from leading design systems — identifying the bar to clear and the patterns worth borrowing.

Critical Gaps Found

Missing Component States

Interaction states weren't documented anywhere. Designers were inspecting code and manually converting RGB values to hex just to understand hover, focus, and disabled states — for every component, every time.

No Shared Vocabulary

Designers and developers used completely different terminology for the same component elements. Every handoff started with a translation session. No anatomical documentation meant no shared language.

Structural Specifications Missing

Internal and external component structure wasn't documented. Designers reverse-engineered or guessed when customizing — creating inconsistency across brands at scale.

Solution

The Redesign

Before

  • Dense, paragraph-heavy docs
  • No component visualization
  • Dev-focused, designer-hostile
  • No interaction states shown
  • No shared terminology
  • "Got time for some light reading?"

After

  • Visual component examples inline
  • All states documented visually
  • Anatomical labels + numbered callouts
  • Tabbed sections, quick nav sidebar
  • Responsive spacing documentation
  • Built-in analytics for adoption tracking

Before & After

The old portal was built for developers — dense, text-heavy, no visual component examples. Designers had to inspect code just to find interaction states.

Before — Legacy Portal
Old design system documentation portal showing dense text-heavy layout

Development-focused, no component visualization, poor scanability. Designers described it as "got time for some light reading?"

After — Redesigned Portal
Redesigned design system documentation portal with clean navigation and visual component examples

Clean component visualization, tabbed navigation, quick-access sidebar, all interaction states documented inline.

Usage Guidelines Transformation

One of the clearest examples of the documentation shift — from wall-of-text guidance to scannable do/don't visual pairs that developers and designers could both act on immediately.

Before and after comparison of usage guidelines documentation

Before: dense paragraphs requiring close reading. After: clear do/don't visual pairs — faster comprehension, better cross-team alignment.

Specific Wins

Content Guidelines

Replaced vague calls-to-action like "Learn how [Brand] might be able to benefit you" with clear, specific, tested alternatives — with visual examples for every pattern.

Component State Documentation

Built complete visual references showing default, hover, active, focus, and disabled states for every component. Designers no longer touched the codebase for design decisions.

Anatomical Alignment

Introduced comprehensive anatomical labeling with numbered callouts — giving designers and developers a shared vocabulary that survived handoff.

International Design Support

Added comprehensive RTL guidance and localization documentation — a gap that was creating silent inconsistencies across global deployments.

Role Evolution

Researcher → Designer → Product Owner

Mid-project, the Product Owner went on maternity leave. I stepped into the role: managing the backlog, facilitating sprint ceremonies, aligning stakeholders, and making roadmap calls — while continuing to do the design work.

This wasn't a temporary title — it was four months of owning both the strategic direction and the craft execution simultaneously. It clarified something: I'm most effective when I'm close enough to the product decisions to influence them, not just illustrate them.

Post-Launch

  • User feedback loops — systematic collection and analysis identifying ongoing improvement areas
  • Content maintenance program — keeping documentation current as components evolved
  • Analytics-driven optimization — built-in design system usage tracking informing future decisions
  • Training and adoption support — structured onboarding for new team members across the organization
Skills

Demonstrated

UX Research Information Architecture Design Systems Product Management Content Strategy Stakeholder Management Card Sort Analysis Heuristic Analysis Enterprise UX Accessibility International Design Component Documentation Change Management
← Previous Skills Assessment Tool