B2B Platforms: Google, Amazon and Microsoft

Screen-by-Screen Teardown

May 2020, 2021

Claire Xu

Contents

3. APIs & Services

Google Cloud Platform

API Dashboard

Enable API

Amazon Web Services

API Home

Microsoft Azure

All Resources

Adding Resources

Summary

1. Intro & Site Architecture

Google Cloud Platform

Amazon Web Services

Microsoft Azure

​

2. Dashboard

Google Cloud Platform

Home

Hamburger Menu

Amazon Web Services

Home/Location Setting

Menu/Search

Microsoft Azure

Home View

Dashboard View

Summary

​

4. Billing

Google Cloud Platform

Billing Overview

Reports/Cost Breakdown

Budget/Pricing

Amazon Web Services

Home

Cost Explorer

Microsoft Azure

Overview/Invoices

Cost Analysis & Budget

Subscriptions/Charges

Summary

5. Monitoring

Google Cloud Platform

Overview

Monitoring Dashboard

Metrics Explorer

Alerting

Logging

Amazon Web Services

Log Groups

Metrics

Microsoft Azure

Activity Log

Metrics

Logs

Summary

​

6. Appendix

Scoring Chart [On a scale of 1-5, 1 = poor and 5 = good]

Main Teardown Focus

Intro & Site Architecture

Screen-by-Screen Teardown

The Google Cloud Platform (GCP) is a platform that delivers over 90 information technology services (aka products), which businesses, IT professionals, and developers can leverage to work more efficiently, gain more flexibility, and/or enable a strategic advantage.

Google Cloud Platform (GCP)

Link

Intro & Site Architecture

​

AWS (Amazon Web Services) is a comprehensive, evolving cloud computing platform provided by Amazon that includes a mixture of infrastructure as a service (IaaS), platform as a service (PaaS) and packaged software as a service (SaaS) offerings. AWS services can offer an organization tools such as compute power, database storage and content delivery services.

Amazon Web Services (AWS)

Intro & Site Architecture

​

Link

Microsoft Azure is a platform that enables users to engage in agile cloud computing, and is designed for creating and managing apps through Microsoft’s data centres. Platform can be used for services such as analytics, virtual computing, storage, networking, and much more. It can be used to replace or supplement on-premise servers.

Microsoft

Azure

Intro & Site Architecture

​

Link

Home

Screen-by-Screen Teardown

10

Header*

Navigation Section

Services (85%): Arranged in deck-of-cards order in columns of three. Most important/ideally frequently used services on top (Project info, APIs, Monitoring), some others have to scroll to access.

​

Cards can be dragged anywhere in any order between the columns. Edits can’t be undone.

​

Home/Customization

*Header includes Notification, Account, Setting & Utilities, Search, Menu, and Navigation.

Runs across all screens as secondary navigation tools.

Only card outlined in green.

An indication of “all services normal”?

Kebab menu on cards shows documentation of card service, or hide individual card

Google Cloud Platform

​

Home

​

Hamburger Menu

Global Menu: All services can be found in the hamburger menu. Including those not on dashboards. Very extensive menu.

​

​

Pin/Unpin: Similar to the dashboard customize concept, individual services can be “pinned” to the top.

​

�“Google Cloud Platform”, “Home” and “Dashboard” lead to the same page. A bit confusing

Hamburger menu and dashboard seems to be redundant?

(similar features)

Google Cloud Platform

​

Home

​

Home/Location Change

Amazon Web Services

​

Home

​

Home (85%): Arranged in hierarchical column order, main column shows three sections: AWS service, Build a solution, and getting started.

​

The AWS service shows recently visited services on top and all services in drop down menu. All services also accessible in header.

​

Location is accessed and changed on top right in header.

​

*Header includes Cloud Shell, Notifications, Account, Location, and Support.

Runs across all screens as secondary navigation tools.

Header/Navigation*

Preferences/Terms Section

Menu/Search

Amazon Web Services

​

Home

​

Menu: Service menu drops down and covers entire page, quite hard to find things at first glance.

​

Services can be pinned as favorites and appears on left side of menu.

​

Search: Search shows suggestions of services, features, etc.

Home View/Customization

Microsoft Azure

​

Home

​

Header*

Subheader Section

Home (85%): Home view shows services, recent resources, navigation and tools.

​

Color and menu can be customized (show menu by default or hidden)

​

