UI DESIGN

Azure UI Concepts to define Microsoft Fluent for Enterprise

Goals. The key driver of this project was to exude the next wave of Microsoft Enterprise Software. The current landscape of enterprise software is pretty hopeless in terms of visual design. The team involved in this effort was trying to answer this question: "How can we make the enterprise UI exiciting?" My goal was to help redesign the enterprise UI space by creating some visual concept for Azure to help define the basic building blocks of a new design language based on Fluent (Microsoft most recent Design Language) that was suitable for high density and high complexity desktop and web based applications. I designed my concepts starting from the existing Fluent Design Principles used to build Microsoft consumer products.

My Role. I was one of 10 designers selected among 334 designers to take part to a one week workshop that started with a brainstorming excercise where I worked with stakeholders from all parts of the Enterprise Division from GPMS to Directors and Studio Chiefs, down to content folks, researchers and designers. 

Challenges. Across the Microsoft Cloud & Enterprise division the main person in our user model that we build our product for are IT Pros, who typically use light themes and Developers who traditionally prefer dark themes. The most difficult challenge was to create a modern visual language suitable to display dense information in light and dark themes.

 

 

Current state of the Azure Portal. Here is how Azure looks today. As you can see, the UI is visually not engaging.

azure_apps_overview

Fluent Design Principles


Light
 as a way of drawing our attention. It's warm and inviting, it's fluid and purpouseful.
Depth Think about the frame that contains your information. Now break it apart, and reinvent how things relate to each other within a more layered, physical environment.
Motion seamless transitions keep you focused on the story, and bring experiences to life.
Material Responsible for the physical aspect of elements in the interface.

Azure UI Concepts
In this design explorations I used light and dark backgrounds and big font sizes to draw the user's eye to the most important information on the screen. I used bright colors coupled with transparency to display the graphs in an engaging way. Other designers on the team were responsible to define the UI of the left navigation while I focused on the central area.

02
01

Outcome
 My visual design explorations were very well received by the stakeholders and I was one of 6 designers selected to continue this project forward into FY18. I am sure you will see some of this work coming out in 2019.