Savings
· Kubecost, an IBM Company ·
SaaS · UI · UX · Product Management
Overview
Savings give users a homepage to view their savings potential across different pages and savings types. Users can use this page to quickly view areas in which they can save on their cloud costs. They are able to navigate to different pages where they can adjust their usage accordingly to reach the estimated savings provided to them from the overview page.
Kubecost’s first priority is to provide users a means to monitor and manage savings. Due to this, the software consists of a variety of pages that are targeted to different areas of savings. To give users an easier experience identifying savings, we took these pages and gave them their own environment for quick access. The savings across multiple pages are then added up to quickly show users their total estimated monthly savings available.
UX
Designs: Savings Hub
The Savings hub gives users a quick look at all the information needed to identify where to start to begin saving money on cloud costs across their environment. Users can filter and sort this information by cluster, active or inactive insights and production type.
The first and most prominent section displays a high level of savings the user is currently experiencing as well as savings they can further realize across all insights.
UX
Design: Insights
Insights are displayed as cards. They title the insight, give a brief description of its purpose, display the insight type ie. Cloud or Kubernetes as well showcasing how much the user can save for this insight if they reduce spend.
Each Insights card will take users to that insights main page. From there, users can adjust their spend and realize savings according to the parameters of the insight type.
As an example, we’ll take a look at Right-Sizing Container Requests below;
Upon entering the page, users are greeted with the estimated monthly savings they can achieve by making adjustments to their spend here. They are able to filter their controllers by type, maximum usage, efficiency etc. Looking at the table, a visual graph bar is presented to give users a graphical display of their usage and spend. When a row is clicked, users can see a breakdown of what this controller is using, how much and what we recommend they use to save on their cost spend.
Additionally, users can select [Setup auto recommendations] from the top button row, which will give the API access to automate savings based on the systems recommendations for this specific user and how they use RAM and CPU. This is based on gathering data from the users previous activity within these controllers.
UX
Understanding How to Apply Savings
How a user implements savings varies for each insight. Each page is designed to best fit the insight at hand. How the information is conveyed may be via graphs, tables, or charts. In some cases we are able to allow automation on this process, in other scenarios we guide users by showing them the savings, how to access them along with detailed documentation if needed.
Examples of other savings insights pages;
(all shown pages were developed and designed by me)
Fin
Savings Contributions to the Software and Users
Savings remains users favorite page as it groups all savings features into one overview. In addition, users can view in real-time how much they are saving and how much they can save by adjusting their spend. From a working perspective, users no long have to search through the app to find highly sought after savings features as they are all easily accessible through the Savings homepage.
Thank You for Reading
Thank you so much for taking the time to read this case study. As always, feedback is encouraged and welcomed with open arms! If you would like to read other case studies like this one, click here.