Design System for Microsoft Defender

Microsoft Defender is a product for lay people to detect, protect, respond and recover from digital threats. As the Defender product was maturing, there needed to be an endeavour to standardize components and pages while decreasing engineering efforts. More importantly, there needed to be cohesion between designs created by different designers, across different geographies, on different platforms.

Role: Product Design Lead

The Approach

Marrying the power of Figma’s tokens and variables with Microsoft Fluent’s accessibility standards I defined the quadfecta of the design system. You will see that this approach leans heavily to atomic design.

Design Variables

This is the foundation of the design system. I first defined a new 16-colour ramp and a neutral tone ramp that complimented the product but also met the WCAG AA standards. Furthermore, if any designers referenced the colours within the system, it meant that it can be instantaneously switched to dark and high-contrast modes— without additional effort— which exceeded accessibility requirements.

Numeric variables were also defined to help standardize margins, padding, and corner radii.

Atoms

These were the simple elements that help build out more complex, compound components, we will talk about in the next section. For example, these were the buttons, profile pictures, text inputs, or controls within Defender.

Fluent is Microsoft 365’s design system. It is used by products like Microsoft Word, Excel, Powerpoint, Teams, and OneDrive. To be more consistent with Microsoft 365’s established product family, I replicated these atomic elements but re-skinned them to have Defender specific styling. This ensured that the base elements of the product felt part of the Microsoft family but was also unmistakably Defender.

Molecules

This is the penultimate stage of the approach. Molecules are more complex, compound components. For instance, these are profile cards with different interactions or reusable elements that may have buttons, details, and images.

I created molecules for every page of Defender. Moreover, when a molecule had a slight variation to its appearance or interaction, I created a component. That way, when designers leverage this design system, they can easily toggle between states and thus accelerate design. Since a single molecule covered multiple use cases, this maximized reusability.

Pages

The final stage is pages. By combining multiple molecules together, I formed standardized pages for all of Defender. My product team, consisting of PMs, Engineers, Content Designers, and Designers now have a single source of truth for the entire app.

Timeline

The timeline was broken down into 5 stages:

Defining the variables and tokens

Creating atomic elements

Creating molecular elements

Creating page templates for the entire app

Repeat

Since it was my first time collaborating with Microsoft Fluent’s team, building a design system, and bringing my peers along, I estimated that each stage would take around two weeks. However, with a tight timeline, increased knowledge, and each stage streamlined the next, I was able to create an entire design system for a single platform in two weeks.

The Result

To maximize the potential of the design system, my team of PMs, Engineers, Content Designers, and Designers, had to be brought along for the journey. Early in the process of building the system, I needed to understand the effort and the degree of support the engineering team was capable of. Many conversations were had surrounding platform support and t-shirt sizing. I led demos and teach-outs to PMs, and mainly Content designers and Designers showcasing how to leverage and maintain this system. As a result:

For PMs, they pull from this design file to pitch ideas to stakeholders. This file also serves as reference to aid recall in product truth.

For Engineering, Defender’s design system means that there is a standard template on how the designs should appear. Their story books are to be updated to reflect these design changes. Dark and high contrast mode designs are also ready for implementation. Looking ahead, by standardizing molecules and pages, this helps scale designs to easily implement landscape mode.

For content designers, we are looking to integrate the CMS within the design system. This will resolve hardcoding copy in the app, ensure that the content is the most accurate and as fresh as possible, and serve as product truth.

For designers, it means that we can easily create detailed experiences just by copy and pasting pages from the design systems into our respective project files. Because components have been created, features can easily be toggled on or off. It helped increase design cohesion between different designers across different geographies. Additionally, the design system has decreased design time by 7x because prior to this, designs were being created by scratch project-to-project.

Looking ahead

On my end, I continue to monitor Figma’s updates and its capabilities. Type ramps and gradients are on my list to incorporate into Defender’s design system.

I also need to provide more educational sessions to help bring other designers up to speed with the design system. As new features are requested and delivered, they need to be reintroduced into the design system so that we can maintain a single source of truth.

Other Projects