The Same, Only Different
How our Cloud + AI team incorporates reusable learning into our products as part of the Fluent Design System
A few years ago, a developer I worked with introduced me to the DRY principle. For anyone unfamiliar, the Don’t Repeat Yourself (DRY) principle is stated as, “Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.” This allows developers, to put it very simply, to do things once.
When working across a suite of products, you can appreciate the value of having key elements of our user interfaces be consistent, to enshrine a common understanding in whatever context you use them. Knowing how to use one Microsoft developer tool should make it easy and familiar to pick up and start using another. That was one of our goals when we set out on the journey to tailor the Fluent Design System for high density applications.
Why do our products need it?
Many developers use several different Microsoft products to write and debug code, track bugs and tasks, manage their deployment to the cloud, and run mobile deployment and analytics. There’s a real opportunity for there to be more UI shared among products.
There are threads that tie all our products together. Use of color, common action icons, a consistent navigation model, and even a consistent use of typography can help our users find their way through their daily workflows with minimal friction. By exploring designs across multiple products at the same time, and focusing on aligning common styles and patterns, we’re hoping to align understanding and usability and delight our users with their experiences of enterprise products.
How we’ve approached it
Kick-off
We started simply by agreeing on a subset of products to consider in our exploration. We needed to ensure we could create measurable improvements in large complex products like Azure, Visual Studio Team Services, and Visual Studio as well as newer open source applications like Visual Studio Code. This range gave us the confidence that solutions we could apply to these products could probably apply to the wider suite of products.
We pinned this subset of products down during a kick-off sprint in Redmond, Washington. It was also a chance for other teams working in the group to join in and help shape the creative direction.
We spent a little over a week together listening to presentations from the core Fluent team based inside Windows, as well as experienced researchers who could give us insights into the users we were designing for. We broke into groups around solutions that could be applicable in the near future, as well as working with design leads from HoloLens on concepts to tie in MR and AI to our suite of products and workflows.
The week ended with the formation of a virtual team that would lead the exploration for the division once the sprint ended. This team is made up of designers from across the Cloud + AI landscape, giving us a range of talents and experiences to draw from. This broad team has been instrumental in crafting an experience that could be successfully applicable to as many users as possible.
Going wide and deep
We intentionally decided to avoid trying any massive UX changes in the designs. It was hard to do this as each designer had a list of fixes we wanted to make to our own products. But by keeping the scope tight on what we were looking at, and working on as wide a range of products at the same time, we could start to identify patterns that were common across all our apps without getting tied up in complex UX discussions.
While looking for cross-division patterns, the team also pulled apart the toolkit provided by the Fluent core team, to figure out what would work for our users. We tuned the type ramp, aligned on an iconography style, and played tirelessly with the levels of acrylic until we had something that worked in a dense UI, and looked consistent in its application. We also developed an approach for color which will allow our users to scan quickly through our apps and gather the same understanding of status everywhere they see it.
Main navigation
Something we iterated a lot on was navigation. We wanted to minimize changes to the UX of individual apps in this exploration, but one thing we thought we could align all our applications around was a main navigation column. This navigation model is currently applied across a large number of Microsoft applications — from Skype to core Windows applications like News and Weather. Within the team I work on — Cloud + AI, it appears in lots of places from Power BI to Azure. It’s a common model with inconsistency in both interactions and visual styling.
Having a strong, noticeable navigation that uses a similar icon style and behaves in similar ways would be a great usability win for anyone using one, or many, of our applications.
Oh, for designs’ sake!
What we didn’t want to end up with was a consistent design but a worse experience for all. Our goal was to allow our users to complete familiar actions in familiar applications, but align their understanding of key parts of the UI, so they can pick up new applications with ease. We don’t yet know how consistent we’ll be able to make our applications but we’re now in a better position with a better view of the landscape to try.
Dipping our toes in
Over the next several months, we’ll start integrating these explorations into our product designs when we have the opportunity. As well as collecting user feedback to make further refinements. We’ll keep you posted.
Jamie is the Principal Group Design Manager in the DevDiv Design Studio and member of the C+AI Design Lab team. These views are my own and not the views of my employer.
To stay in-the-know with what’s new in Fluent Design, follow us on Twitter, Facebook, and LinkedIn, or join our Windows Insider program.
