Successfully scoping a Design System with a cross-functional team
The context:
Before I started at Carl, the front-end team was working with the ant design library. Ant is a large library with many UI patterns, but the Frontend team felt that it wasn't customisable enough and was too draining on performance. As a Designer, I also felt its limitations: we couldn't easily create reusable custom UI patterns, so design and development delivery times were severely impacted.
Once we decided to invest time into creating and migrating to a new design system I worked with the Frontend team to build requirements for an alternative library. We eventually decided to use chakra UI, which allowed us to rapidly customise it both in the design file and in the front-end code.
The solution:
I asked one front-end developer to be my “ambassador”. We were ping-ponging between Figma and storybook. We based the structure on a strict atomic rule (atom, molecule, organism). Thanks to this set-up, we were able to quickly iterate and correct usability issues or non-scalable components along the way. Once done, we were presenting it to the rest of the team through slack. This way we kept it lean while creating clear communication and guidelines for the Design System.
