Phase 2: How Initiative and Collaboration Helped Build a Design System
In phase 2, the client surprised the team with a request for a design system, including a prioritized list of components. But there was some confusion with the naming convention, which made it difficult to get started.
My knowledge of design systems comes from hands-on experience, such as using tools like Bootstrap or Tachyons. When I saw the list, I started thinking about how design systems work: basic components that can be recombined in increasingly complex ways.
Using Sketch, I combined titles, backgrounds, buttons, placements, etc. The goal was to show how even the most complex component could be created from combinations of individual elements — as long as they obeyed certain functional rules.
After creating a few examples of different components, I shared my document internally with the team.
The team found it helpful. I added a few more examples from the client's list, before passing it off to the visual design team. They used the file as a kernel to build further with fonts, images, and other styles.
It turned out to be a very collaborative moment in our project. At the end of the sprint, we presented our concepts together to the client.