Designing a billing dashboard that maximizes flexibility

Using minimal numbers of components to display a variety of billing situations

Overview

Role & Responsibility
UX Designer ––
Wireframing, prototyping, iterations, UI quality assurance

Tools
Figma, Jira, Slack

Team
1 Product owner
1 Project Manager
1 UX Designer (Me)
3 Developers

Duration
2 Weeks

I developed a flexible billing dashboard capable of handling various billing scenarios, such as charge-free, trial, 1-5 levels of charges, and switching to another billing plan in the middle of a billing cycle.

Faced with a last-minute mission, I collaborated closely with the product owner and developers to ensure my design was efficient to build and met diverse needs.

The resulting interface is a modular, scalable solution adaptable to different business models and customer requirements.

CHALLENGE

Tight time constraint with blurry specs

I was summoned to a emergency meeting by the product owner, asking me to add a new billing page to the desktop taxation management application that has to be done in two weeks. The billing page records the tiers of receipts produced by business owners, and the corresponding service fee we charge.

The good news is, our pattern library is complete and ready to use. The bad news is, our startup owner was still negotiating the billing contract with our clients. It was unclear how many tier of receipts there will be, and if there will be promotional offers like free trials and discounted periods.

DEFINE

How might we design a flexible billing dashboard with minimum component changes, allowing it to adapt to various billing scenarios while ensuring efficient development?

PROCESS

Listing out all the possibilities + rapid prototyping

Me and the product owner immediately start wireframing on the whiteboard, while the project manager and developers listed out all the possible billing scenarios.

After consolidating the specifications, I prototype different component variations for different scenarios:

I added annotations of RWD behaviors, colors, and padding to the new components for quick and easy understanding.

FINAL PROTOTYPE

A versatile dashboard with for multiple scenarios