Designing for Scale and Complexity
By: Microsoft Design
Tags: Design, User Experience, Fluent Design System, Microsoft, UX

Our team has just released modern design improvements to refresh the look and feel of the Microsoft Azure portal. These changes increase productivity, improve accessibility, and make better use of your valuable screen real estate. Some key changes include:

Hierarchical depth that draws focus to the right information at the right time

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

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

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

, 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

Since the Azure portal is a complex user experience that supports hundreds of different product scenarios across multiple personas, it was important for our team to maintain our existing interaction model. Our customers don’t need to relearn how to use the portal. We based these design improvements on the Fluent Design System principles to enhance consistency and brand alignment.

In this article, we reveal the improvements we made and the journey to get there.

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.

The new Azure design provides customers with a single experience model to manage hundreds of different services using a small set of interaction patterns that apply across the platform.

The team introduced a high-throughput iterative research process to provide a near-constant stream of research insights and feedback from customers. Our research methods included proactive and recurring usability testing and benchmarking, customer interviews, customer feedback analysis, and continuous analysis of customer behavior through usage telemetry. The design updates in this post stem from years of listening to our customers’ needs and seek to meet the evolving requirements of a fast-changing industry.

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.

We have incorporated depth in our design system to help our customers orient themselves in the system while emphasizing important parts of a workflow. The team created a set of rules around depth and how light affects the different layers of depth, resulting in semantics customers can unambiguously and consistently apply to a vast set of scenarios.

Depth contributes to better information architecture and more effective navigation of Azure.

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.

We updated the design for improved information density without regressing our multi-device and multi-form factor experience. In the image below, you can see these principles at work in our dashboard and left navigation bar. Although the scroll bar is no longer present in the left navigation, we are still touch friendly!

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

Changes to our navigation pane, header, and color story all contribute to our goal of removing distractions and increasing focus on the content that matters.

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.

We believe that this should not only apply to Azure but to all Microsoft products. In the image below, you can see headers of different products in Office 365. All of them share the same visual language and similar interaction elements. This approach was also leveraged for our developer tools on the Cloud + AI team.