Microsoft Design
Published in

Microsoft Design

Designing for Scale and Complexity

How we implemented the Fluent Design System across Microsoft Azure to improve usability, consistency, and accessibility for a highly complex and evolving cloud

The updated design of the Azure portal dashboard in both the light and dark themes.
  • Hierarchical depth that draws focus to the right information at the right time
  • Improved information density and better use of screen real estate by aligning to a new Microsoft standard for data density
  • Simplified visuals that reduce clutter, remove unnecessary lines and decorations, and create better flow between different areas in the UI
  • Improved information architecture
  • Increased clarity around key navigational elements, including updates to search entry, breadcrumb improvements, changes to our menus
  • Improved accessibility, including updated colors, contrast ratios, discoverability of errors and alerts, and type ramp simplification and alignment across the portal

Our goal: making the cloud simpler

Cloud management, operation, and monitoring are complex tasks. Our goal is to make them easier for every person on the planet through a simple, consistent, and beautiful user experience.

Introducing depth: improving orientation and navigation

Depth is a key cognitive tool to understand relationships between elements both in the physical and digital world. Our previous design was flat and therefore lacked a very important element for orientation and perception of hierarchy in the screen.

Various components within the Azure portal are layered to emphasize depth and hierarchy; also note how the shadow attributes now change depending on the depth as illustrated by the levels at the bottom of the image.

Improved data density: showing more in less space

Azure is constantly expanding: we’re simultaneously making improvements to our existing services and releasing new services all the time. Consequently, there is a lot of information and functionality for our customers to take in. We design and deliver experiences that work across multiple devices and form-factors, so we need to meet the expectations of customers using desktop computers, laptops, and touch-enabled devices.

The dark theme illustrates the before, the lighter theme illustrates the after.
The dark theme illustrates the before, the light theme illustrates the after.

Consistency: learn once, use everywhere!

Consistency is one of the key pillars of the Azure user experience. We want to teach customers a small set of rules that they can use across multiple services.

Top-level headers from various Microsoft web experiences have aligned around a common pattern.
Whether you’re managing a VM, storage or web app resource, it’s a consistent structure so you always know where to find the information you need.

Accessibility: inclusive technology for everyone

We strive to create experiences that are accessible to everyone. We believe everyone can benefit from truly inclusive user experiences. Accessibility is a core part of our design principles and design language.

All screens, all resolutions

We cater to a global audience using all screen resolutions and qualities. Therefore, our design must accommodate that broad spectrum of resolution and display quality. This spectrum ranges from large top-of-the-line monitors to small screens and low-resolution projections.

Themes: make it your space

The Azure portal supports four different themes to accommodate different customer preferences. Before doing any work on the themes, we conducted a usage analysis and customer research to understand the usage rates and customer preference for each of our themes.

Final thoughts

We have just released these modern design updates and already started to collect great feedback from our customers and partners. We look forward to hearing your thoughts and hope you enjoy the updated experiences as much as we enjoyed building it for you!

--

--

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