Microsoft Azure

An open, flexible, enterprise-grade cloud computing platform. 

Microsoft Azure

An open, flexible, enterprise-grade cloud computing platform. 

et|arrow_carrot-down|3

The Microsoft Azure Product

Microsoft Azure is a powerful and growing collection of integrated cloud services—AI cognitive services, service analytics, computing, database, mobile, networking, and storage tools that empowers IT pros and developers to build and manage a multitude of apps and services using the technologies they already know and love.

Learn more at MicrosoftAzure.com
For context and history take a look at Azure on Wikipedia

%

of Fortune 500 companies trust their business on the Microsoft cloud

new Azure customer subscriptions per month

b3lineicon|b3icon-magic-wand||Magic Wand
Led visual design (Design Tsar)

Created structural design framework, components, and guidelines

b3lineicon|b3icon-responsive-design||Responsive Design
Product design

Designed features and MS product integrations

b3lineicon|b3icon-head-idea||Head Idea
Patents

Awarded 21 software and design patents while working on Microsoft Azure

Early days

I was first invited to join the Azure UX team to assist in a full redesign of the rapidly complexifying Developer Portal.

Partnered with PM and engineering counterparts to extended the new design concepts, build out new features, and vastly improve entry and inline education flows and experience.

During the redesign, I created Day 0 – Day 100 experiences and assisted setup, notifications, create new flows, charting tools, and many more features. I also created icons and handled all production assets / wire frames and dev support while contributing design on the marketing website and documentation portal.

Early days

I was first invited to join the Azure the UX team to assist the full redesign of the quickly antiquating Developer Portal.

I dove in and collaborated with design, PM, and Dev to extended the new design concepts, build out new features, and vastly improve entry and inline education flows and experience.

During the redesign, I created Day 0 – Day 100 experiences and assisted setup, notifications, create new flows, charting tools, and many more features. I also created icons and handled all production assets / wire frames and dev support while contributing design on the marketing website and documentation portal.

The birth of the new Microsoft Azure

By 2012 it was clear that Microsoft Azure was one of the fastest growing products within Microsoft. The Developer Portal needed to be dramatically re-envisioned to handle company wide product integrations, provide rich analytical views of cloud ops, and much much more.

The goal of this ambitious re-envisioning was to create a flexible product that could unify Microsoft’s professional tools (Visual Studio, System Center, SQL, etc) and Azure service assets into a single cohesive experience ecosystem.

It was time for the team to put on their future hats.

Design explorations

While a core architect worked on the sub-structure of the new portal, all team members who could grok the massive project were invited to share their extensions to and iterations upon the vision.

(above) Research into existing ecosystem data visualizations informed my recommendations.

(right) Data visualization experimentation to suit available data informed common shared controls and service status visualizations.

History

While a core architect worked on the sub-structure of the new portal, all team members who could grok the massive project were invited to share their vision.

 Research into existing ecosystem data visualizations informed my recommendations.

 

HAXOR DARKLY

I won the design team competition to become the visual product lead by utilizing my agency experience to create a ‘branding’ pitch focused on our ops clients.

Leveraging my former branding experiences, I pitched a mood bard + some aspirational UI components. This evoked team excitement by showcasing our IT/Tech forward product in a ‘cool’ experiential light tailored to our core users’ interests and aesthetics.

Inspiration from hacker culture, SCI-FI HUD design, and music production tools.

Evolving my initial inspiration into data viz and style explorations

Leveraging my experience working on charting in the previous re-design, I explored ways to create more depth by combining complimentary signals into richer displays that captured the HUD / Hacker feel for operational dashboards.

Smooth Dark

The outcome of this exploration was a beautiful dark theme design that is still available in the portal today. The team was so inspired by this design that it has been referenced again and again in various MS products.

From dark to light

I expanded the haxor dark theme into a light version with a clean enterprise feel. 

Evolving content

The modular components function as self contained data visualization systems that evolve with user context. They can start with welcome and directed education content, evolve into product up-sell teasers, then fill out into full charting displays with actionable error notifications, or expand into file structures and mini coding environments. 

Depth

As a new user explores the portal they quickly learn that everything is clickable. Components and line items within components will spawn a “blade” with deeper information about that item. Additional clicks lead to further contextual depth. The blade concept allows for a visible and reversible path through the content as the user engages that can be saved and shared.

Composability 

Components were designed to be generic and flexible enough to handle a variety of content and work in many contexts. This composability allowed the design team to combine them to build out new patterns within the portal. Once designed each blade, component within a blade, or entire journey path could be pinned and resized by the end user to build out a highly customized personal dashboard or shared ops display. 

Components & Controls