​

*Header includes Cloud Shell, Directory, Notifications, Portal Settings, Help, Feedback and Account.

Runs across all screens as secondary navigation tools.

Dashboard View/Customization

Microsoft Azure

​

Home

​

Dashboard: Home view can also be changed to dashboard. New dashboards can be created, customized to show info.

​

Customization: Dragging parts to tiles grid is a feature also seen in google GCP.

Dashboard Summary

End-by-End Teardown

Home

​

1. Customization

All Dashboards have certain customizable features: overall concept is to make things more accessible, whether it’s data or frequently used services in a menu.

• Microsoft Azure allows for a lot of customization (from color to home/dashboard to customizable dashboard etc), not sure if this is really necessary?

​

1. Menu Length

Currently Azure has the simplest hamburger menu (doesn’t need scrolling when viewing in full screen). GCP has a really long hamburger menu, and AWS service menu is just too extensive to find anything. The search for AWS is way more useful.

​

1. Data / Directory

GCP home seems to be the simplest in terms of design, and it focuses on showing data/stats of the current project with the card deck. AWS home and Azure home are more focused on being a directory to other services.

​

1. Overall GCP still seems like the cleanest dashboard of all three.

APIs & Services

Screen-by-Screen Teardown

Overview API Data Info(42.5%): Shows information of APIs in graphs format. Timeframe is changeable on top right. Graphs are downloadable as CSV files.

APIs Dashboard Breakdown

Header (7.5%)*

API Page/Menu Title (7.5%)

Individual APIs Info (42.5%): Shows info of individual APIs. Filter is actually like a search function, except words entered become “tags” used to search for APIs. A bit unintuitive.

Menu for API related services. Can be hidden with button indicated on bottom left (very easy to ignore).

Google Cloud Platform

​

API & Services

​

API Details Page

API Brief Info & Buttons: Name, short info & icon of API. User can directly enable API or try API (jumps to reference page).

Header

Back Arrow

API Detailed Info: Shows overview, tutorials & documentation, terms & conditions, additional details, as well as 5 other suggested APIs.

Google Cloud Platform

​

API & Services

​

API Home

Amazon Web Services

​

API & Services

​

Header/Navigation

Preferences/Terms Section

Header: Describes API Gateway and what it does with a blurb description.

​

A bit of waste of space: not really useful after familiar with AWS?

Content: Showcases the APIs that AWS offers. AWS currently has 4 APIs listed.

All Resources

Microsoft Azure

​

API & Services

​

Header*

Subheader Section

Resources: Shows all resources subscribed. Clicking onto resources shows specific specs and settings/diagnostics.

​

Resources can be grouped together, and Azure has another page to show all the groups.

Names of resources are always visible. Quite convenient with this design.

Adding Resource

Microsoft Azure

​

API & Services

​

Add Resource: Resources can be added from the all resource page. Doesn’t show full marketplace unless you click see all (right next to Popular).

​

But marketspace is not really needed since they can be accessed/searched in the condensed tab?

​

Also no direct way in menu to access resource marketspace.

APIs & Services Summary

End-by-End Teardown

API & Services

​

1. API/Service Menu

Since AWS didn’t have lots of API options, a separate menu wasn’t needed. GCP and Azure has a library/marketplace with more API/resources.

​

1. Enabling API

GCP’s enabling API didn’t require any form-filling, whereas AWS and Azure required more information from the user.

​

1. API Details Page

Azure’s services shows a lot of information when clicked. GCP’s API info appears to be more simply designed after enabling.

​

1. Access to API Library

The method of adding features for Azure is also not as intuitive. Users can’t directly access the resource library.

​

1. Overall, GCP and AWS have cleaner designs, however AWS only has 4 API options.

Billing

Screen-by-Screen Teardown

Billing Overview

Google Cloud Platform

​

Billing overview: has two tabs: billing account overview and payment overview. The first shows the charges made by GCP, and the second shows the user’s own payment info (balances, transactions, etc).

​

Scrolling down shows Top projects and Top alerts, these including Cost trend can view reports.

Header

Overview Title Bar

Billing

​

Billing Reports/Cost Breakdown

Google Cloud Platform

​

Billing

​

​

Report has more detailed filters, and time can also be customized. Cost breakdown can only be viewed by month.

​

Both have reports that can be viewed and downloaded.

Budget/Pricing

Google Cloud Platform

