Archer IRM
Year
2023-2024
Role
Design System Architect
Deliverables
- Information Architecture
- Nomenclature Establishment
- Synchronization with Development
- Color Rainbow Audit
- Auto Layout Optimized Figma
- Standardization Process Creation
- Future Strategy Consultation
How do we transform a 20-year-old, inconsistent design landscape into a meticulously documented and standardized design system that ensures future consistency and efficiency?
Archer IRM, a leading risk management company, faced a significant challenge: the product had been built over 20 years without consistent standardization. The lack of a cohesive design system led to inefficiencies and inconsistencies in both design and development. To address this, I led the creation and implementation of a new design system, named Arrowhead, to bring standardization, efficiency, and clarity to the design and development processes.
Challenges and Goals:
The primary goal was to establish a unified design system that would streamline the design and development of risk management solutions. The challenges included:
- Standardizing historically inconsistent and messy code.
- Migrating baseline components from Sketch to Figma.
- Establishing a robust information architecture and nomenclature.
- Ensuring seamless synchronization between design and development teams.
- Creating a comprehensive standardization process for future consistency.
Approach:
- Information Architecture Setup: I began by setting up the information architecture for the design system, ensuring a logical and intuitive structure for all components. This foundation was crucial for the system’s usability and scalability.
- Nomenclature Establishment: To facilitate clear communication and ease of use, I developed and implemented a consistent and clear nomenclature system for all design elements.
- Synchronization with Development: Leading the execution of synchronization efforts with the development team was key to ensuring that the design system was seamlessly integrated and consistent across all stages of the project. This involved regular meetings and collaborative sessions to align both teams.
- Color Rainbow Definition and Standardization: I defined and standardized the color palette, patterns, and constant nomenclature, ensuring a cohesive visual identity throughout the design system. This step was essential for maintaining visual consistency across all designs.
- Auto Layout Optimized Components in Figma: I architected and built auto layout optimized components in Figma. These components enhanced efficiency and scalability for designers, making the design process more streamlined and effective.
- Standardization Process Creation: I developed a comprehensive standardization process, detailing how to add new components and review current designs for consistency and quality. This process included guidelines for component creation, review cycles, and approval workflows.
- Future Strategy Consultation: I provided strategic consultation on future guidelines and documentation to ensure the design system’s longevity and adaptability. This included creating a roadmap for ongoing maintenance and updates to the design system.
Outcome:
The Arrowhead design system successfully transformed Archer IRM’s design landscape from a chaotic, inconsistent state to a well-documented, standardized, and efficient system. The high level of standardization and the streamlined design process resulted in significant improvements in productivity and consistency for both the design and development teams.
Conclusion:
The creation of the Arrowhead design system exemplifies the power of a user-centered, strategic approach to design and development. By leading the team through meticulous planning, execution, and synchronization, we were able to deliver a robust design system that not only met but exceeded the project’s goals. Archer IRM now benefits from a cohesive, efficient, and scalable design system that supports its ongoing innovation and growth in the risk management industry.
