Crawford & Company: Design system
Strategies · UI development · 0–1
Establishing design standards for offshore software development
The design system scaffolded the transformation from legacy to a unified multi-tenant workspace.
Design, code, and guidelines built for offshore constraints
A design system is more than UI elements. It integrates design, code, and guidelines to improve development quality and speed.
Crawford relies on offshore staffing to reduce costs. The design system had to support this reality in two ways:
1.
Minimize dependency
Limit external libraries and reduce extra JavaScript to lower maintenance needs and avoid issues when third-party libraries fail.
2.
Strict nesting CSS rules
Offshore teams focus on speed over quality. We baked layout and theme rules to parent and utility containers, giving clear and limited modifiers to control the shift from design to code.
Component example: grid system
For the first six months, we had no frontend engineer. I learned and wrote production-ready vanilla code myself, while designing workflows to minimize discrepancies between design and implementation.
Component example: breadcrumbs
27.9% SUS increase and reduced dependence
The design system modernized three legacy applications. SUS scores increased by 27.9%, NPS rose by 4.2 points, and the team reduced dependence on offshore engineering resources.
Beyond components, I established the processes that made the system sustainable: design token automation, a frontend development workflow between designers and engineers, usability testing standards, and documentation that enabled offshore teams to implement with minimal supervision.