​

Billing

​

Budget and pricing are both organized in list format. Pricing lists all the SKUs and prices for GCP services.

​

New budgets can be created, with reference to the cost trend report.(Refer to Appendix)

Billing Home/Payments

Amazon Web Services

​

Billing

​

This page shows month-to-date spend by service, spending summary, and top free tier list by usage.

​

The first two leads to cost explorer and bill page.

​

Budget needs furthur subscription to be used.

Cost Explorer

Amazon Web Services

​

Billing

​

Cost Explorer opens in another tab, appears to have similar function with billing homepage, but more detailed. The page also seems to be more organized.

​

Why are there two pages for billing rather than just one?

​

Budget tab is also repeated here.

Billing Overview/Invoices

Microsoft Azure

​

Billing

​

Azure billing home is arranged in cards layout, with summary info on each card.

​

Invoices provide more detailed information of the billing account per month.

Cost Analysis/Budget

Microsoft Azure

​

Billing

​

Cost analysis/budget has similar concept as GCP, except cost analysis is represented in different ways.

​

The graph of cost analysis can compare actual cost with budget cost.

​

Everything takes really long to load, despite there’s little information in my account.

Subscriptions

Microsoft Azure

​

Billing

​

Current subscriptions are listed. Clicking into them reveals detailed info and settings/preferences.

​

Recurring charges shows product purchased, has similar layout with subscriptions.

​

Billing Summary

End-by-End Teardown

Billing

​

1. AWS Billing Pages

AWS has two pages for billing/cost, but they seem to be quite redundant. Cost Explorer seems to be a better designed page for viewing cost information.

​

1. Overview Page

All three overview pages are similar: they show the current pending costs and a cost trend/history with graphs. Serve as a to-do list or quick checklist.

1. Cost Analysis

GCP and Azure both have similar concept for cost analysis, but just designed differently. GCP provided one simple graph and Azure provided varying graph/chart visuals.

​

1. Price lists

GCP and Azure both have a format of pricing list for their services or user’s subscriptions. Azure’s lists provide much more information when you click into individual services/subscriptions.

​

1. Overall, GCP and Azure have more preferable designs, but Azure seems to provide too much information for our purpose.

Monitoring

Screen-by-Screen Teardown

Monitoring Overview Breakdown

Deck of Cards: Similar to other overview pages, quite consistent design.

Header

Title & Controls Bar*

Metrics Scope: Shows metrics of projects currently monitored with this project, as well as a list of other projects currently measuring this project’s metrics.

​

Allows for multi-project management.

*Controls from left to right: Reset chart zoom, open dashboard settings, enter fullscreen mode, toggle auto-refresh of data (off/on), select time range + custom time ranges. (labels of control buttons will appear when hovering on them)

Google Cloud Platform

​

Monitoring

​

Monitoring Dashboard

Header

Title & Controls Bar

List & Filter/Search bar: Full list of dashboards. Filter/Search bar at the top of this section. Same system as APIs dashboard.

Recent: Shows 5 dashboards in a row of cards. In most recently modified order left to right.

Google Cloud Platform

​

Monitoring

​

Metrics

Google Cloud Platform

​

Monitoring

​

Side by side layout: Menu on the left, input in the center and output at the right. Any changes made in the input section will be visible on the right side in the output.

​

Quite convenient for users to go through things.

Alerting

Google Cloud Platform

​

Monitoring

​

Simple layout for alerting: summary numbers highlighted at the top, with detailed information at the bottom.

Logging

Google Cloud Platform

​

Monitoring

​

Logging vs Monitoring: Logging is important for monitoring, but in GCP logging is not under the monitoring menu. Instead it’s under operations.

​

Users have to find their way to logging, which can be quite inconvenient. .

Customization: Logs Explorer can be modified by closing certain functions (such as histogram, etc). .

Log Groups

Amazon Web Services

​

Monitoring

​

Amazon monitoring features are similar to GCP: but some services are more tailored to Amazon specifically, such as Lambda Insights etc.

​

One feature is the log groups, which is not see in the other two platforms.

Metrics

Amazon Web Services

​

Monitoring

​

Similar metrics concept as GCP, except AWS takes a top-down approach vs the left-right approach of GCP.

​

Different design decisions.

Activity Log/Alerts

Microsoft Azure

​

Monitoring

​

Activity log shows all the activities in detail. Documents every action made within the platform.

