Visual Design
Azure Pricing calculator
The Infrastructure as a Service (Iaas) competitive landscape shows the cloud market share between AWS and Microsoft closing. A key decision for customers when selecting an IaaS provider is the operational cost to run their cloud products and services, taking stock of many dimensions such as availability, backup and logging. As such, the Azure pricing calculator is an important tool for both new and existing Azure customers, allowing customers to quickly estimate and understand their operating costs. The calculator aims to simplify the complexity in pricing by providing accurate costings and dependencies between offerings
Company/
Microsoft
​
Role /
Visual Designer
​
Year /
2017
0.1 Analysis and Preparation
Cloud solutions consists of many remotely managed resources, such as the raw machines (e.g. Azure virtual machines), or software technologies & services, such as databases and load balancing. We call these cloud products.
​
The Pricing Calculator is my first project as a visual designer for the Azure team. I spent a lot of time analyzing the current Azure pricing calculator because I want the new design to not just be a better looking version of the current website but to improve the user’s experience and allow easy addition of future features.
0.2 Strategy
Stakeholder Workshop
Competitor Analysis
User feedback
Expert Discussion
The first step was to get the stakeholders together to understand their needs and requirements. After many meetings we developed on a strategy and what resources we need to allocate.
At the same time we also talked to users and looked through the feedback that we received in the past. We separated our users into two groups - normal and enterprise users. Normal users usually spend less time on the calculator and just use it to quickly view a product price. Some do spend do longer, for example, a business owner trying to figure out how much it would cost to run their e-commerce platform on Azure. Enterprise users (mostly sales) usually have the calculator open all day. They use the calculator to build the quote for the customer. They require more advance features such as save and invite.
PERSONAS
"I use the pricing calculator very often but usually just for a quick price check for a particular product."
"I usually have the calculator open all day long. I use it extensively to build the quote for my customer."
Thomas Steel
Software Engineer
Regular User
​
Sara Lee
Sale
Enterprise User
​
From there we moved on to the competitor review where we looked at similar offerings from competitor's (e.g. AWS and Google cloud). We started by asking questions like how well does their calculator work, do people like it and what do people dislike. We looked hard for something that we could capitalize on, something that we can solve so we can get an advantage over the competitors.
Uses categories to divide products but not enough as the limited number of categories vs the large number of products means there is a lot of scrolling. If you add a product and wish to edit it, you have to go find the category it belongs to, which is very difficult… there is no shopping basket like way to find all the items added. It does allow users to export quotes to PDF. Finally, it is very slow to load.
Dated interface. Tab based. Information hiding/occlusion. Non-intuitive. Fails accessibility (light colours on light colours). Clunky. Managing lots of products becomes effortful. You can save and share estimates.
Looks OK. Uses Material UI. Buggy. Estimates disappear when edited. Keeps scrolling when you add/remove estimates (using google chrome). Locating products is search scrolling horizontal through a list (no categories). Bad information architecture
Calculator is nice. Simple, modern, intuitive. A bit simplistic with estimates. One you add products, hard to then modify. Again, when you add lots of products, becomes effortful. When you add more than 6 products, you can not see your most recently added products in the product list viewer (list cannot scroll).
The last step was to discuss all the key features with site owner and an engineering team. This is a very important step since we need to check whether we have enough resources and review if our goal is still realistic.
PROCESS SUMMARY
New features
Release the first preview before Microsoft Build 2017​​
Time Line
Goals
May 10, 2017
0.3 Wireframe
1
3
5
2
4
6
7
8
The main goal of the new calculator is to appear simple and easy to use and work on both mobile and desktop platforms.
Here is a quick wireframe explaining the elements of the calculator.
1
Tab allows us to add more features to the calculator
2
Search box
3
Displaying products in tile style allow us to display more products on the screen
4
Reuse Azure design pattern for product menu
5
Expand and collapse features
6
User can also click on the product name to expand and collapse the module
7
Discount and markup section only appears if the enterprise user is logged in
8
Other tools
0.4 Design details
Colour and typography
Segoe UI Light
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 1 2 3 4 5 6 7 8 9
Segoe UI Semibold
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 1 2 3 4 5 6 7 8 9
#0072C6
#F4F4F4
#333333
Graphics
Iconography
Invite Share Save Export Clone Delete
Modular approach
The pricing calculator is one of the most complex features on Azure site, both technically and design wise. The price of each product calculates in different way with their unique dependencies, therefore each product needs their own design, which is achieved through a modular approach.
​
See below for the example of product modules.
0.5 Hi-fi
First trial experience
This will also be the default view if nothing is selected. The guiding instruction will disappear once user selects a product
This is the view that will be visible most of the time.
Product picker
Search experience
Once users start typing in the search bar, the product menu will disappear.
Solution tab allows user to select product packages by Microsoft
Solution tab
Templates tab
Templates tab allows user to select product packages by community
My Estimate
'My Estimate' tab will only be available for enterprise users. Allows user to (re)open the saved estimate
Dialog box
Dialog boxes are used to get user confirmation
This design is still being today.
0.6 Extra Findings
1.05%
89.91%
9.04%
Device Type
Pricing Calculator
Azure.com
Difference
Desktop
89.91%
84.64%
6%
Mobile
9.04%
13.6%
-34%
Tablet
1.05%
1.71%
-38%
The data above was collected over a 3 month by our analytics team. You can see that not many users reach Azure.com through mobile or tablet devices and even less for the Azure calculator.
​
Although unifying the code base is a stakeholder requirement, unifying the code base constrains the experience. While it’s desirable to have a unified codebase, and hence unified experience across all endpoints, we should not let less-capable endpoints constrain the more capable when the data shows the more capable desktop endpoint accounts for the vast majority of usage (90%).
0.7 The new approach
Hence after analysing the data, I created another design for the situation where we support separate interfaces for different devices.
Sticky tool bar
Sticky menu for products, solutions and templates
Azure navigator bar disappears when scrolling down
Recommended products
Re-arrangeable
Hover to see product picker in action
0.7 Demonstration
0.8 Closing remarks
BARRIERS TO IAAS ADOTION
Concern about ability to secure application deployed on IaaS
Concern about Security of the IaaS platform
Difficult to integrate with on-premises infrastructure
Difficult to provide evidence of cost savings
Inability to store data in jurisdiction to comply with data privacy laws
Lack of standards and interoperability between IaaS providers
Usage-driven pricing less attractive than cap ex
40.5%
32.8%
29.2%
37.9%
29.7%
19.5%
62.1%
Finally, a recent survey[1] of corporations found that one of the biggest barriers to IaaS adoption was the difficulty in providing evidence that switching to IaaS solutions resulted in costs savings. I hope that if we focus on the user experience, making the calculator intuitive and understandable, then we can help mitigate this issue corporations face.
The calculator page is one of the most visited page on azure.microsoft.com.
See the calculator in real life: