TIBCO Cloud Single-Sign On
Single sign-on page for TIBCO Cloud — an inherited redesign that needed to be refined and prepared for development on a short timeline.
MY ROLE
Layout & hierarchy · Wireframing · Visual design · Developer handoff
Outcome
Delivered a cohesive single-page SSO experience with documented interaction states and implementation guidance for two development teams.
The Challenge
The page combined two distinct areas: the SSO request flow at the top and an authentication table below. The primary design challenge was creating enough visual separation for each section to remain clear while maintaining continuity across the page and avoiding excessive whitespace or heavy dividers.
Inherited wireframe
Final design
What I did
01
Refined the existing wireframes into a more cohesive page structure
02
Established hierarchy and spacing across the SSO and authentication sections
03
Defined error, loading, and modal states
04
Prepared design specifications and handoff documentation for two development teams
Key design decisions
Connecting two distinct sections
Used consistent alignment, spacing, hierarchy, and repeated call-to-action patterns to visually connect the SSO request area with the authentication table, helping both sections read as one cohesive experience.
Balanced section separation
Created clear grouping without relying on excessive whitespace or heavy horizontal dividers, keeping the page compact while preserving readability.
Consistent alignment and rhythm
Standardized the placement of text, actions, supporting information, and tags across the table to make the interface easier to scan and visually consistent.
Developer handoff & interaction specs
Created detailed component and interaction sheets covering modal variations, UI states, and expected behaviors for design and development teams.
Because the layout relied heavily on spacing and alignment rather than visible dividers, I also documented page-level spacing, padding, and alignment specifications to help developers reproduce the intended hierarchy and section separation accurately.
