A design system for the consumer website

I was hired onto the Microsoft Web Framework team as one of two senior designers on a team tasked with building Microsoft's website design system.

I was placed in charge of managing the design system itself, so along with contributing components to it, I optimized teammates work and organized it into the broader system. We used Figma, so everything I added was turned into master components.

Integrating components into the design system often involved adding states and optimizing with Figma's advanced features (e.g. auto-layout)
Every component was designed for 5 breakpoints
I enjoyed leading a project to rethink Microsoft's complicated navigation
Unfortunately I don't think this will ever be built
When on a subsidiary page (like Surface), the navigation changed to support new top-level links
I was assigned to redesign Microsoft's online store filtering experience
An alternative optioni with vertical filters that performed lower in tests
I worked with teams across Microsoft to demonstrate how their site would look with components from our framework
The home page, of course
Fun stuff
Office, still a huge part of Microsoft's business
My personal favorite

The design system

When I joined there was a little bit of setup done, and when I left we had completed the list of components necessary for building any typical web page for Microsoft's core site.

Demonstrating each element so it can be properly linked to its associated color logic. This light-default.
Light-colorful allows cards to take on the primary color
Light-rich uses secondary colors on some surfaces to create a more creative vibe


One of my big side projects outside of building components and managing the design system was defining themes: how colors can adapt and change while utilizing brand palettes.

Show a fellow some love.

If you enjoyed this portfolio piece or found it inspiring please pass it on!

Copied to Clipboard