I joined 60beans in February 2023 as the Lead Designer, where I was tasked with leading the design department, establishing a structured workflow for the team, and collaborating with other departments.
A key part of my role was creating and maintaining a design system to ensure consistency across all designs.
Note: A style guide had already been developed by BCG Ventures, the primary investors in 60beans, prior to my joining.
Scope and Structure
As the team leader, I was responsible for defining the scope and focus of the design system.
The system needed to scale quickly, as we were constantly discovering new use cases and expanding the library. To meet this challenge, we took a strategic approach and defined some principles:
- An atomic structure for the design system
- Design tokens for colors, typography, and sizes
- Ensuring accessibility at all times
- Collaborating with the engineering team on a Storybook implementation, enhanced with Tailwind CSS for styling
- Using the BEM (Block-Element-Modifier) naming convention for CSS classes
Laying the foundations
We began by focusing on typography, colors, and the grid system, which were largely influenced by the existing style guide.
Working closely with the front-end engineers, we defined these foundational elements and grid settings using Tailwind CSS.
Atoms
These are basic building blocks - Buttons, pills, badges, dropdowns and many more.
Molecules
Molecules are groups of atoms bonded together, such as modals, navigation headers, footers, and similar components.
Organisms
Molecules provide foundational components that we can use as building blocks. By combining these molecules, we create organisms—larger, more complex sections of an interface made up of multiple molecules working together.
Documentation and constant dialog
Having a set of components alone isn’t enough to maintain a successful design system; it must be clear and accessible to everyone in the company. We ensured this through consistent communication between the design and engineering teams, along with clear and simple internal documentation of the system.
Conclusively
A design system is always evolving, regularly updated to reflect new use cases, business needs, and user feedback. The journey never ends…