Overview

Organizations utilizing Kubecost are able to monitor costs in accordance with each domain. This remains an effective feature, however there was a need to give users the ability to group these costs and view them according to their relativity. As a user I could view all costs pertaining to a specific department or team within my organization. This would allow users to manage and track costs throughout the infrastructure with more ease. In doing this, we would further leverage how organizations with various teams utilize Kubernetes and cost monitoring with Kubecost. In addition, this improves upon Kubecost’s efforts to provide seamless scalability to dynamic organizations.

Product

Product Management

Cost Centers presented a lot of unknowns. How are we defining a Cost Center? What happens in the case of overlapping domains? How can we simplify this to make the Cost Center creation easy for users to operate?

With features that present very dynamic scenarios, it is always best to ensure the entire team is align on project objectives and its intended outcome. To ensure this, I established a set of workshops with our Product Manager and Frontend Engineer to hash out the requirements and user needs. Working by means of virtual workshops allowed us the opportunity to hear each perspective; design, product and engineering, in real time and thus tackle obstacles more efficiently. These meetings would continue throughout the duration of the design lifecycle to ensure the feature met its requirements and was ready to demo at the upcoming Kubecon convention.

UX

Developing the User Experience

Once our requirements and the users needs were identified, I proceeded by establishing a living document that represented the desired user experience, pages and behaviors needed and their priority levels. This document continued to be our bases for scope and was used internally for transparency into the project and a way to monitor its progress.

UX

Design Iteration: Dashboard

Once the outline was in place, I got started mocking out layouts for the intended user flow. I went through two iterations for the Cost Centers dashboard before finalizing its layout.

This view displayed the Cost Center’s name, its total cost and edit/delete icon, however it did not provide a lot of overview information that would be beneficial on glance.

Remedying this issue, I incorporated the Cost Centers over time costs via a displayed graph. This would prove more useful to users viewing on CCs on glance, however there’s still room to improve here.

UX

Final Dashboard Design

The final design for the dashboard extended the functionality of the second design, giving users the ability to see the Cost Center’s name, view its total cost, manipulate it via edit/delete, and see cost over time through a larger time window.

Clicking on a Cost Center directed users to that specific Cost Center’s inspect page. Here, users are able to dive deeper into the allocated costs, customize what costs are show, added/removed from the group or rename the Cost Center.

Additionally, clicking on an allocated row to the left would direct users to its parent page in Allocations to inspect a cost individually and more dynamically.

UX

Design Iteration: Creation Modal

Various user flows were possible for the creation modal’s design and experience. I explored step by step wizarding options, however found it overcomplicated a process that could be simplified. The wizarding process would also eliminate the users ability to see cost as it's added, which would add more visibility to the user while creating a Cost Center.

UX

Final Creation: Modal Design

In both previous iterations, I identified important pros. With the wizard, we are able to guide the user through the process. With an onboarding experience, users retain a larger picture of what’s happening and how it’s happening. With this in mind, I was able to integrate useful functions from both iterations into an experience that best met requirements and how our users with interacting with this creation modal.

Users are now able to name their Cost Center, select a cost group by Kubernetes, Cloud or dynamic to get started.

Groups showcase all Kubernetes or Cloud costs by default. Users are able to add these costs as is or filter for a customized perspective.

Once an aggregation is selected, the following costs populated are held to that rule. The selected aggregation is then surfaces in the aggregation button.

To aid users, I provided them with the ability to aggregate these cost by single or multi-aggregation.

Users also are able to filter the selected aggregation by [filter] “is, is not, contains, does not contain, etc” (value). By including this functionality, users are able to filter down to the most specific cost sets.

Dynamic groups follow a similar experience, however users do not filter here. Instead they are able to breakdown costs by “Product”, “Account”, “Service”, or custom data mapping.

Prototype

Click the play button below to watch an interactive prototype for Cost Centers. If you’d like to experience this prototype for yourself, expand the interactive prototype below the video.

Fin

Measuring Success: What happened next?

Cost Centers was launched with a live demo at Kubecon where it was well received. We were able to gather live feedback and suggestions from users that was later implemented in following versions. Cost Centers have transformed into Collections and continues to be our most valuable feature for users and how they monitor spend. We continue to iterate and improve Collections (formaly Cost Centers) to employ a mindset of growth to best cater to our users.