Converse tasked me and a partner to rebuild their entire design system in Figma, which, at the time, only partially existed in Sketch. Soon after I started it became apparent that there was no real system at all and we would have to start from scratch, which frankly, was a good thing.
We quickly learned that there was no single source of truth for many of their components, even at the color and type level, which quickly prompted a thorough forensic deep dive into the existing site components and structure, heavy collaboration with development, and constant communication with stakeholders from many sections of the organization.
Client
Converse
Role
Lead Product Designer
Skills
UI Design, Product Design, Figma, Documentation
Industry
Apparel, Footwear, B2C, eCommerce
As with Columbia, this project was extensive and required not just a complete new design system, but full component library, page template system, and component documentation. Once we dialed in the foundational elements like color, type, and icons, we were able to begin the work on building out complex components.
At several points we encountered a lack of documentation, and ambiguity around what specs for elements should actually be. It was fairly often that we were poring over source code and digging in with Devs to find the answers we needed.
A healthy design system offers countless benefits, and it became very apparent during this project what those benefits are. Not only were we optimizing and codifying the client's entire digital design platform, but we were fundamentally changing their workflow for the better.
With the consistency and documentation that we introduced, they were able to spend significantly less time and use less resources to build out entire pages. Where once, multiple external agencies requiring multiple rounds of approval were the norm, leaner internal teams are now able to crank out entire dev-ready page designs that were guaranteed to be consistent with both brand and web guidelines.
