Cost Optimization Billing Widgets

Context

As an integral part to LM's new product of Cost Optimization which focuses on enabling ITOps and FinOps to monitor their cloud costs and saving costs by optimizing cloud infrastructure deployment, Billing widgets allow users to visualize their cloud costs and drill down for deeper analysis. With a capacity of mirroring anomaly usage of cloud infra resources, Billing is also integral to a comprehensive cloud infra solution. Together with other health datapoint metrics, statuses and alerts, it completes a dashboard to provide powerful oversight on the cloud health of this company.

To fulfill this obligation, the team builds Billing widgets. Innovating from other types of widgets on LogicMonitor where each data visualization is a type of widget, and whereas users need to take multiple steps and complex configurations to complete data sourcing, Charlie (PM) and I decided to simplify the process by allowing users to choose multiple visualizations for the same set of Billing data.

Our goal is simple and aligned: make this painless, and make it powerful.

Impacts

After three months' work and close collaboration with front-end engineers, the designs are complete and shipped. In a word, it-

- Helps LM to close deals on Cost Optimization by 100K+.

- Was well received during customer calls -  “This is simpler and quicker than other metric widgets!”. The usability score is 5/5 in terms of success rate of completing tasks and subjective rating of easiness to complete the tasks.

- Has a scalable impact and builds foundation for other types of Billing visualizations.

Here is the story behind and the designs -

Use case mapping

We started with MVP visualizations using Dashboard original visualizations:

- Users need to know their costs from selected cloud resources that match a series of selected filters over a certain period of time.

- After users decided on the data of the costs, they could choose freely the visualization for the seelcted datasets.
‍
- Users need a way to directly show how much they have spent for cloud resources that match selected filters over this period of time. (Big Number)

- Users need to view the costs of different segments (Pie/donut charts, sunburst charts)

- Users need to view the change of costs on a time series with breakdown information (Column charts, stacked bar charts, stacked area charts)

On top of that, we will introduce interaction features to allow users to drill down and slice and dice their cloud costs:
‍
- Users will be able to predefine a sequence of group-by properties when configuring the widgets.

- Users will be able to highlight a key segment of the chart and drill down to analyze it by another group-by property.

- After the widgets are created, users should be able to flexibly change the time range or filters to visualize corresponding costs on Dashboard.

- Users will be able to select a segment and view them in other LM products like Resource Explorer - a platform for hybrid observability of on-prem and cloud resources with 2 clicks, or cloud explorer.

Building upon the foundational MVP features, I worked with the mission team on the following post MVP features:
‍
- Users will need a way to see how much their costs have changed compared to the same period of time in the last time frame. (Comparison over Time)

- Users will need to see the top runaway segments over a certain period of time (Top Movers)

In an ideal world, it should be a linear design process...

But it is not. There are a couple of interesting challenges I encoutnered during the process:

- Platform consistency and technical limitations.
- Fit into the ecosystem of Dashboard controls.
- New visualizations and drill down functions.
- Details and explanation to users why data are incomplete.

Delivery highlights

Select the data and visualizations intuitively

Different from traditional metric widgets that ask users to select a visualization as a widget and manually select datapoint from resources, the experience for Billing widget is more intuitive and simplified. Users may directly visualize the charts for selected costs data and use filters to scope the costs.

Taking creating a donut chart for the costs as an example- in the traditional widget creation experience, it takes at least 17 clicks. With billing widget, the clicks are reduced to 8 clicks. Users efforts are greatly reduced when creating multiple visualizations for the same segment of costs - a typical use case for observing cloud costs - in that they only need to copy an established widget and change the visualization.

View cost data

In addition to the overall costs, users will also be able to view the costs of individual segment. To keep a clean visual and hierarchy, users will be able to view cost data when hovering on a segment and views its costs.

Drill down to break down a cost spike and find out causes

In addition to work as a dashboard to view the total costs, users will also be able to focus on a cost from resources of users' attention, and further break it down with diagrams. Observing together with other infrastructure metrics, users will also be aware of the cost spikes and infrastructure issues correlated.
Meanwhile, to help users have a comprehensive inspection over the whole dashboard and other infra metrics, we introduce more on-graph interaction to allow the application of a focused filter on the dashboard level with 2 clicks.

Speed up finding up cloud cost spikes with post-MVP widgets

In addition to Big Number, Donut, Sunburst, Column and Line Charts to display the time-series costs or cost segments, we introduce the types of visualizations that allow users to identify the increments and top movers across selected time ranges. It helps users to capture the infrastructure with drastic and unexpected changes in costs, and identify billing anomalies or corresponding infrastructure issues immediately.

More stories behind!

Get in touch for more details 📭