Enhancing clarity on the Billing Observability Dashboard

The Challenge

Users found it difficult to keep track of how many basic or developer credits they had in their account and where they were spending their credits.

Pain Points 💢

  • Nowhere in the UI to view billing information
  • Lack of self-service capability for purchasing Capella credits

The Solution

Extended the UI to provide the user (with the necessary RBAC role to view billing information) with the ability to monitor their expenditure, see visualisations of credit utilisation in filterable charts and graphs, and being able to filter by service e.g. backups etc., and be able to purchase credits through the UI rather than having to contact Couchbase Sales or via AWS Marketplace.

So, how would the feature work?

Users would be able to view their credit usage and purchase credits through the Capella UI 24/7 without having to contact the Sales team. They would have the ability to filter the graph views by dates and usage type to gain a better overview of credit expenditure at a glance.

What design changes were needed?

  • Modifying the layout of the main navigation to include billing as a top level item
  • Creating new design components for multiple graph and chart types

The Outcome

Improved user experience and visibility of billing and credit information. There will be an expected significant increase in self-service purchases of credits as a result.

Key features of the solution:

  • New section in the UI for billing & credit usage information
  • New RBAC role for finance-type user
  • Filterable charts and graphs
  • Ability to purchase credits 24/7 through the UI

Role
Lead UX Designer

Work Completed

  • UX review of proposed wires and list of requirements from product manager
  • Research into design patterns for billing and observability dashboards
  • Proposed design changes to layout of navigation on Capella to accommodate the addition of billing as a top level item
  • User Flow Diagrams
  • Low Fidelity Wireframes
  • High Fidelity Prototypes
  • Presentation of designs to multiple stakeholders including the product manager, and senior cloud FinOps manager