I created the design system of components and controls, and partnered with engeering to establish a process keeping design elements in sync with prototype elements as the teams both iterated. Each tile type was designed with content density and display for up to 7 different sizes.

    Brand in motion

    I created a range of artifacts to extend the Azure brand. Above is an example of an animated loader that is still used on Azure hosted videos.

    Creating a design system

    The challenge was to create a design system that would function as a fully composable data visualization while feeling timeless and trustworthy.

    The system needed to be unified and consistent while including enough novelty and delight to make complex information hierarchically scan-able. It also needed to be scale-able for the many products and services that would be building their experiences for integration within the Portal.

    Overall typography, design, layout, and consistency

    Created visual layout and design system. Typography, spacing, graph styles, color accessibility, and responsive styling.

    User control

    I designed the method below for easily arranging and resizing the tile components into personalized data displays. This method needed to work within the constraints of the current code implementation which only allowed for discrete selection of desired size. 

    Azure integrations

    Once the cohesive design system was finalized, I focused on integrating some of the many Microsoft products and services into the portal. This was an educational outreach effort I helped lead in partnership with the Azure PM team to guide MS product teams through the design translation process between their product itself and their product’s features expressed within the Azure Portal.

    The below example is the experience I created for Team Foundation Server

    The bladed UI paradigm creates a connection path through the content. Every item is clickable and spawns a new blade. I utilized this path based language to create a rich code wrangling experience for Team Foundation Server (think GitHub++) for viewing branches, repos, commits, with a drill down into code and code comparison.

    Final code ships!

    With much joy and celebration the New Microsoft Azure Developer Portal was released to General Availability (GA) in December of 2015.

    At the time of GA release in 2015:
    2.5 billion monthly requests
    22 million blades opened monthly
    Fast growing marketplace with more than 3500 items
    Support for 18 languages
    Available in 20 geographies
    More than 1800 blades across +75 experiences

    The face of a product

    First impressions lead experience.

    For the initial Azure product and brand experience, a majority of users will begin researching the product at the Azure Marketing page. Throughout my tenure on the Azure UX team I contributed design revs on the marketing site to integrate new branding and increased free trial conversions. I also contributed design to the documentation organization and display.

    Reflection on the project

    Many talented team members dedicated huge amounts of brain power and raw effort to create this massive experience. The research team, engineers, Program Managers, content team, UX & envisioning architects, and many more coordinated to create one of the most expansive and scalable customer facing products in the industry.

    The new portal experience initially received mixed reviews. Many users were simply overwhelmed with such a vastly different experience from traditional hosting management legacy backend paradigms.

    As the years go by, I continue to listen for feedback from developers and the consensus has slowly changed from initial shock at the change, to “it really outperforms AWS”, and “there is noting else out there as powerful and customizable.” Generally the more time users spend in the portal the more they like it, and ops users love it.

     

    Azure how you have grown…

    Today this same portal provides access to more than 3,000 services delivered by Microsoft and it’s partners as well as detailed billing views and custom cloud scaling infrastructures. 

    Microsoft hasn’t disclosed how much revenue Azure brings in, but the Evercore analysts estimated that it generated more $7.74 billion in the 2018 fiscal year. At that size, Azure would have accounted for 7 percent of Microsoft’s total annual revenue. 

    %

    Of Microsoft's annual revenue and growing

    "Dina is one of those rare individuals that is sickeningly good at all these things."

     

    “Dina and I worked together on two projects. The first was a redesign of the Windows Azure management experience, this was followed by a more ambitious and broader reaching project whose goal was to unify Microsoft’s professional tools (Visual Studio, System Center, SQL, etc) and Azure service assets into a single cohesive experience ecosystem.

    To be a great designer you no doubt need a mastery over your tools and a technical understanding of the craft, but moreover you need a fantastic eye and a deep desire to do great work. Dina is one of those rare individuals that is sickeningly good at all these things. Beyond her raw talent and practiced skill-set, she’s also a great person and brings a fantastic energy to any design team she is on.”

    Stephen Danton

    Principal User Experience Designer
    @ Microsoft

    "Working with Dina is a complete pleasure and a privilege."

     

    “Working with Dina is a complete pleasure and a privilege. Her designs always exceed expectations and her enthusiasm for high-level work is extremely inspiring. Her design approach is current with latest design best practice. She is always focused on the best user experience and often impressed both the team and the client when explaining the business justification behind her design decisions. She is great at managing her time and working quickly and cleanly.

    Her role is far beyond being an extremely talented designer; she is a catalyst of the team spirit. One of Dina’s many talents is to develop an amazing fun and creative culture around her. She is a main generator of team events and activities which always have a wide variety for creative self expression.”

    Marina McDonagh

    Senior UX Design Manager
    @ Microsoft