Website Migration + Design System

Summary

At Microsoft 365 (M365), I was part of the team responsible for managing and evolving the M365 website, which serves as the primary platform for promoting flagship brands like Teams, Security, and Office.

My key contributions included the website migration to Adobe Experience Manager (AEM), driving the development of a scalable, future-focused design system, and playing a central role in building a modern, responsive grid system.

Overview

Our most significant contribution was overseeing the design system during the website migration. This involved consolidating four distinct design systems into a single, unified framework on Adobe Experience Manager (AEM). Each content management system (CMS) presented unique challenges, requiring careful analysis and adaptation.

I conducted a comprehensive audit of components from the legacy CMS and mapped them against AEM. Many components lacked a direct 1-to-1 match, necessitating collaboration with development (DEV) and production (PROD) teams to enhance and refine AEM components. These improvements delivered a more cohesive, functional, and user-friendly experience, strengthening the M365 brand identity.

In addition to the migration, I played a key role in shaping the future M365 design system, including the development of an innovative, responsive grid system designed to scale seamlessly across viewports.

Challenges

One of the biggest challenges we faced during the migration was inconsistent component configurations. This inconsistency caused pages with identical layouts and components to appear differently, depending on which AEM author built the page.

To resolve this issue, I collaborated closely with development (DEV) and production (PROD) teams to identify discrepancies, document solutions in a shared resource wiki, and establish standardized component configurations. These efforts not only improved consistency across pages but also streamlined workflows, enabling faster production timelines and more reliable outcomes. 

Another challenge we encountered was balancing work on the future design system while simultaneously improving the existing AEM system. I leveraged these real-time situations to inform and shape my approach to the future design system, ensuring it addressed both current and upcoming needs.

Solutions

One of the components migrated to AEM, called the Feature, lacked a direct 1-to-1 match. This component typically displayed an image to the left of a block of text, with the option to position the image on the right as well.

The primary issue arose on mobile viewports. Despite AEM configurations, the component’s responsive behavior failed to maintain a clear connection between images and their corresponding text blocks, leading to confusion and a poor user experience.

On desktop, the Feature component alternates the image placement left and right of the text block to maintain visual interest. However, on smaller screens, the component stacks images and text blocks vertically, making it unclear which image belongs to which text block—a particularly problematic issue when showcasing product features.

To resolve this, I created a series of visuals that clearly demonstrated how the component was malfunctioning and the resulting user frustration. These visuals served as an effective communication tool and sparked discussions on how to improve the component’s behavior. I presented them to the development (DEV) team, advocating for a more user-friendly experience and greater control over page authoring.

Based on my recommendations, DEV updated the AEM settings to accommodate these scenarios, enabling the production (PROD) team to reverse the image and text block order on smaller screens. This change resulted in a more consistent, intuitive user experience across devices.

Outcomes

Although these adjustments were temporary and not ideal, they helped identify gaps in the current system. We leveraged these insights to inform the development of the future design system, ensuring it would be better equipped to handle similar needs and challenges moving forward.

Additionally, our team took the following proactive steps:

• Compiled resources on Frontify to create a centralized internal source of truth, including detailed documentation on the current design system and brand guidelines for each M365 brand.

• Established temporary “M365 Design Standards” using Figma to communicate our design expectations while Frontify was being funded, negotiated, and developed.

• Developed a design glossary to establish a common language and facilitate better collaboration between DEV, PROD, and design.