UX Lead & System Owner
Figma, Zeroheight, Confluence
First Launch: 1 year. Always Evolving
The Challenge
Highlights operated with multiple design teams working independently across different digital properties. Each team had their own processes, pattern libraries, and design approaches. This made things hard sometimes:
Development & QA inefficiencies: Teams repeatedly recreated the same components from scratch for each project, wasting time and introducing inconsistencies.
Design fragmentation: No shared design language or UI standards meant inconsistent user experiences.
Slow time-to-market: The lack of reusable components and standardized processes meant every new site update required starting from zero.
Poor collaboration: Separate teams had no common tools or shared vocabulary, making cross-functional work nearly impossible.
Also, twelve shades of "highlights red," and 100 button styles is not the kind of chaos I enjoy.
We recognized an opportunity: and instead of forcing a rigid "design system" or process on teams, we created more of a flexible design hub that evolved to become what teams actually needed.
The Process
Over several years, the work grew from a small, off-the-books start into an enterprise-wide hub. The goal stayed the same: help teams move faster, collaborate more and not step on any ones toes.
Core Philosophy:
Build something flexible that teams want to use, and keep consistency without being rigid.
Focus areas:
Initial pattern library vision and evangelization (2016–2021)
System architecture and governance strategy
Cross-functional team building and conflict resolution
Token system design and semantic naming conventions
Expansion into a comprehensive design hub serving product, brand, marketing, and operations
Documentation platform strategy and implementation (Zeroheight)
The Solution
First Pattern Library (2018)
Without formal project support or dedicated resources, the first pattern library was created to drive design efficiency and consistency, and to improve design-to-development workflows.
What was created:
Core UI pattern library with standardized components
Documentation for consistent implementation
Design-to-code specifications
Agreed upon vocabulary for cross-team collaboration (is this a tile or a card??!)
The Challenge:
Value needed to be proven while balancing other responsibilities and building buy-in across multiple teams without formal authority or mandate. (We just saw a need and did it during down times)
Early Impact:
The pattern library sped up design processes, improved development time, and reduced QA efforts, demonstrating enough value to secure formal enterprise investment.
Technical Expansion (2021)
(Spoiler: at first, we had no idea this would turn into a full-on hub—just trying to fix the "why are we rebuilding buttons again?" problem.)
The success of the pattern library led to official management support. The system expanded from UI patterns into deeper collaboration with development, including more concrete code samples and foundational primitives.
Added:
Semantic naming conventions for color, typography, and spacing
Theming capabilities for different contexts and properties
Governance framework for system maintenance and evolution
Comprehensive documentation platform using Zeroheight
Technical Decision:
Zeroheight was selected as the design system documentation platform for its ability to sync directly with Figma and provide a single source of truth for documentation that both designers and developers could reference. It also required minimal technical effort to stand up. Plus, at the time, my Confluence space was a mess.
Key Innovation:
Flexibility was built into the foundation so teams could adapt the system to their specific needs while maintaining overall consistency.
Full-On Design Hub (2024)
Rather than limiting ourselves to what most would define as a "design system," the work evolved into a comprehensive design hub that served whatever teams needed it to be.
What was created:
Design System (Product UI)
Core product UI components and interaction patterns—the traditional "design system" components
Brand Libraries (Brand Standards)
Logo usage, brand colors, photography guidelines, and brand asset management
Marketing Libraries (Campaign Execution)
Campaign templates, email components, ad specifications
Site Operations Libraries (Content Management)
CMS components and content modules for site management
Writing Standards (Content & Voice)
Voice, tone, and content patterns for consistent messaging
What made this different:
This was not just a UI component library. It became a flexible hub that each team could use in their own way—whether they needed brand guidelines, marketing templates, CMS modules, or traditional design components. The system adapted to team needs rather than forcing teams to adapt to the system.
Building a Cross-Functional Team
One of the most challenging aspects of scaling the system was creating a cross-functional team to contribute to and maintain it. We did not have an official governance team. We all took the time to contribute what we could.
The Team That Formed:
Contributors from design, development, brand, marketing, and content teams across multiple departments were recruited. Each a perspective that helped shape what the system needed to become.
The Challenge:
This did not happen easily. Different departments had competing priorities, different standards, and sometimes conflicting visions for how the system should work. Tensions arose over:
Who owned which decisions
How to balance flexibility with consistency
Resource allocation and maintenance responsibilities
Differing technical approaches and tool preferences
What belonged in the system versus what didn't
How Conflicts Were Navigated:
Built consensus through collaboration: Facilitated working sessions where teams could voice concerns and find common ground
Focused on shared goals: Discussions were anchored to a collective mission—better experiences and faster delivery and align with the company mission
Created psychological safety: Space was made for disagreement while maintaining respect and progress
Demonstrated value: Early wins spoke for themselves, building trust through results
Stayed flexible: The system evolved based on real team needs rather than a predetermined vision
Measurable Outcomes
Reduction in time-to-market for new site updates over the course of several years
Eliminated component recreation across development, design, and QA, saving countless hours
Unified independent teams under a shared framework while preserving team autonomy
Built sustainable governance model with cross-functional ownership ensuring long-term system health
Created centralized design hub that went beyond traditional design systems to serve brand, marketing, operations, and content teams
Established scalable foundation enabling faster feature development and consistent experiences across all digital properties
Cross-Functional Impact
Development & QA Teams
Eliminated redundant work: Developers stopped recreating components for each project or task, instead using standardized, reusable code that reduced development time and improved code quality.
Single source of truth: Zeroheight documentation provided developers with clear specifications, reducing ambiguity in implementation.
Faster QA cycles: Consistent implementation patterns meant fewer bugs and faster testing processes.
Creative Design Teams
Universal access: Designers could work in their preferred tools while accessing the full UI libraries, color and typography systems, and site templates.
Streamlined creative processes: Standardized design components and libraries accelerated design work regardless of tool choice.
Marketing Teams
Self-service capability: Marketing could create wireframes independently, then hand off to creative teams for execution.
Faster campaign launches: Reduced back-and-forth and accelerated the creative process.
Easy reference: Non-technical team members could access and understand design standards through Zeroheight's user-friendly interface.
Brand & Content Teams
Centralized standards: All brand guidelines and content patterns lived in one accessible place.
Consistency at scale: Teams could maintain brand consistency and standards.
Key Learnings
Start small and prove value. The grassroots pattern library provided proof of concept and built organic buy-in that made the enterprise investment possible.
Cross-functional collaboration requires conflict resolution. Bringing together multiple departments meant navigating tensions and competing priorities—establishing clear governance and focusing on shared goals was essential.
Don't be constrained by definitions. Rather than limiting efforts to what a "design system" typically means, the work focused on what teams actually needed—whether UI components, brand guidelines, marketing templates, or content standards.
The right tools enable adoption. Zeroheight bridged the gap between design and development while providing accessible documentation for non-technical stakeholders.
Flexibility drives adoption. A system that teams could adapt to their needs—rather than rigid standardization—was critical to widespread adoption.
Listen and evolve. Success came from staying open to feedback and allowing the system to become what teams needed, not what any single person initially envisioned.
Patience and persistence pay off. Nine years from initial concept to mature enterprise design hub required sustained effort and vision.
Shared ownership ensures sustainability. The system succeeded because contributors from each department became invested stakeholders, not just users.
This design hub transformed how Highlights ships digital experiences—from siloed, inefficient processes to a unified, flexible framework that reduced time-to-market while improving consistency and quality across all properties. By focusing on what teams actually needed rather than adhering to traditional "design system" definitions, the organization created something far more valuable and sustainable.
HTML to CMS Migration
UX strategy for standardizing product pages and components for content management system
Rewards Platform Authentication
Transition from promotional mail authentication ID to scalable digital login system
Magazine Order Form Migration
Strategic platform consolidation using Adobe Commerce multi-store architecture