Teaching UI Framework — Cross-Platform Onboarding & Feature Discovery

Project: Designed comprehensive Teaching UI system for contextual onboarding and feature discovery across Outlook’s mobile and desktop platforms. Created tiered framework enabling scalable, accessible user education without disrupting core workflows.

Situation

Outlook’s feature discoverability gap had created user friction, particularly for new users engaging with Calendar, Search, and integration features. Prior onboarding relied on disruptive full-screen experiences shown out of context, creating barriers rather than enabling discovery across mobile and desktop platforms.

Business Context: Rich functionality had outpaced user awareness, requiring lightweight, contextual education system that could adapt across form factors while maintaining Microsoft’s design principles and reducing cognitive overhead.

Task

As Lead Product Designer, I co-led cross-functional effort with PM partner to define comprehensive Teaching UI system architecture. My mandate included creating tiered framework design, cross-platform UI patterns, detailed implementation guidance, and success metrics definition that would enable scalable feature discovery without disrupting core workflows.

Action

Strategic Framework Development: Applied invention and simplification by creating systematic Teaching UI hierarchy with three distinct tiers: half sheets for major feature introductions, teaching tips for contextual awareness, and teaching cards for just-in-time learning. Used customer obsession to define optimal moments across Install, First Use, and Engagement phases.

Cross-Platform Excellence: Demonstrated high standards by designing responsive UI components optimized for clarity and minimal disruption across mobile and desktop. Applied think big by ensuring accessibility compliance and visual consistency while maintaining platform-specific adaptations.

Implementation & Enablement: Showed ownership by collaborating closely with engineering to produce detailed redlines, motion guidance, and interaction specifications. Applied earn trust by creating comprehensive guidance including success metrics, failure states, and clear adoption recommendations with specific dos/don’ts for each tier.

Results

Organization-Wide Adoption: Teaching UI framework achieved successful adoption by multiple Outlook teams across mobile, web, and desktop platforms, delivering consistent educational experiences and establishing new standards for contextual user guidance.

Measurable User Impact: Delivered significant increases in click-through rates and feature retention for newly introduced functionality, with particularly strong results for Calendar and search feature adoption. Reduced friction and improved completion rates for new user onboarding experiences.

Engineering Excellence: Detailed specifications and redlines enabled faster implementation cycles with minimal design-development gaps, measurably improving team velocity and cross-platform consistency. Framework architecture successfully supports ongoing feature releases while maintaining quality standards.

Strategic Influence: Elevated Microsoft’s approach to feature education across the M365 ecosystem, establishing scalable patterns that extend beyond Outlook. Created framework that balances user experience quality with accessibility compliance across diverse user scenarios.

Business Value: Enhanced feature discoverability directly contributed to improved user engagement metrics and retention rates, supporting business objectives around product adoption and customer satisfaction during critical onboarding phases.