Overview
Designed by Chicago agency Avenue, TransUnion's 2015 visual refresh replaced its drab 2001-era corporate design system with a minimalist, consumer-friendly modern identity. The Intro font wordmark. A playful "tu" monogram for digital spaces. A single vibrant turquoise. A deliberate shift away from the look of a traditional financial institution.
I spent the next decade working with and evolving this enterprise branding and design system with the rest of my team in the User Interface Center of Excellence. By the end of my tenure, we had standardized the visual language across roughly 115 components, delivered a pattern library many other teams could build from and established a single source of truth for color, typography and spacing.
When I left TransUnion, the complete design system lived only inside Adobe Experience Manager (AEM). I lifted it out of AEM and rebuilt it on a current technology stack.
What's left is React, TypeScript, Vite, Tailwind, Storybook and the SCSS files I wrote against the original tokens. The components compile, the styles hold and a design system that used to be locked inside a proprietary CMS now runs on the stack the rest of the industry is hiring for.
My contribution
Design System Architecture / Component Design / Front-End Development / Internal Tooling / Brand Stewardship
The team
Senior UX Designer (Me) / User Interface Center of Excellence (Team) / Offshore HTML Developers / Design Interns
Process
Origin in UI Toolbox and CRS+
The design system started small. CRS+ needed a modern interface and a consistent component library to support an offshore HTML and UI team, so the team built a UI Toolbox. A scrappy HTML and CSS starter kit with sample pages, buttons, form fields, tables and templates. Practical, useful, working. Not yet a system. Just enough to kickoff and inform the CRS+ rebuild and to give other teams something to build from. As more teams started using it, the gaps became obvious.
View that early UI Toolbox.
From starter kit to design system
To reliably support growing teams, we evolved our early UI Toolbox into a formalized design system. We codified color, typography and spacing into unalterable tokens. From there, I designed high-fidelity, pixel-perfect components in Photoshop for our offshore engineers, backing them with precise visual specs, HTML, CSS and clear documentation.
Scaling across the enterprise
The mature system became TransUnion's quiet infrastructure. Internal teams gained a credible, on-brand starting point for their tools, allowing them to self-serve and giving our design team its queue back.
Lifting it out of AEM
After leaving TransUnion, I liberated the visual layer from AEM's legacy architecture. Stripping away HTL, Sling and OSGi, I rebuilt the system's 115 components using React, TypeScript, Vite, Tailwind and Storybook. Design tokens are now cleanly wired through a Tailwind config, CSS custom properties and typed TypeScript exports, deploying seamlessly to Cloudflare Pages.
Outcome
The design system shipped across almost all of TransUnion's internal applications during my time there. CRS+, the UI Toolbox and the in-house tools other teams built from the UI Toolbox all ran on it. After I left, the visual layer continued to define the company's product surfaces.
My 2026 rebuild is the proof that a design system DNA is portable. A system that used to require a proprietary, enterprise-level platform ($$$$) now runs in any modern React environment. The Storybook view of every component lives at the same Cloudflare deployment. The codebase is set up to grow into a broader portfolio piece with the help of AI coding harnesses. The next phase is tightening the component props, porting the remaining interactive behavior and using the system to build new things.