Staying in the Green
Designed a core product feature to help admins and developers better track and manage their cloud costs
Cisco Cloud Platform & Solutions Group
Kasturi Dani, Senior UX Designer & Kevin Kuo, Creative Director
Sketch, d3.js, rawgraphs.io, Principle
6 months until 1st release
IT admins and developers struggle to keep track of cloud spend across services, frequently going over budget and asking for more funds from the Finance department.
Established the end to end experience for cloud cost budgets, including budget creation, reports and notifications.
Research: Interviewing & Think Alouds
Data Visualization Prototyping
Cisco CloudCenter Suite is a hybrid multicloud management platform.
I was one of two designers working on Cost Optimizer, a module within the Suite that provided users with insights into how much they were spending on cloud services. I led the end-to-end design for a core feature, budgets.
It’s common for organizations to deploy their apps on all public cloud providers - AWS, Azure and Google Cloud, as well as their own private clouds.
There’s a need to have a one-stop shop where costs are aggregated, and IT departments can see all the cloud resources they’re using, including costs incurred.
Current solutions are difficult to use and it's not easy to get the information users are looking for.
Dave is in charge of setting up Cost Optimizer for the organization and manages company-wide resources and costs.
Deepika manages a team of developers and manages cloud spend within her team. She constantly needs to keep track of any unneeded cloud services in use, tracking spending and usually goes over budget. She writes scripts to clean up running but unused instances.
Dominic is a developer that just wants to get cracking with making apps. He'll spin up an AWS instance with little regard to the cost over time.
Susannah sets the budget for departments in her organization, tracking costs at a high level for each department. She makes particular note of overspending as well as underspending departments, allocating funds accordingly.
Rows that should be reviewed are highlighted in orange (alert state) based on forecast, or red (over budget).
Expandable hierarchy allows the user to see a high level overview but also drill down to view subgroup details.
Summary visualization (also called a bullet chart) includes total forecasted cost for the budget period, alongside spend to date and budget allocated.
‘Today’ indicator: A marker indicating where the user is in the fiscal quarter/year to help provide context for budget utilization, and inform the urgency of action needed to be taken.
BUDGETS BY CLOUD, UNDERSPENDERS & OVERSPENDERS
Department hierarchy is collapsible/expandable.
Users can easily navigate through the structure and allocate a budget to any node.
Reference information provided about historical cost per node as a reference for determining an appropriate budget amount.
‘Smart’ allocation: auto-sums parent nodes to show if budget is allocated to a child node within; communicates status to the user if numbers don’t add up, or if there is an unallocated amount remaining.
BULLET CHART ITERATIONS
SKETCHES & WIREFRAMES
LOW FIDELITY MOCKUPS