Role: Designer, Illustrator
Dates: 2017-2018

Design system
Design documentation
Storytelling
Visual design
Illustration

Challenge

Fluent is a design language developed by Microsoft in 2017. It was a revamp of the previous language, coined “Metro”, which defined the style and interaction of software built for Windows 10 and Windows 11. While Metro’s principles emphasized typography and minimal graphics, Fluent, by contrast, focused on dimensionality – a strategy that points to the company’s vision for the future: user experiences that seamlessly flow from 2D (i.e. phone, tablets, and desktop) to 3D (i.e. virtual and mixed reality).

I was part of original team tasked with defining and codifying the language into a system of components, patterns, and guidelines. My specific role in this initiative was to translate Fluent’s principles into a compelling narrative and practical guidance. Our goal was to increase understanding of the Fluent design system from internal product teams as well as third party creators, and help them build beautiful, accessible and engaging user experiences. 

Solution

Confronted with the challenge of synthesizing and concretizing a nascent design language into practical recommendations for developers, I leveraged the insights and technical expertise of my project partners and combined them with my visual design skills and obsession with simplicity. Instead of starting from scratch, we were constrained to build on top of existing site infrastructure. Changes we made to the guidelines included negotiating with stakeholders,  collaborating with the developers to unlock new layout opportunities within the rigid constraints of the existing technological framework; improving the taxonomy to make the guidelines easier to navigate; simplifying the writing; and adding visuals and motion to enhance viewer engagement and understanding. The newly updated design and developer guidance was revealed at Microsoft Build 2019. CSAT scores for the updated site improved since launch.

Fluent design guidelines ︎︎︎

Team

Design
Minah Kim Bass

Product
Chigusa Sansen

Motion
Jeff Arnolds

Writing
Serena Zhang, Mike Jacobs

Development
Curtis Nakauye, Martin Lijanto

Timeline

2017 - 2018