​

Alerts service is similar to the other two platforms.

Metrics

Microsoft Azure

​

Monitoring

​

Azure’s metrics places more emphasis on displaying the chart. Any inputs will have a half slide-in page from the right side.

​

Everything is in one section, whereas GCP/AWS clearly have 2 sections.

​

Less convenient for viewing+modifying with this design compared to GCP and AWS.

Logs

Microsoft Azure

​

Monitoring

​

Log for Azure seems to be much simpler than GCP log.

​

This has the option to open multiple tabs for different queries, not seen in other platforms.

Monitoring Summary

End-by-End Teardown

Monitoring

​

1. Common Services

Three platforms all have nearly identical core services, and thus monitoring is quite straightforward in terms of what services are needed.

​

1. Viewing + Modifying On Same Page

For pages such as metrics, all three dashboards took different design approaches to allow users to view and modify at the same time. In comparison, GCP and AWS designs work better than Azure’s.

1. GCP Log Placement

GCP’s log is put under operations and not directly accessible from Monitor. When users first created a project, monitor overview page had a welcome banner with direct links to log and trace, which shows that log is needed in the monitor process.

​

1. Overall, GCP and AWS seems to be the most referenceable in terms of design, but all three have similar services.

Overall Summary

Appendix

Screen-by-Screen Teardown

Header and Nav remain, besides the customize button.

Hidden Services: Hidden services appear (covered in gray shadow) in customize view, with an edit logo right below the gray toggle.

​

Card order can still be dragged and changed. Edits can’t be undone.

​

​

Show/Unshow Cards: The toggle on the top right of each card controls which services are shown on dashboard.

​

Customization View

Gray shadow seems to go out of card boundary?

Billing service is hidden by default.

Google Cloud Platform

​

Home

​

API Library

Banner & Search Bar: Search for APIs with keywords. This section disappears when scrolling down.

Header

Page Title

API Decks: Shows first 5 APIs in the deck as cards in a single row. 9 decks in total. Deck names are included as categories.

API dashboard menu disappears, replaced by library filter/category list

Google Cloud Platform

​

API & Services

​

API Deck in Library

Header

Deck Title & Search Bar

APIs: Shows all APIs in this deck in a grid of nx5 in alphabetical order.

The deck title & search bar stays while scrolling down.

All categories/filters disappear after clicking into deck, only the category with identical deck name stays. Removing this category goes back to the library page.

Google Cloud Platform

​

API & Services

​

Customize Dashboards

Microsoft Azure

Home

​

Changing Views/Color

Microsoft Azure

​

Home

​

Creating Resource

Microsoft Azure

​

API & Services

​

Import APIs

Amazon Web Services

​

API & Services

​

Build APIs

Amazon Web Services

​

API & Services

​

Custom Domain Name

Amazon Web Services

​

API & Services

​

Create Budget

Amazon Web Services

​

Billing

​

Cost Explorer

Amazon Web Services

​

Billing

​

Budgets & Budget Reports

Amazon Web Services

​

Billing

​

Cost Categories

Amazon Web Services

​

Billing

​

Bills

Amazon Web Services

​

Billing

​

Access Control

Microsoft Azure

​

Billing

​

Product Charges (Recurring)

End-by-End Teardown, Microsoft Azure

​

Billing

​

Metric Scope

Multiple projects monitoring: Menu pops up from right, shows info of other projects monitored by current project, and a list of other projects that are monitoring current project.

Accessed by clicking this.

End-by-End Teardown, Google Cloud Platform

​

Monitoring

​

Create Dashboard

End-by-End Teardown, Google Cloud Platform

​

Monitoring

​

Logging

End-by-End Teardown, Google Cloud Platform

​

Monitoring

​

Adding Widgets to Dashboard

End-by-End Teardown, Amazon Web Services

​

Monitoring

​

Overview Breakdown

End-by-End Teardown, Amazon Web Services

​

Monitoring

​

Dashboards

End-by-End Teardown, Amazon Web Services

​

Monitoring

​

Alarms

End-by-End Teardown, Amazon Web Services

​

Monitoring

​

Service Cover Page

End-by-End Teardown, Amazon Web Services

​

Monitoring

​

Monitor Overview

End-by-End Teardown, Microsoft Azure

​

Monitoring

​

Workbooks

Microsoft Azure

​

Monitoring

​