Streamlining Icon Integration: Adopting the Waypoint Design System

ADP has 40+ products across the Human Resource Management (HRM) sector. These products are built on various tech platforms, including Angular, React, and others. During the process of adopting Waypoint, ADP’s Design System, local product icons needed to be mapped accordingly.

Divide and Conquer

The task involved managing a large list of icons (400+), effectively creating the need for a simple database. Airtable was chosen for its ability to support images. The approach was to divide the task into smaller, manageable groups. Common shapes like arrows, circles, checkmarks, and person silhouettes were identified. Additionally, 42 compound icons were to be replaced with their modifiers.

Setup

An Airtable database was created to facilitate this process. Initially, Waypoint’s 136 icons, semantically named and categorized into 10 groups, were added. Subsequently, SBS’s 316 icons were also included. The next step was to cross-reference these icons to identify duplicates. A product team then dot-voted on the proposed icon matches, resulting in 90% agreement. The remaining 10% of icons required usage examples for further validation.

Final Results

From the original 316 icons, 50 were added to the library after thorough mapping and consolidation. These 50 icons were then aligned with the latest Material Icon standards, replacing the varied styles from different icon libraries previously in use.