Project details
Project Details
The goal of this project was to create a scalable fullscreen modal pattern within the Canvas Design System that could support richer marketing experiences while maintaining strong structural consistency and accessibility alignment across workday.com.
Summary
Designed and documented a reusable fullscreen modal component that enables teams to deliver high-impact content experiences while preserving system integrity and implementation speed.
The Problem
Marketing teams were implementing modal experiences inconsistently across workday.com, which created visual drift, unclear author guidance, and accessibility risk. Without a standardized fullscreen pattern, rich content experiences were difficult to scale confidently.
Main Idea
Establish a flexible but opinionated fullscreen modal component that balances expressive marketing needs with clear system guardrails and predictable behavior across breakpoints and use cases.
Project Goal
Define the modal anatomy, spacing model, and interaction behavior clearly enough that both authors and engineers could implement the pattern with minimal friction and high consistency.
Initial Research
Conducted an audit of existing modal implementations across workday.com and evaluated modern enterprise patterns to identify gaps in responsiveness, accessibility, and structural clarity. Insights informed a more resilient and scalable component foundation.
What we were able to achieve
• Delivered a fully documented fullscreen modal pattern within Canvas.
• Established clear anatomy, spacing, and overflow behavior for consistent implementation.
• Improved cross-team experience consistency across marketing surfaces.
• Enabled faster authoring and engineering adoption through reusable standards.
• Reduced reliance on one-off modal solutions across workday.com.
Conclusion
By formalizing the fullscreen modal pattern, we created a scalable foundation that supports rich content while preserving design system rigor. Teams can now ship modal experiences faster with greater confidence, consistency, and accessibility coverage.