I volunteered to help bring Microsoft's Fluent Design System to its suite of enterprise web apps, finally delivering product consistency so customers wouldn't be confused going from app to app.
• Build a type and gray ramp
• Add table column actions
• Assist junior designers
These are all products in the same suite.
Different headers. Different navigations. Different looks.
Would you be able to tell they are a family?
We don't use scores solely as an indicator of success, but McKinsey Design Index scored Microsoft’s Office, Experiences + Devices, and Windows experiences nearly 3x above its business apps.
And user research validated those scores. Most of the business apps rated poorly when it came to task success and the experience rating.
Fabric, Microsoft’s front-end framework, was already halfway there. By leveraging it, enterprise experiences could now mirror those in the Office product suite and any new patterns could be built into the system.
Each designer took on a set of patterns and talked to product teams to define the direction, getting existing research when possible. Designs would be finalized with content, then built for product teams to consume.
We built off of the existing Fabric framework as much as possible, but there were a lot of missing pieces and no UI kit to leverage. I built the type ramp, the gray palette ramp, and helped design actions for our table columns.
We used the already established Fabric gray palette as our foundation, eliminating 10 gray shades to make it easier to know when to use them.
I also put together a deck to consider the use of cool grays versus neutral grays, which inherently look a little warm. Here are a few slides from it.
We didn’t end up using cools, but the study started a conversation that all products should be using the same greys across Microsoft, which wasn’t the case at the time. Not even in Office.
I wasn’t the only volunteer from my product team. A junior designer I had been mentoring also wanted to contribute so I guided him while he designed and documented the massive amount of basic input controls.
Lastly, I co-led a small team where we finally brought actions to our table columns. Reordering columns was also proposed but out of scope.
Our incredible multi-disciplinary team, most volunteering from their day-to-day product roles (like myself), came together to deliver this Figma UI kit which excelled in driving consistency, going on to influence FluentUI and the kit we use today.
While working on the system, I wondered why the beautiful app icons were not being used to reinforce each product’s identity. I decided to make a concept solving that and have the top navigation be less of a glaring distraction.
This work was so fun and I’m grateful to have taken part in it!
Getting 40+ products to all be consistent was a huge challenge but we did it. It’s an amazing feeling knowing that each decision can now save someone so much time and headache.