Systemizing User Education

  • Role: Product Designer

    Team: The Washington Post Design System (WPDS)

    Timeframe: Sep 2025 - Nov 2025

  • As a product designer for the Washington Post Design System (WPDS), I created a comprehensive framework to help teams choose appropriate user education patterns based on engagement level and information complexity. The framework includes implementation architecture, evaluation criteria, content strategy, and guidelines for cross-functional collaboration.

  • View The Washington Post Design System’s User Education Guide.

    The framework has helped our product design teams evaluate educational needs and select appropriate components based on engagement level and complexity.

    This unified approach has streamlined collaboration between Content, CMS Tools, and Subscriptions teams, resulting in more intuitive and consistent learning experiences across our platform.

The Challenge

The Washington Post's design system faced several challenges around user education:

  • Need for clear guidelines on implementing educational components

  • Lack of standards for tooltips, coachmarks, and other educational elements

  • Inconsistent design choices across different teams

  • Fragmented user experience due to varying implementation approaches

Our Goal

Our main goals for adding help and guidance features to our design system were:

  • Develop consistent patterns for new features

  • Simplify decision-making processes for product designers

  • Enhance user experience through standardization

  • Build iterative documentation that evolves with our educational component library

My Approach

Discovering Patterns & Opportunities

Internal audits and industry research revealed key patterns in how users interact with educational content across our platforms. Users typically absorb only a portion of educational content, prefer scanning over detailed reading, and often dismiss instructions before completion.

From analyzing our implementations and competitor approaches, I developed three communication categories:

  • First Time User Experience: These communications guide new users through initial interactions with a feature or product, providing essential onboarding information to help them understand core functionality and get started successfully.

  • Support: These communications provide contextual help and explanations when users encounter specific features or need assistance during their workflow, offering just-in-time guidance to prevent confusion or friction.

  • Growth: These communications highlight advanced features, tips, or capabilities that users may not have discovered yet, encouraging deeper platform engagement and helping users expand their usage over time.

Comprehensive audit of The Washington Post's user education patterns, categorized by communication type to show how different components serve distinct educational purposes across the user journey.

Building the Framework

Guided by our core principle of thoughtful disruption, which means minimizing interference with users while maximizing educational impact, we developed a comprehensive framework through a collaborative workshop with the design system lead. We developed a matrix mapping user education components across engagement and detail levels, creating a systematic framework for designers to choose appropriate educational elements while maintaining consistency.

The matrix evaluates components along two critical dimensions:

  • Engagement Level: This spectrum ranges from passive components (requiring minimal user interaction, such as static tooltips) to highly active elements (demanding direct user participation, like interactive tutorials or guided tours)

  • Detail Level: This dimension spans from simple, single-concept explanations to complex, multi-step information flows. This helps designers match the complexity of their educational content with the appropriate delivery method

Workshop generated matrix (top) exploring the initial framework for user education components, and a refined mapping (bottom) that systematically plots our components based on their potential engagement levels and detail requirements.

Following our workshops, I refined the initial matrix into a more practical framework with modular components and clear implementation patterns. Each component was designed to be reusable and easily integrated into our documentation. The visual elements balanced specificity with abstraction - detailed enough to be recognizable yet flexible enough for designers to adapt to their needs. This approach promoted both creativity and consistency in implementation.

Evolution of the user education framework, showing the initial workshop matrix (left) where we mapped components across engagement and detail levels, followed by use case mapping (center) that helped identify patterns in implementation needs, and finally the refined component illustrations (right) designed to help teams visualize and select appropriate educational elements for their specific scenarios.

Visualization of The Washington Post's user education framework showing the relationship between different UI components and their levels of user engagement and information detail. The matrix maps passive elements like tooltips to more active elements like full-page tutorials, while the accompanying component library provides standardized implementation examples.

The Final Result

This matrix approach would enable designers to make more informed decisions about educational components. By considering both detail and engagement levels, teams would be able to select the most appropriate format for each educational need - whether that would be a simple tooltip for basic features or an interactive tutorial for complex workflows.

The final framework would emphasize our core principle of thoughtful disruption, carefully balancing educational elements with content consumption. We would provide clear implementation guidelines for different engagement levels, from passive tooltips to comprehensive product tours, along with writing standards that would promote concise, clear communication. This systematic approach would help ensure consistent and effective user education across all Washington Post digital products.

Screenshots of the User Education framework on the Washington Post Design System site.

View The Washington Post Design System’s User Education Guide.

The framework has helped our product design teams evaluate educational needs and select appropriate components based on engagement level and complexity. This unified approach has streamlined collaboration between Content, CMS Tools, and Subscriptions teams, resulting in more intuitive and consistent learning experiences across our platform.

The Impact