Overview

For any given user, their cloud and Kubernetes environment can consist of thousands of nodes, pods and other sources. Navigating these items for maintenance or to best identify savings can be tedious. To eliminate endless table pagination, I designed a network infrastructure that lets users visually see items that are of interest, require attention or could yield high savings.

UX

Understanding Advanced Networking

To make this feature as easy and useful to users as possible, I took their main concerns and simplified them. The most common issue was sifting through “parent” sources on a table to locate a specific “child” item. With this view, users can select a pod or other source, this will then populate all of its associated sources. With this method, users are not bombarded with thousands of sources but are in fact, only seeing ones related to the item they selected.

Users are able to toggle the sources details on and off. This way, we can free up more space for navigating the network infrastructure while still offering important information.

Sources are identified on the Networks page by iconography, its name (truncated if needed), and color. For this component, color plays a big part in helping the users to scan and identify items of interest. More of this is explained in the following image.

UX

Design: Insights

Color identification and accessibility was most important here. The colors used to identify source items were chosen intentionally according to the design system, color consistency throughout the software and WCAG standards.

Most commonly seen here are pods, as such it is identified with Kubecost’s primary green. “Other” items are seen most after pods are are identified with our secondary color in primary blue. Lastly, internal and external items are least commonly seen and are selected from accent colors within the design system.

These colors are chosen as they work well together and reduce eye fatigue from users studying this dynamic chart for prolonged periods of time.

UX

Understanding the Details View

In addition to the previously explained color key, details display to users the total cost of the selected item, its number of nodes and how many items are connected to it. From here, users can see both their total egress and ingress for each item at a glance.

Fin

Driving the Design

Networks is simple in its presentation, which is exactly what makes a good design, good. Behind the scenes, the major challenge was how do we take thousands of pods, nodes and other sources and visually showcase this to users in a way that not only makes sense, but is an ease to use. They key here was to take this information, find its connections and guide users down a network path according to the source the selected.

Additionally, the question “what is the best way for users to experience this view?” was instrumental in constructing an experience that allows users to both visually scan to find items of interest as well as to dive in deep to get a more in-depth understanding of the source they’re viewing and its savings potential.

The end result was the high powered feature we now have, Networks. It continues to be a great way for users to visually see how their items are behaving and how they can best manage it to both save on spend while also reducing usage.