Situation
Upon starting up with Holonis, it was noticed that there were numerous design inconsistencies throughout the platform. Fonts, spacing, colors and content were all inconsistent. These inconsistencies were reflected throughout the entire platform. The legacy sketch files did not match up with the live product. Additionally, designs diverged between devices - iOS, Android and Desktop.
Task
It became very apparent that a shared library system needed to be developed to keep all of the assets consistent throughout the growing number of sketch files. Keeping the design consistency through the files would also increase speed and efficiency when handing files off to development. In addition to assets, style guides for fonts and colors also needed to be created.
Action
The initial action appeared daunting and started out as a small project on the side of actual deliverables. Research into Atomic Design - specifically the system used by Brad Frost showed that it would be a perfect solution for a growing platform. Every color, font and asset were taken into account. Small building blocks of atoms, molecules, organisms and pages have been implemented.
Results
Over the course of at least 4-5 months, this system has grown to encapsulate every element on the platform. It is now at a place where development can start to implement the exact same system in code. Thus by the end of 2019, the entire team will be utilizing the atomic design approach. The results will be less design inconsistency, quicker prototyping and development.
Atoms
How it works
Atoms are the most basic building blocks of Atomic Design. These blocks include icons, empty form fields, check box states, basic button structures, etc. These are then combined to make molecules.
Molecules
How it works
Molecules are the next step up in the building process. They are usually composed of content tiles, videos cells, profile tiles and completed form fields.
Organisms
How it works
Organisms become even more complex. These are composed of their respective atoms, which are composed of molecules which in turn become organisms. Organisms usually appear as blocks of related content like visual lists (the Discovery Experience also noted in this portfolio). In the end, all organisms are only composed of atoms that become molecules.