Website Migration + Design System

Overview

Microsoft 365’s marketing site promotes key products like Teams, Security, and Office. The platform consisted of hundreds of thousands of pages spread across multiple legacy systems. The team needed to migrate to Adobe Experience Manager (AEM) while unifying four separate design systems.

The initial migration pace projected a ten-year timeline, far beyond the two-year target. I focused on helping streamline workflows, align teams, and build a scalable design system to future-proof the platform and strengthen the brand.

My role

I was the UX designer responsible for ensuring the migration and design system work not only met technical requirements but also improved efficiency and consistency.

Key contributions:

• Audited and mapped legacy components to AEM

• Created templates and best practices

• Collaborated with development and production teams to solve system gaps

• Laid the foundation for a modern, responsive design system

• Developed the future design system to support long-term scalability and brand consistency

Key challenges and solutions

Scale and fragmentation created confusion

• No clear source of truth across teams

• I compiled resources in Frontify, set interim standards in Figma, and developed a design glossary

• Created wiki documentation for overseas production teams to share best practices

• Example of applied improvements — mobile user experience

• The Feature component caused confusion on mobile due to unclear image and text stacking

• I visualized the issue, worked with development to improve stacking, and documented standards to prevent future issues

Inconsistent page authoring

• Identical components produced different layouts depending on the author

• I defined standardized configurations and created shared documentation on web implementation

• This ensured more reliable outcomes and faster production timelines

Improving Mobile Experience

Feature Component Fix

One example of how I applied these improvements was addressing mobile user experience challenges. The Feature component, which alternated image and text on desktop, caused confusion on mobile when images and text stacked in unclear ways. I visualized the issue and its impact, worked with development to improve mobile stacking, and documented standards to prevent similar issues going forward.