Microsoft 365
Design System Governance & Website Migration to AEM
Timeline
May 2022 - Jun 2023
My Role
Senior UX Designer
Tools
Figma, Adobe XD, Frontify, Adobe Experience Manager, and Adobe CC
Team
Collaborated with PMM, PM, DEV, & PROD teams
Overview
The Problem
Microsoft 365 (M365) is a web marketing platform spanning multiple legacy systems. The goal was to migrate everything to Adobe Experience Manager (AEM) within two years while consolidating four design systems into a single, scalable framework. The unified system also needed to support product brands like Teams, Outlook, and Excel, each with distinct UI and content requirements.
I played a key role in shaping the governance and evolution of the M365 design system, while also helping lay the groundwork for a future system.
The M365 website was fragmented across four Content management Systems (CMS), each with its own design standards, components, and authoring tools. Pages built with the same components often rendered differently depending on who authored them. This led to confusion, mobile usability issues, and delays in campaign launches
My role
The Feature component displayed images alternating left and right on desktop, but on mobile they stacked incorrectly, breaking the connection between each image and its related text. This created confusion for users, especially when scanning product features.
To address this and similar issues across the platform, I followed a structured process:
Audited and mapped legacy components to AEM structures, identifying gaps and inconsistencies
Defined interim standards in Figma and Frontify to guide design and implementation
Created reusable templates to support consistent authoring across teams
Standardized configurations by partnering with DEV and PROD teams to ensure accurate component usage, accessibility, and implementation
This approach supported consistent rendering across breakpoints and informed broader system standards.
Example
As a Senior UX Designer on the Microsoft 365 team, I helped bridge the gap between legacy systems and the future design system. I audited components across platforms, defined interim standards in Figma, and created Frontify documentation to support consistent implementation.
I partnered closely with production (PROD) and development (DEV) teams to clarify component usage, guide proper configurations, and establish a shared source of truth. I also contributed to the development of the next-generation M365 system to support long-term scalability.
My focus was on driving consistency, streamlining designer-developer workflows, and increasing adoption of shared components and standards.
System Unification: Audited components, mapped legacy, defined interim standards (Figma, Frontify).
Team Enablement: Partnered with production teams to define proper component configurations and ensure accurate implementation.
Future-Proofing: Helped shape the next-gen M365 system using atomic design principles to support scalability, accessibility, and flexible component composition.
Workflow Optimization: Collaborated with development and production teams to document component behavior and support accurate implementation at scale.
Conceptual desktop layout of the Feature component (Above).
Conceptual mobile layout of the Feature component (Above).Outcomes
This work laid the foundation for a unified Microsoft 365 design system and improved consistency, clarity, and production efficiency across the platform.
Unified four design systems into a centralized, scalable framework
Improved consistency and accessibility across a complex, multi-system ecosystem
Established a shared source of truth in Frontify and Figma to align UX, engineering, and PROD teams
Reduced implementation errors and accelerated delivery through reusable templates, usage guidance, and systemized documentation
Strengthened cross-functional collaboration by clarifying component behavior and supporting proper configuration in production environments
Deep Dive
Curious to see more? I’m happy to share additional context or discuss how this approach could support your design system work.