Microsoft Web Design System

At Microsoft, I led the redesign of the Moray Design System, which powers over 90,000 pages on Microsoft.com, modernizing it to meet updated accessibility and brand standards. Collaborating with a multidisciplinary team, we conducted extensive research, including design audits and workshops, to unify the fragmented system and create a more scalable, tokenized design foundation. Our focus on accessibility was paramount, with continuous testing across a range of assistive devices. Additionally, I drove the cross-team collaboration, revamping page templates for key products like Microsoft Teams and Xbox, and ensured clear, scalable documentation for stakeholders across departments. This project set the groundwork for a more unified, flexible, and inclusive design system.

This project was a design system designer's dream—a complete redesign from the ground up for one of the largest companies in the world: Microsoft. But not Fluent, the big, flashy system you’re probably thinking of. Instead, I led the design efforts for Moray, a lesser-known yet highly impactful design system that powers over 90,000 pages on Microsoft.com.

‍

Though Moray might not have the brand recognition of Fluent, its influence on Microsoft's marketing sites is immense. However, the system was outdated, lacked modern accessibility standards, and needed a significant face-lift to align with Microsoft’s evolving brand identity. Additionally, multiple product teams had developed their own design systems, creating fragmentation and inconsistency across Microsoft.com. Unifying these was a hefty challenge, but it became a driving goal of the project, with a focus on maintaining flexibility for each product team's unique needs.

‍

My Role

I was hired at Microsoft to lead the Moray Design Systems team on the design side, tasked with creating a net-new system that would modernize Microsoft.com. My focus was on creating seamless, inclusive user experiences that not only updated the visual language but also improved accessibility. Collaborating with stakeholders across teams, I gathered valuable insights that guided our design decisions. In just over a year, we worked on large-scale project efforts, including dozens of components, page layouts, and design system documentation.

‍

I was fortunate to work with an incredible team of 5 UX Designers, a Project Manager, a Visual Designer, a Motion Designer, and a UX Writer. We set out to bring this vision to life through a three-phase process: Research, Design, and Execution.

‍

Phase 1: Research

Our research phase was crucial and lasted approximately five months. We knew that understanding how we reached this state of fragmentation would be key to rebuilding a unified system. Our research efforts included:

‍

1. Listening Tours: One-on-one interviews with various teams to gather insights on their specific needs, pain points, and the custom solutions they had developed to work around Moray’s limitations.

‍

2. Design Audit: We conducted a comprehensive audit of the live pages on Microsoft.com to determine where the inconsistencies were and how they had developed over time. Though the data on component usage was somewhat vague, we worked closely with our engineering partners to identify the most-used components that required immediate updates. This audit gave us a roadmap for redesigning and prioritizing the core component structures.

‍

3. Workshops: We hosted several workshops with teams and the Microsoft brand team to ensure that the new design system would align with the overall brand, while still being flexible enough for product-specific needs. These workshops were pivotal in unifying the teams around a shared vision for Moray.

‍

Phase 2: Design

The design phase was not about tweaking existing elements but rather about defining an entirely new visual language. My team and I each created conceptual visual designs for an updated homepage, which helped garner stakeholder buy-in for the new direction. We broke down the foundational libraries into design tokens that could be adapted into themes for each product team. This approach allowed each product to maintain its own unique identity while remaining unified under the broader Microsoft brand.

‍

A significant portion of this phase was spent defining new typography ramps, color palettes, spacing systems, corner radii, and borders. Our biggest breakthrough was tokenizing everything, which allowed for scalability and consistency across teams and product lines.

‍

‍

During this phase, I also led efforts to revamp existing page templates, including those for Microsoft Teams, Xbox, and Microsoft 365. We integrated updated components and ensured more accessible behavior across these key product pages.

‍

Accessibility First

Throughout the entire project, accessibility was our top priority. We utilized tools like Fable and UserTesting.com to continuously test our designs against multiple disability factors. Additionally, we conducted in-depth interviews (IDIs) with beta testers who used less common assistive technologies, such as head mice and eye-tracking devices. These efforts ensured that the new design system met the highest accessibility standards at every stage of development.

‍

We partnered closely with Microsoft engineers to ensure compliance with accessibility standards while documenting clear guidelines for designers to follow when creating new design system components.

‍

‍

Phase 3: Execution

While my team finalized the foundational styles, I worked on preparing us for the execution phase. I defined a new set of Design Principles for Moray to guide the creation of future components and to ensure alignment with Microsoft’s updated branding and accessibility guidelines. We also implemented a Design System Blueprint to help manage the workload and partnered with our PM and dev teams to develop a clear roadmap.

This phase, which is currently underway, focuses on designing, spec'ing, and documenting the components for development. It will ensure that the entire system is ready for launch with all necessary guidelines and documentation.

Documentation Strategy

Documentation has been a cornerstone of this project. Traditionally, design system documentation was kept within Figma, but I recognized the need for clear, cross-departmental documentation that any team member could easily access. I collaborated closely with my teammates to ensure that any documentation created was tailored for page authors and internal stakeholders, making it easy for teams to build across Microsoft.com.

‍

We evaluated several out-of-the-box documentation solutions and are currently determining the best fit for Moray’s needs. This involved conducting a thorough comparison of competitors' documentation sites and analyzing our own information architecture (IA) to strategize the best structure for our system’s documentation.

‍

‍

Conclusion

While the project is still ongoing, we’ve already made tremendous strides in modernizing and unifying Microsoft.com’s design system. From research and audits to design and accessibility testing, every decision has been made with scalability, flexibility, and inclusivity in mind. Moray is set to deliver a modern, accessible design system that not only unifies Microsoft’s marketing presence but also enhances the user experience for millions of visitors worldwide.