Curastory’s Design System
When I started at Curastory, there was no design system. In April of 2022, I was brought in to change that. I started with a collection of flows that were unorganized and in need of continuity. I decided to use atomic design to tackle this massive issue in the Curastory workflow. I broke it down piece by piece, and in less that 3 months, I delivered an elegant, functional system that met and exceeded all of Curastory’s design needs.
Isolating the Problem
This is an example what I was given. Multiple files that were in need of a design system to ground the flows and maintain consistency. There was no system to base these pages off of, and everything was in need of structure.
Atomic Design
I implemented atomic design when creating this design system, ensuring a cohesive and efficient approach. Breaking down design elements into their smallest components, such as atoms like buttons and form inputs, and gradually assembling them into more complex molecules, organisms, templates, and pages, allowed me to maintain consistency and scalability across the system. This method allowed for organization, quick reference, and easier maintenance of design elements. It also encouraged reusability, making it simpler to create new components while preserving a consistent visual language throughout the entire system. Atomic design provided a structured and systematic way to design and manage elements, resulting in a robust and adaptable design system that enhances both efficiency and aesthetics.
My Process
I started with atoms - the smallest building blocks of a design system. Some of the most common pieces are buttons, lines, shapes, icons, text fields, colors, text labels, etc. While these are the most basic elements, the create the foundation that the rest of the system rests on. This is arguably one of the most important parts of the entire design system.
ATOMS
Molecules are slightly more complex design elements that are created by combining individual atomic elements. They are created by combining 2 or more atoms. These molecules are still relatively small and self-contained, but are comprised of several atomic elements. They represent the building blocks for larger design structures.
MOLECULES
Organisms represent more substantial and integrated design structures that are constructed by combining various molecules and even atomic elements. Organisms are cohesive and self-contained sections of a design, often serving specific functions within a layout or interface.
ORGANISMS
Templates serve as the “glue” elements that unify organisms and/or individual sections, creating a fully realized design. For instance, an organism such as a search form can be used as a template within the hero section of our homepage to retrieve user data. Multiple templates, including login forms, carousels, and more, can collaborate to construct a comprehensive design.
TEMPLATES
Pages are a critical part of the system, because it serves as a crucial testing ground for the effectiveness of the design system. By viewing all elements within their intended context, we gain insights that allow us to refine the molecules, organisms, and templates to better align with the context of the design.
PAGES
A design system is ever evolving and constantly in flux. While this project was key to the Curastory platform, it will never truly be finished. That’s just the nature of design systems - we can always make them better. I learned so much through this process- how to organize very detailed information and data, prioritizing different pieces of the puzzle over others, and I became an absolute wizard at Figma. I built a strong and robust base for Curastory, that I will continue to iterate on and improve. This is just the beginning!
Conclusion
If you’d like to see more of the design system, please contact me.