OVERVIEW
Following the successful launch of Indeed's Email Design System, I identified a critical gap: inconsistent visual experiences between our promotional emails and the advertiser landing pages they linked to. I led my design technology team to extend our design system into marketing assets, creating a cohesive experience across the entire employer journey.
CHALLENGE
Our email design system success gave us credibility with marketing, but also surfaced a deeper challenge. Years of agency-built landing pages had accumulated into a fragmented codebase lacking documentation or governance, resulting in wildly inconsistent brand execution. Custom development was required for every campaign, blocking our ability to deliver quality experiences at scale to 10+ million advertisers.
OBJECTIVES
Business Goals
Reduce marketing page production time from 6+ weeks to under 2 weeks
Establish brand consistency across 14 employer marketing pages and 23,000 articles
Enable marketing team to ship campaigns without engineering bottlenecks
Create a scalable foundation supporting Indeed's global expansion (15+ markets)
Scale projected increase in advertiser sign ups and billing conversions
Technical Goals
Build a production-ready component library with comprehensive documentation
Establish governance model preventing future fragmentation
Create automated testing pipeline ensuring visual consistency
Team Goals
Transform design technologists from service providers to strategic partners
Establish design systems practice within marketing organization
Build shared ownership model between design systems and marketing teams
EXECUTION
Phase 0: Foundation & Audit (Months 1-2)
Conducted comprehensive audit of 14 marketing pages and 10+ article templates
Documented existing patterns, identifying 47 unique component variations
Analyzed marketing team workflows and pain points through stakeholder interviews
Built business case showing $800K annual savings from reduced agency dependency
Secured executive buy-in and dedicated engineering resources
Phase 1: System Architecture (Months 3-5)
Designed modular component library balancing brand expression with technical constraints
Led cross-functional working group (marketing, brand, legal, accessibility)
Established design tokens connecting to core Indeed Design System
Built React component library with Storybook documentation
Created governance model defining contribution and approval processes
Piloted system with 3 high-priority campaign pages, iterating based on marketing feedback
Phase 2: Scale & Adoption (Months 6-12)
Launched self-service documentation site with live code examples
Conducted training workshops for marketing team and remaining agency partners
Established office hours and Slack support channel for real-time assistance
Migrated 14 high-traffic pages, measuring performance and consistency improvements
Built automated visual regression testing preventing breaking changes
Created contribution pipeline allowing marketing to propose new patterns
Ongoing: Measurement & Iteration
Tracked adoption metrics through component usage analytics
Gathered quarterly feedback from marketing stakeholders
Evolved system based on emerging campaign needs and brand updates
Documented case studies demonstrating ROI to leadership
DELIVERY
Component Library
35 production-ready React components with full accessibility compliance (WCAG 2.1 AA)
Comprehensive design token system (colors, typography, spacing, elevation) synced with core Indeed Design System
Responsive grid system supporting mobile-first layouts across 15 global markets
Pre-built page templates for 8 common marketing scenarios (product launches, event pages, resource hubs, case studies)
Automated visual regression testing suite preventing breaking changes
Documentation & Enablement
Self-service documentation site with live code playground and copy-paste examples
Component usage guidelines including do's/don'ts, accessibility requirements, and content recommendations
Migration playbook guiding agencies through legacy page conversions
Video tutorials covering common implementation patterns
Monthly office hours and dedicated Slack support channel
Tools & Infrastructure
Figma design library mirroring code components with auto-layout and variants
Storybook instance showcasing all components with interactive controls
npm package distribution for seamless integration into marketing repositories
CI/CD pipeline automating component testing and versioning
Analytics dashboard tracking component adoption and page performance
Governance & Process
Contribution guidelines defining how marketing and agencies propose new patterns
Review and approval process balancing speed with quality
Quarterly roadmap process prioritizing new components based on business needs
SLA commitments for bug fixes (24 hours critical, 1 week standard)
Change management protocol communicating breaking changes 30 days in advance
RESULTS
Measurable Outcomes
100% adoption across employer marketing pages within 12 months
Campaign production time reduced from 6 weeks to 10 days average
Visual consistency score improved from 42% to 91% (automated testing)
$850K annual savings from reduced agency custom development
94% marketing team satisfaction score (quarterly surveys)
Zero accessibility violations on pages using system components
Business Impact
+4.38% lift in Advertiser Signups
+2.33% lift in Billing Conversions