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.
My Role
Lead Product Designer co-leading cross-functional effort with PM partner to define end-to-end Teaching UI system architecture. Responsibilities included framework design, cross-platform UI patterns, detailed implementation guidance, and success metrics definition.
Design Leadership: Created tiered system architecture, designed responsive UI patterns, delivered comprehensive redlines and motion guidance for engineering precision. Developed adoption framework helping feature teams implement Teaching UI with consistency and confidence.
Opportunity
Feature Discoverability Gap: Outlook’s rich functionality had outpaced user awareness, particularly for new users engaging with Calendar, Search, and integration features for the first time.
Context-Driven Education: Prior onboarding relied on disruptive full-screen experiences shown out of context or prematurely in user journeys, creating friction rather than enabling discovery.
Cross-Platform Consistency: Need for lightweight, contextual education system that adapts across mobile and large screen form factors while maintaining Microsoft’s Fluent design principles.
Strategic Scope: Create scalable framework supporting diverse features and user scenarios while preserving familiar workflows and reducing cognitive overhead.
Process
1. User Journey Mapping: Defined optimal Teaching UI moments across Install, First Use, and Engagement phases. Focused on “Get to Know” stage—after initial meaningful interaction but before user drop-off risk.
2. Tiered Framework Design: Created systematic Teaching UI hierarchy:
- Tier 1: Half sheets for major feature introductions and significant changes
- Tier 2: Teaching tips for contextual awareness within existing workflows
- Tier 3: Teaching cards and bubbles for inline, just-in-time learning
3. Cross-Platform Patterns: Designed responsive UI components optimizing for clarity, minimal disruption, and accessibility across mobile and desktop. Included platform-specific adaptations maintaining visual consistency.
4. Implementation Standards: Collaborated with engineering to produce detailed redlines, motion guidance, and interaction specifications ensuring accurate cross-platform implementation.
5. System Enablement: Created comprehensive guidance including success metrics, failure states, user journey integration, and team adoption recommendations with clear dos/don’ts for each tier.
Results
Cross-Platform Adoption: Teaching UI framework successfully adopted by multiple Outlook teams across mobile, web, and desktop platforms, creating consistent educational experiences.
Improved Feature Engagement: Significant increase in click-through rates and feature retention for newly introduced functionality, particularly Calendar and search features.
Enhanced Onboarding Success: Reduced friction and improved completion rates for new user onboarding, with smoother discovery paths for core Outlook capabilities.
Engineering Alignment: Detailed specifications and redlines enabled faster implementation with minimal design-development gaps, improving team velocity and consistency.
Design System Maturity: Elevated Microsoft’s approach to feature education, establishing new standards for contextual user guidance across the M365 ecosystem.
Scalable Impact: Framework architecture supports ongoing feature releases while maintaining user experience quality and accessibility standards.