The Same, Only Different

How our Cloud + AI team incorporates reusable learning into our products as part of the Fluent Design System

Jamie Young
Jul 20, 2018 · 5 min read
Image for post
Image for post
Across the Cloud + AI space, there are a number of different interfaces to interpret.

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.

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

Image for post
Image for post
The team gathered in Redmond to kick off the explorations.

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.

Image for post
Image for post
We explored lots of different directions with Fluent before refining down to our current style.

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.

Image for post
Image for post
We explored lots of different directions with Fluent before refining to our current style.

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.

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.

Microsoft Design

Stories from the thinkers and tinkerers at Microsoft

Thanks to Audrey Zekonis and Achim Dettweiler

Jamie Young

Written by

Principal Group Design Manager @ Microsoft

Microsoft Design

Stories from the thinkers and tinkerers at Microsoft. Sharing sketches, designs, and everything in between.

Jamie Young

Written by

Principal Group Design Manager @ Microsoft

Microsoft Design

Stories from the thinkers and tinkerers at Microsoft. Sharing sketches, designs, and everything in between.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store