Cloud Passport
TM
Two users, one dashboard
A usage dashboard that gives executives an instant read on spend and contract, and gives engineers room to explore usage across six products.
ROLE
Product designer, discovery through QA
TEAM
PM, stakeholder, 2–3 engineers
TIMELINE
2-3 months
OUTCOME
One dashboard that works for both users: executives see total CUU and contract status up front, engineers get a dedicated workspace to filter and export. Plus an accessible palette added to the pattern library.
Outcome
Delivered a scalable dashboard framework that organizes complex, multi-product usage data into a clearer and more manageable experience for both everyday and advanced users.
Validation & User Testing
10/10
Found product usage without help
10/10
Completed filtering and export
9/10
Found the correct CUU total
5/5
Ease-of-use rating
"Dashboard was easy to use and the total CUU used was the first thing that caught my eye."
— Usability test participant
The Challenge
A dashboard packed with charts, filters and settings, serving two users who wanted opposite things
Research & Discovery
IA & Hierarchy
1
2
3
4
MID-FI WIREFRAME
01
Header: a product title and one line explaining Cloud Passport
03
Executive read: total CUU with the contract beside it
02
View toggle, moved up so Product Usage isn’t missed​
04
Engineering workspace: toolbar, stacked chart and table, linked by hover
Final Designs
The shipped screens, and the calls behind them.
Decision
Cross-Component Hover States for Complex Data
The Cloud Passport dashboard spans three distinct parts: the usage header, the graph, and the table. Without a bridge between them, dense data forces users to rely on text-heavy tooltips. I designed synchronized hover interactions so highlighting a product in one component instantly illuminates it across all three, turning an intimidating data grid into an intuitive, scannable experience.
Trade-off: Demanded additional prototyping effort (built in Lovable) to convince stakeholders of the value of micro-interactions when motion wasn’t initially a company priority.
THIS WEEK
LAST 90 DAYS
Decision
Engineering-Aligned Chart Architecture
My initial static mockups didn’t match what the team’s Highcharts framework could actually render. To bridge the gap, I worked closely with engineering to build real charts early—evaluating how colors shifted and how spacing behaved between 7-day and 90-day views. I then rebuilt the components in Figma so layouts scaled cleanly with the toolbar and table.
Trade-off: Incurred more upfront design and cross-functional alignment effort than simply copy-pasting an existing component, in exchange for a solution that was genuinely buildable.
Decision
​Scalable Palette Switcher for Diverse Data Density
Trying to force a single color palette to work across every scenario created friction: weekly views worked for everyday check-ins, but 90-day views with nine-plus datasets broke contrast, branding, and clarity. Rather than forcing one compromised palette, I designed a dedicated switcher component and added it to the design system library, giving users control over contrast and accessibility across varying data densities.
Trade-off: Required extra system definition work to establish governance, minimum/maximum variations, and rules for palette limits.
%201.png)
Decision
In-Page Toggle for Unified Data Views
Enterprise data tools often default to messy left navbars, tertiary tabs, or extra subheaders. Because product usage wasn’t a separate page—just a different lens on the exact same underlying data—adding structural navigation felt like bloat. I introduced an inline toggle to switch views seamlessly, then tested whether users could discover and adopt it without added training. All 10 test participants successfully located and used it.
Trade-off: Required validating an untested in-page control pattern and committing extra testing cycles to prove discoverability.