Wethos Design System Overhaul and Maintenance.
Lead Designer
Atomic Design System
Atoms
Molecules
Pages
Organisms
Buy-in and Alignment.
When I joined Wethos, the design system was unstructured and underutilized Figma’s capabilities for scalability. Before implementing changes, I hosted a lunch-and-learn session with the development and product teams to introduce them to the Atomic Design structure and secure their buy-in. I then rebuilt the design system from the ground up using Brad Frost’s principles, organizing components into reusable building blocks (atoms, molecules, organisms, and pages) while ensuring alignment with the existing CSS framework and SASS file naming conventions.
Atoms
Atoms are the foundational building blocks of a design system. By reorganizing and structuring these core elements, I created a clear and reusable base that improved visual consistency, enhanced scalability, and laid the groundwork for cohesive, complex components.
Molecules
Molecules are combinations of atoms that form functional components, such as buttons, form fields, and card headers. Organizing these components in our design system paved the way for initiatives to codify our most frequently used elements, improving development consistency (and speed!).
Leveraging Figma Properties
Figma properties allow you to define multiple states for components and set preset overrides for instance swaps, such as toggling icon visibility, updating content, or changing copy. This flexibility enables designs to come together quickly while maintaining consistency across projects.
Organisms
Organisms are combinations of molecules working together to form more complex components, such as modals, cards with images and text, or banners. By organizing and standardizing organisms in our design system, we were able to move more rapidly into high fidelity designs, and build richer prototypes in less time.
Pages
Pages represent the highest level of design in the atomic design methodology, combining organisms and content to create fully realized layouts. By defining clear guidelines for page structure in our design system, I ensured designs were cohesive, user-focused, and aligned with our brand while streamlining the handoff process to development.
