The project
The challenge was to create the third complete version of the software, covering its eight assistance modules, with the aim that users would comprehend its functionality without requiring implementation guidance.
We opted to begin with the company's first Design System to gain a comprehensive understanding of the product. For this aproach, we selected the Atomic Design methodology, which divides the process into five distinct parts: atoms, molecules, organisms, templates, and pages.
- UX/UI Designer
- Creative Director
- Product Owner
Atoms
Atoms represent the fundamental and indivisible components of the interface, encompassing elements like buttons, text fields, and icons. Serving as the essential building blocks, atoms form the foundation upon which more complex interface elements are constructed.
Molecules
Molecules consist of combinations of atoms, forming reusable components that serve specific functions. An example would be a search field, comprised of a search icon and a text field, which together create a cohesive and functional element.
Organisms
Organisms encompass sets of molecules and atoms that collectively form larger, autonomous parts of an interface. Examples include headers, navigation menus, or contact forms, which consist of various molecules and atoms working together to fulfill specific functionalities within the interface.
Next steps
The implementation of a design system follows a consistent process that requires continuous maintenance to keep pace with the project's evolution. During the subsequent stages of the Atomic Design methodology, such as the creation of templates and pages, we adopted a sprint-based approach, where screen design progressed concurrently with component development by developers. This synchronized approach ensured smooth integration between design and development, optimizing time and resources.
As the project advanced, we began incorporating the internal design system into additional screens of the acquired software. Recognizing the lower frequency of mobile platform usage by users, we streamlined its functionalities to prioritize the most essential features, thus ensuring a consistent and effective experience across all platforms. This iterative and collaborative process resulted in a robust and adaptable design system capable of meeting the project's and users' constantly changing needs.