Microsoft Family Design System

Role: Design lead
Date: 2020 - 2022

Design system
Design process

Microsoft Family Design System

A robust and scalable design system for creating Family experiences that are consistent across all platforms

Challenge

Since the start of the Microsoft Family Safety initiative, the design system work stream was every designer’s neglected side project. Resourcing contraints and leadership pressure led to the prioritization of product feature work above all else, and all “non-urgent” efforts that didn’t directly contribute to our short-term goals were defunded. With contribution to the component libraries sporadic and unstructured, our design system quickly became stale and ripe with errors. Over time, and unsurprisingly, those errors showed up in the product experience itself.

With both designers and engineers complaining about the inconsistencies in our designs and inefficiencies in our workflow, a small group of us petitioned product leadership to provide resources to address this design and engineering debt before the situation became more unmanageable. As the size of our team grew to meet the increased demands of our project, it was imperative for us to set up our design system and process in a way that could gracefully accommodate this scale while still maintaining parity with our parent system, Fluent.

Solution

The first action item after the design system project was funded was to designate design and engineering ownership (members are listed in the adjacent column). Together, we did the following:

Structured our project by clarifying our goals and success metrics
Surveyed the damage that had accumulated over time in our component libraries both in Figma and in code, and prioritized the changes we needed to make in order of importance
Created a project roadmap and a rhythm of collaboration and progress
Built an intentional and sustainable governance model that enabled everyone on the product team to learn and contribute meaningfully to the design system while maintaining quality control

Our goals for the project was a design language, helpful guidelines, and a system of reusable components that would increase our design and development velocity and reduce our time spent reinventing the wheel on solutions.

Team

Design Mobile
Minah Kim Bass (Lead), Mahogany Breaux

Design Web
Chang-ling Wu (Lead), Niloofar Khoda Baksh

Engineering Mobile
Andrew Mcleod, Sapna Sawhney, Sunny Mehta

Engineering Web
Cristen Carvis, Carles Moreno, Greg Mialon, Noe Loyola