Design system:
Adopting Atomic Design methodology
In this project, I present how I took the lead in building the company's design system from the ground up.
What?
When I joined PandoLogic, the design system was in its early stages, and my first major project was to develop and refine this system. As is often the case with system design, the work is never truly finished, as there is always potential for further improvement. However, within a six-month timeframe, we reached a point where I was proud of the results, and we continued to iterate and enhance the system from there.
.png)
Atomic Design
Atomic design is a methodology that consists of five distinct stages, working together to create interface design systems in a more deliberate and hierarchical manner.
By following this methodology, designers can create more consistent and scalable design systems, ensuring that all components work harmoniously together and fit within the overall hierarchy of the interface.
Atoms
Molecules
Organisms
Templates
Pages
.png)
.jpg)
.png)
.png)
For each group of components, we prepared comprehensive guides to ensure consistency and usability for current and future designers joining the company. Below is an example of the icon guide.
.png)
Several pages from the design system. In addition to what I've presented, there are also dedicated pages for logos, images, and a detailed presentation of shadow types.
.png)
.jpg)
.png)
.png)
Atoms
The basic building blocks of an interface, these are the smallest units and cannot be broken down further.
Molecules
Groups of atoms bonded together to form functional components.
Several pages from the design system. In addition to what I've presented, there are also dedicated pages for logos, images, and a detailed presentation of shadow types.
For each group of components, we prepared comprehensive guides to ensure consistency and usability for current and future designers joining the company. Below is an example of the icon guide.
.png)
.png)
png.png)
.png)
.png)
.png)
.png)
Another example of a guide: This section includes guidance on spacing, an overview of the field types in the system, and a visual example of how checkboxes are styled in our design system.
.png)
.png)
.png)
Several pages from the design system are shown here. Molecules consist of more complex components than atoms. While I've presented only a small selection, it's important to note that the system includes dozens more, such as table components, tooltips, alt text, tabs, and more.
Organisms
Complex components composed of molecules and atoms working together to form distinct sections of an interface, such as a navigation bar or a user profile.
.png)
.png)
In the more complex and detailed properties of organisms, we designed the components to be highly versatile. For example, the three pop-ups shown here can be adapted to create dozens of different variations.
.png)
.png)
Benefits of Atomic Design
Importance of Hierarchy:
Hierarchy is crucial for user experience, and as designers, we are the users of the design system. The hierarchical structure of Atomic Design helped us construct the design system and streamline our work processes.
Organization and Efficiency:
This method made it easier to explain our work, teach new designers, and present our progress to higher-ups. It improved our workflow and communication within the team.
Backtracking and Construction:
Since our company's systems were already built, we needed to create the design system based on what was already in place. Atomic Design allowed us to start with basic elements like colors, fonts, and icons, and then build up to more complex components. This approach was efficient and organized.
Collaboration:
By breaking down the design into elemental components, Atomic Design creates a shared language for designers and developers. It eliminates ambiguities, streamlines feedback, and ensures both teams are aligned in their goals and approaches.
.png)
In the more complex and detailed properties of organisms, we designed the components to be highly versatile. For example, the three pop-ups shown here can be adapted to create dozens of different variations.
Overall Impact
After implementing the design system, the quality and efficiency of the designers' work improved significantly. Designs were consistently ready for each sprint, ensuring synchronization among the team and maintaining uniformity across all screens. Communication with developers became more streamlined, with clear guidelines and the ability to reference the design system when needed. The impact on workflows was substantial, resulting in a marked improvement in both collaboration and processes.
My Role
As the project owner, I collaborated closely with my manager, the Director of UX, and a freelance designer, delegating tasks and working across all areas from research to final design. I ensured design consistency, integrated stakeholder feedback, and helped establish a scalable design system for future growth.
.png)
Several pages from the design system are shown here. Molecules consist of more complex components than atoms. While I've presented only a small selection, it's important to note that the system includes dozens more, such as table components, tooltips, alt text, tabs, and more.
Check out More of my Projects
Check out More of my Projects
In the more complex and detailed properties of organisms, we designed the components to be highly versatile. For example, the three pop-ups shown here can be adapted to create dozens of different variations.