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.

Role

Fulltime

Deliverable

Website

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

Office, still a huge part of Microsoft's business

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

Theming!

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