Designing and building Experian’s scalable component library
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.
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.
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.
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.
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.
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.
