When Blockpit started to grow rapidly we also realized that it was time to brain dump all the ideas and guidelines by creating globally accessible and centralized Figma and Notion spaces.
A well-executed solution enables designers and developers to increase output on the one hand and improve quality on the other.
Team
Initiated for my own benefit while working on the retail product redesign, I collaborated mainly with another Product Designer, a few Brand Designers, and the CPO, exchanging and peer-reviewing results.
As part of my work, I extensively researched and implemented Design Tokens and established a new Design Language for our components.
Vision
Since the design system is a growing and living document, this project was about laying the groundwork by documenting colors, fonts, icons and an initial set of components.
Interface inventory
We kicked off the project by performing an interface inventory.
Each item was categorized and its purpose described in a few words.
At the end of this process we cleaned out duplicate and inconsistent entries and decided on the ones we continue working with.
Colors & Fonts
After collecting all the relevant colors and fonts as design tokens we decided to split them in Global and Alias Tokens:
-
Color Aliases: Categorized as foreground, background or border.
-
Typography Aliases: Categorized as heading, paragraph or label.
Icons & Components
We merged several similar components to keep them as versatile and atomic as possible, as we defined the following hypothesis:
Few components are easier to maintain and the acceptance of their use increases.
Learnings
While working on the project I learned several things, highlighting the three most important ones:
-
Processes must be defined to keep the system "alive".
-
Keep Figma and Notion in sync all the time.
-
Find the sweet spot of documentation complexity to speed up the process while maintaining creativity in finding the best solutions.