Systemizing
User Education
Client: The Washington Post Design Systems
Project dates: Sep 2025 - Nov 2025
As a Washington Post Design System (WPDS) product designer, I developed a comprehensive framework that included implementation architecture, evaluation matrices, content strategy, and cross-functional collaboration. View The Washington Post Design System’s User Education Guide.
The Challenge
Our challenge was to create a comprehensive framework for user education within The Washington Post's design system. Product designers lacked guidance on which components - such as tooltips, dialogs, or other patterns - would best serve specific educational needs. This absence of clear documentation led to inconsistent implementation choices and created a fragmented user experience across our products.
Our Goal
Our goal was to create clear guidelines for implementing user education in our design system. We focused on developing consistent patterns for new features, simplifying decision-making for product designers, enhancing user experience through standardization, and building iterative documentation that would evolve alongside our growing library of educational components.
My Approach
Discovering Patterns & Opportunities
Through internal audits of our own user education patterns and external research of industry best practices, we uncovered consistent findings across both our site and app experiences. Our comprehensive analysis revealed several key patterns: users tend to only absorb a small portion of educational content, typically scan instead of reading in detail, and frequently dismiss instructional messages before reading them completely.
Based on my analysis of our own user education implementations and competitor approaches, I organized these use cases into three distinct 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.
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.
The documentation, which lives on our public design systems site build.washingtonpost.com and serves as a resource for all teams, provides a comprehensive set of tools and guidelines for implementing user education. We created a structured framework that helps teams evaluate their user education needs based on detail, engagement, and communication type, along with clear best practices for selecting appropriate components and designing effective experiences.
This framework has proven to be a valuable resource for teams across the organization, serving as a comprehensive reference guide that has been successfully implemented in various areas, particularly in content delivery flows and subscription experiences.