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 platform, was originally designed as a monolithic tool—evolving over two decades with no consistent design guidelines or documentation. With the company’s recent acquisition of new product lines and its evolution into “Archer Suites,” the challenge expanded: not only did the design system need to clean up the past, but it also had to support a multi-product ecosystem moving forward.
I served as a consultant and Figma expert for this project—guiding strategy, building tools, and supporting the internal team in executing a system that now supports Archer’s evolving ecosystem.
Stage 1: Exploration and Design Tools (Arrowhead V0)
The first phase focused on enabling the team to work efficiently and collaboratively in a modern toolset. My responsibilities included:
- Migration from Sketch to Figma: I rebuilt baseline components, trained the team in Figma workflows, and introduced scalable Auto Layout principles.
- Establishment of Design Tokens: I led the creation of the first color system, setting the foundation for tokenized theming.
- Foundational Documentation: Created initial structure for organizing components and naming conventions.
This phase helped the team lay the groundwork for what would become the Arrowhead Design System—Version 0.
Stage 2: Strategic Planning for Scalability
When Archer IRM transitioned into Archer Suites, the design system needed to support a multi-product environment with legacy code and new acquisitions. I led the development of a strategic roadmap for the system, including:
- OKRs for System Maturity: We created shared OKRs to drive component parity across design and development, improved documentation standards, and audit readiness.
- Governance & Team Planning: I co-authored a proposal for a hybrid design systems team (centralized + federated model), recommending a 7-person structure with dedicated dev/design roles.
- Executive Buy-in: This plan gained full buy-in from engineering leadership—a significant shift from a starting point of zero dedicated resources. Ultimately, the client staffed 4.5 FTEs to begin implementation.
Stage 3: Arrowhead V1 – Component Rebuild & DS Team Launch
With a dedicated team in place, we launched Arrowhead V1:
- Component Redevelopment: Built clean, simplified components using Material UI foundations, aligned closely with the new Figma library.
- Design-Dev Parity: Defined a naming system that ensured 1:1 parity between Figma and codebases.
- Accessibility Standards: Introduced accessible patterns into the system, embedding WCAG considerations across all components.
This release established a sustainable base and a shared language between designers and developers across all product lines.
Stage 4: Future Vision – Arrowhead V2
As development catches up to design, I initiated planning for the next evolution, catching up to an executive team who was pushing for modernization and incorporation of recent design trends:
- V2 UI Redesign: I reimagined the visual language of Archer’s interface and pitched a cohesive update that could unify all product suites.
- Cross-Team Buy-In: Gained consensus from stakeholders across all product areas, setting the stage for implementation once V1 reaches full dev parity.
Arrowhead V2 positions the company to further modernize its product suite and leverage the design system as a strategic driver of innovation.
Outcome & Impact
This initiative resulted in the creation of Archer’s first scalable, tokenized design system—laying the groundwork for visual and structural consistency across its entire product suite. Through strategic planning and sustained collaboration, we secured engineering buy-in and enabled the staffing of Archer’s first formal design systems team. By implementing a consistent nomenclature and achieving parity between Figma and code, the design-to-development workflow became more streamlined and efficient. Ultimately, this transformation brought lasting accessibility improvements and design consistency to both legacy interfaces and newly acquired product lines.