TransUnion

HOME > Portfolio > Portfolio by Project > TransUnion Design System Case Study

TransUnion Case Study

New Design System for TransUnion

A Doran Jones Inc. project.

Overview

I led the Product Design for the Doran Jones agile team of a comprehensive Design System for TransUnion. My work included creating user interface elements for various web-based applications, such as audience profile builders and data dashboards. I defined the UX process, design operations management, provided design leadership, advised the development team, gathered requirements, and coordinated with client design leadership. I also created UI components in Figma for delivery via Chromatic/Storybook. 

Goal

Creation of a complete Design System, on schedule, based on specific tech-stack needs, in an Atomic Design scheme, for use by multiple business units inside TransUnion.

Role

Senior UX Architect

Tools

Figma, Miro, Chromatic, Storybook, Colour Contrast Analyzer

Team

3 UX designers, 6+ developers, Project Manager

Timeline

May 2023 - Jan 2024

Project Roadmap

Collaborative effort by the embedded Doran Jones team to plan the overall project. Accepted by client Product Owner and updated as the project unfolded.

UX Process Definition

Defined Design System Goals: Identified specific challenges or inconsistencies, and set clear objectives for the design system. Then conducted User Research to understood stakeholders' needs and preferences and gathered feedback to inform design decisions.

Component Audit

Overall examination in conjunction with TransUnion staff to inventory all UI element and component use within project scope.

Design Token Tier Structure

Tokens

Colors: Primary, secondary, tertiary, neutral, accent colors.
Typography: Font families, font sizes, line heights, letter spacing.   
Spacing: Spacing units for margins, padding, and gutters.
Border Radii: Border radii for various elements.
Shadows: Predefined shadow styles.

Components

Pre-built components that use the tokens as building blocks.
Examples: Buttons, cards, input fields, navigation bars.

Pages/Screens

Specific screens or pages that utilize the components and tokens.

Component Design

Here is a sample of the components we created, including design tokens (variables), basic elements and their variants, complex functional components, and patterns.

Publish Design System

Designed and Documented in Figma: Designers created and documented components, patterns, and guidelines within their Figma files.

 

  1. Connected Figma to Chromatic: A Figma plugin or integration was used to connect the design system project to Chromatic.

  2. Published to Chromatic: Designers pushed changes to their Figma files to Chromatic, which automatically generated a live preview of the design system.

  3. Collaborated with Developers: Developers accessed the design system preview in Chromatic and provided feedback or requested changes.

  4. Updated and Iterated: As designers made changes in Figma, they pushed them to Chromatic, triggering updates to the preview. This iterative process continued until the design system was finalized.

  5. Published to Storybook: Once the design system was approved, it was exported from Figma and published to Storybook.

 

By using Chromatic, designers and developers could collaborate efficiently, ensuring that the design system was accurately implemented and maintained.

Next Steps

Details to follow