Experian React

Designing and building Experian’s scalable component library

Experian React
Services
User Experience
Prototyping
Development
React

A service provider to over 200 companies, Experian needed a white-label component library that would meet the varied needs of its partners.

Working alongside Experian, we developed a new design system and component library to support Experian and its partners. Our work brought together tactical rules around component states and common design patterns with high-level design principles rooted in conversations with users.

Experian React
floating components from design library

Reimagining the partner experience

Our team worked with Experian to reimagine the experiences around its partner services for Financial and Identity monitoring. Together, we evolved the end-to-end platform experience, focusing on creating a personalized product experience that could grow with customers over time.

Documenting a comprehensive design system

Following our platform redesign, we abstracted components from our foundational designs, creating a comprehensive set of control sheets detailing interactions, states, and behaviors for each component to inform development.

svg-animation

We also established a style guide outlining the core principles behind the new design system, including a flexible set of rules and guidelines to support partner white-labeling within the system. Paired with robust front-end parameterization, the new platform provides easy access to component styling to meet the specific needs of Experian’s partners.

6 slides showing the type and icon system

Taking an atomic approach to component development

To support Experian’s implementation efforts, we worked closely with Experian’s product and engineering teams, prioritizing components for development.

Using an atomic approach, we developed components based on smaller, reusable micro-components. This allowed for efficient code reuse across the ecosystem and accommodated for localization and accessibility needs.

svg-animation

Building an extensible React library

To house our components, we also created a React Storybook library to support the new online platform.

This approach allowed design and engineering teams to work together to test the custom parameters, responsiveness, and accessibility of each component before merging into the client’s B2B production platform.

We also established a test strategy, integrating unit tests to ensure future changes would not break existing library components.

Designing and developing for all users

Throughout the design and engineering process, we also focused on creating a library that would support the needs of as many users as possible.

Our resulting component library passed rigorous AA-accessibility standards, ensuring Experian’s product would be assistive and fully functional across every device, including screen readers.

collage of color usage rules, storybook, and the credit wheel

A comprehensive solution for future product design and development

Our resulting ecosystem of components and partner documentation—from reference designs, to control sheets and style guides, to an online React library—provides Experian with a strong foundation to build future product experiences.

image of isometric components
More case studies
case study image
Strategy
Research
Design Language

Reimagining the listening experience for Bose

Case Study
case study image
User Experience
Design Language
Prototyping

Designing a platform to support Kohler’s smart ecosystem

Case Study
case study image
User Experience
Prototyping
Android Auto Development

Developing an in-car experience for Bose Automotive

Case Study