Web Migration & Future Design System

Team goals & objectives

At Microsoft M365, our team governed the M365 marketing website responsible for promoting brands such as Teams, Security, and Office.

My work included migrating the site to Adobe Experience Manager (AEM), auditing pages, components, and developing a design system.

Challenges & constraints

Many components being migrated to AEM did not have a 1-to-1 match.

So, our team advocated for additional functionality, accessibility, and design enhancements to match or enhance the previous component functionality when possible. This was challenging due to the limited budget.

Our team also faced inconsistent AEM component configurations built by Production (PROD). This caused similar layouts to look different page by page. This happened because the components were poorly made, documented, and supported.

Additionally, we struggled to get others to adopt the design system and other processes we supported. These issues were a significant concern for the end-user and Microsoft because they created confusion and devalued the brand.

Solutions

Creating better user-experiences by educating, supporting, and building relationships cross-functionally

Our team used these opportunities to educate, support, and build relationships cross-functionally to advocate for better user experiences. By doing this, we could make minor enhancements to the current design system being migrated to AEM while also focusing on the future M365 design system.

Additionally, our team,

• Compiled resources on Frontify to create an internal source of truth. This included detailed documentation on our current design system and brand resources for each M365 brand.

• Temporarily set the “M365 Design Standards” using Figma to communicate our current expectations while Fronify was being funded, negotiated, and built.

“Despite the setbacks our team faced, we used it as fuel to learn, document, and explore better ways of doing things for the future design system.”

A few of our future design system projects include,

• The New Grid allowed components to be adaptive, not break between screen sizes or devices, and to scale seamlessly.

• Theming included brand personalities, reusable templates, and conceptual interfaces, allowing PROD to create new pages easily.

My roles and responsibilities

My contributions included supporting the production team and helping to create consistent web experiences for the user

Initially, I was responsible for working on the future design system. During this time, my contributions included,

• Auditing the M365 website for inconsistencies such as button size and shape

• Creating high-level documentation, including theming flow charts and language

• Exploring theme opportunities such as brand personalities

• Advocating for a sequential scaling system on the new grid

• Helping create terminology for the new grid

However, after helping to review pages being migrated to AEM, I shifted my focus to support PROD. I did this to preserve the brand integrity of the current M365 website. My goal was to help their team get to a place where they would require minimal support from ours. A few ways I was able to do this include,

1. Building strong relationships with PROD and Development (DEV)

2. Becoming the go-to person on our team for PROD issues

3. Creating documentation on each component and pattern in the production environment for our team

4. Collaborating with DEV to update the AEM Wiki for PROD to help eliminate confusion on what was or was not possible for the M365 website

5. Maintaining numerous support tickets advocating for updates to AEM for either internal purposes or to benefit the user

6. Updating our team’s M365 Design Standards Figma as needed to maintain the current source of truth

7. Building a design glossary to create a common design language and help bridge the gap between DEV, PROD, and design

8. Working with other teammates to build reusable templates for common website sections to speed up production times and create consistency

Outcomes & reflection

Budget cuts & layoffs halt progress

Unexpectedly, our team lost funding, which halted our progress on these initiatives. It happened quickly and with little warning, leaving other teams with more work and less support.

The migration is still underway, and the future design system is incomplete. However, on a more positive note, the new grid is still being used behind the scenes by DEV, but without support from the team that created it.

Regardless of this outcome, I hope that our team’s work benefits others at Microsoft and helps preserve the integrity of the M365 website for its users.