Systemizing User Education

  • Role: Product Designer

    Team: The Washington Post Design System (WPDS)

    Timeframe: Sep 2025 - Nov 2025

  • I created a user education framework for The Washington Post Design System that organizes educational components by how much user engagement they need and how complex the information is. The framework provides clear guidelines, helps teams choose the right components, offers content recommendations, and establishes collaboration processes. This helps our product teams create better learning experiences across our platforms and make design decisions faster.

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

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

    The framework helped teams choose the right educational tools more easily, saving them time. It made learning experiences more consistent across our products while supporting different ways people prefer to learn. It also created a starting point for improving our tutorial system to handle step-by-step guidance, which helped app and website teams work better together.

Recognizing challenges in user education strategy.

As our design system's component library expanded, product teams increasingly needed guidance for selecting appropriate user education patterns. However, we lacked clear direction:

  • Selecting the right component became increasingly difficult with no clear decision criteria.

  • Without established standards, teams made inconsistent design choices for similar experiences, fragmenting the user experience across our website and app.

  • Our system had insufficient component support for diverse educational needs, especially for complex scenarios like interactive walk-throughs and multi-step tutorials.

Envisioning a systemized framework.

The goal was to create a framework that would systematically address key challenges in user education. This solution would:

  • Create clear selection criteria for educational components based on use cases.

  • Standardize patterns across products for a consistent user experience.

  • Map components to engagement levels and information complexity.

  • Fill gaps in our component library, especially for interactive tutorials.

  • Provide evolving documentation that grows with our design system.

Auditing existing patterns and identifying 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.

Result: An empowered product team and improved user experiences.

Our framework provided advantages for both development workflow and customer interactions:

  • Streamlined decision-making for component selection, saving significant time for designers

  • Created consistent learning experiences across digital products

  • Accommodated diverse learning preferences with appropriate guidance

  • Created a foundation for upgrading our beta coachmark into a system supporting complex, multi-step walkthroughs

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

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