About

Checkr is a leading background check platform that leverages advanced technology and AI to help companies make faster, fairer, and more efficient hiring decisions. It streamlines the screening process with solutions tailored for modern workforces, including gig, staffing, and enterprise businesses.

Problem

• The original design system was built on an end-of-life version of Angular, introducing significant security and audit risks.

• Limited flexibility hindered scalability and reduced developer efficiency, particularly for full-stack developers.

• The migration needed to support 20+ teams with minimal disruption to customer-facing workflows and visual consistency.

Action

Discovery

The need for a modernized design system was driven by both security risks and developer challenges with the outdated Angular system. During initial planning, the design team proposed a more radical redesign of the user experience to align with modern design principles. However, introducing major UX overhauls alongside a large-scale front-end migration was deemed too risky, as it could amplify disruptions for customers and developers.

Through stakeholder discussions, it became clear that a light UI-skinning with some minor accessibility improvements and phased rollouts prioritizing less critical pages would be the most effective way to gain developer adoption while minimizing external risks. These insights shaped our use of a modified RICE framework. Tasks (defined as pages to be transitioned) were prioritized not only based on their Reach and Impact but also with a focus on minimizing disruption. Pages with the least customer or team impact were transitioned first to allow feature teams to build expertise in the migration process before tackling higher-impact tasks.

Solution

I collaborated closely with the UI Platform team as my primary engineering partners, ensuring seamless rollout and alignment with technical requirements. Together, we worked with feature teams to:

• Develop Governance for Scalability: Early in the project, we established a governance framework to standardize design system adoption across teams, ensuring consistency and enabling future scalability.

• Engage Early for Custom Solutions: During regular syncs, we identified workflows requiring custom components and collaborated closely with feature teams to address their unique needs without delaying the overall migration.

• Align Design and Development: Close collaboration between design and development teams ensured that new components met usability goals while staying feasible within technical constraints.

To facilitate smooth adoption, I led:

• Proactive Communication: Partnering with Customer Success to notify customers of upcoming visual changes and address concerns through feedback loops.

• Developer Engagement: Hosting office hours, providing clear documentation, and offering hands-on support to assist teams during the migration.

• Live Component Testing: I created a live component playground that allowed developers to experiment with how components worked together, fostering better understanding and adoption.

The Double Diamond methodology was applied iteratively throughout the process to address unforeseen challenges, such as resolving gaps in component designs and ensuring seamless transitions for high-impact pages.

Result

The migration was successfully completed with:

• A 30% improvement in lead time for changes among teams that fully adopted the React-based design system.

• Replaced custom built components by 85% with well maintained design system components

• Increased developer satisfaction due to the system’s improved flexibility and ease of use.

• A scalable platform for future, more radical redesigns, while maintaining a stable and reliable system for current workflows.

Key challenges and resolutions

Challenge: Balancing innovation with stability
Developers were concerned about the migration disrupting their workflows and timelines.

• Resolution: Lower-impact pages were prioritized first to minimize risks and build trust, enabling teams to adopt the new system incrementally.

1. Challenge: Developers not using the design system properly
   Some developers initially struggled to use the design system consistently, leading to errors or misaligned implementations.

   • Resolution: We rigorously documented the design system in Storybook and frequently shared updates. I also created a live component playground where developers could test how components worked together, improving understanding and adoption.

2. Challenge: Customer concerns about visual changes
   Even small visual updates raised concerns from enterprise customers.

   • Resolution: Feedback loops with Customer Success ensured that visual changes were communicated proactively and aligned with customer expectations.

Lessons learned

• Phased rollouts build momentum: Starting with lower-impact pages allowed teams to familiarize themselves with the migration process, reducing risk and creating a foundation of expertise that benefited the more complex, higher-impact tasks.

• Governance is critical for scalability: Establishing governance early ensured consistency across teams and enabled long-term scalability for future updates and redesigns.

• Custom solutions require early engagement: Early collaboration with feature teams to identify workflows that required custom components helped avoid delays and ensured the system met diverse team needs.