Cloud Passport

Designed the usage dashboard for TIBCO Cloud Passport, making complex multi-product usage data easier to understand, explore, and act on.

MY ROLE

Information architecture · Wireframing · Visual design · Interaction design · Prototyping · QA with dev

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.

The Challenge

Visualization overload. Cloud Passport gives customers a flexible, usage-based plan across multiple TIBCO cloud products — but the dashboard tracking that usage was packed with charts, filters, and settings competing for attention. Customers needed clarity, not more data.

What I did

Information architecture — mapped what users needed to see and when, and wireframed each scenario, including a dedicated toolbar area for the graph

Visual design — applied branding and polished the visuals using our design system's component library for consistency

Interactive prototype — built the graph's interactions in Lovable to show dev how alive and responsive it should feel

QA & handoff — checked design consistency with dev, wrote spec sheets, and added new components back into the design library

Wireframes

Visual Designs

Key design decisions

Zoned layout

Separated informational data from interactive controls, helping users distinguish what to read from what they could manipulate.

Chart-firsy hierarchy

Gave the visualization the strongest visual weight because exploring usage was the dashboard's primary task.

Purposeful use of color

Used a cooler, quieter palette for the default experience while reserving warmer, higher-contrast colors for states that need attention. Also used the company's primary blue as a "follow-the-brick-road" cue, guiding users to where they should look first.

Accessibility toggle

The system was only ever meant to have one color palette, so I designed an accessible color-blindness-friendly variation and built it as a toggle — extending the existing pattern rather than replacing it, so the palette itself became a new, reusable tool.

AI + Vibe coding exploration

AI-Assisted Prototyping

Used Lovable to turn static design concepts into a working interactive prototype, making it easier to evaluate ideas in context.

Color Exploration

Tested multiple accessible color palette variations against real data instead of creating each version manually as a static comp.

Interaction & Motion

Refined hover states, transitions, and motion timing directly in the prototype, using my motion design background to make interactions feel polished and intentional.