Building an Atomic Design System
For the payroll and HR staffing sector, Navigator is Madison Resource's multiplatform software suite. utilizing Blazor as the UI framework. For their CRM application to facilitate quick development and UI feature design, a new Figma design framework was required.
Context
I joined the project as a founding Sr. UX designer and worked with the CRM project/product manager, and lead and junior developers.
- Framework and core feature development had started
- Management was supportive and anxious for a solution
- Development team was newly formed
Problem
UI inconsitency was occuring as developers were not collaborating. Without a basic design system and documentaion UI technical debt was going to grow. Other problems were going to occur such as:
- Design handoff and QA will take more time
- Developers avoid refactoring the code because of the risk
- At every unclear point, new members will invent the wheel
- Always new features to add, and the design system will not be priority
Goal
As new features are added a clear token system will allow for development efficeny. The product team will continually test and evolve the design system.
- Define all reusable components and patterns
- Provide comprehensive design documentation
- Ensure all components are WCAG color contrast compliant
A modern design systems would increase collaboration, ensure consistency, and accelerate design and development cycles.
Contextual Inquiry, User Flows, Service Blueprints, Information Architecture, Prototyping, User Testing, Visual Design
Design team with junior and senior level designers, development team with lead and junior developers
Ongoing
Figma + Tokens Studio + Google Docs/Sheets + JIRA
2 junior designers, 2 lead and 2 junior developers, project manager also serving as the product manager
Enhanced operational efficiency by understanding work-flows and user hierarchy within investigative teams. Successfully conceptualized a unified, transparent solution for diverse user types and identified strategic data leverage points in the current systems. Despite the absence of a development road-map and available collaboration team, promptly adjusted the UI to align with the evolving design system development. This demonstrated adaptability ensured a seamless integration process amid evolving circumstances.
Research
My research guided me to Atomic Design, a prominent methodology in the field of design systems. I embraced its principles as the cornerstone for Madison Resources' design system. At the heart of Atomic Design is the idea of building small, self-contained components that seamlessly combine to create larger, cohesive structures.
Content Audit
Conducting a design inventory was a simple matter of moving through the live product and taking screenshots of all the instances of each type of component such as text style, layout, modal, etc. As I captured those instances I grouped them by categories. Design drift and gaps were easy to identify and I was able to see where I had to focus design direction. Going through this exercise with the development team helped to align the company’s vision on a design direction.
System Overview
In my experience, I've found that crafting excessively intricate components or creating an abundance of styles and components can lead to challenges down the road. Opting for a streamlined and adaptable design system is crucial for scalability and flexibility. It's best to focus solely on what's necessary. For example, instead of creating a multitude of button variations, sticking to just a couple that serve the purpose effectively is more beneficial. Keeping the visual design minimal allows for the components to grow and adapt more smoothly over time.
I used Figma's variants functionality to group and organize similar components into a single container. This simplified the component library and made it easier for everyone to find what they need.
As the design system expands, maintaining organized and consistent design principles could pose a challenge. Variables offer a solution to this issue by centralizing all values, simplifying the process of updating and expanding the design system. The Atomic priciple aligns with variable properties.
Process
Since the Blazor framework does not reley on javascript for component styling only css it made the process simple. I leveraged the Figma plugin Tokens Studio to extract and document css code. The files were also shared for the team for development reference.
Creating atoms in an atomic design system involves several key steps to ensure they form the foundational building blocks of the interface. Here's the detailed process I undertook:
- Identify Basic UI Elements: Begin by identifying the most fundamental UI elements such as buttons, inputs, icons, text styles, and colors.
- Define Atomic Properties: Establish clear guidelines for each atom, specifying its characteristics like size, shape, color palette, typography, and behavior.
- Create Reusable Components: Develop these atoms as reusable components that can be easily integrated into different parts of the interface and across various applications.
- Document Usage Guidelines: Document usage guidelines and best practices for each atom, including when and how to use them effectively in designs.
- Version Control and Maintenance: Implement version control to track changes and updates to atoms over time. Regularly review and update atomic components based on feedback and evolving design requirements.
This systematic approach ensures consistency, scalability, and efficiency in UI design, forming the basis for more complex molecules and organisms within the atomic design system.
Molecules are basic groups of atoms that function together as a cohesive unit, possessing distinct and unique properties. Here's my detailed process for creating molecules within an atomic design system:
- Identify Atom Combinations: Select atoms that logically work together to form more complex functionalities.
- Define Molecule Properties: Establish specific guidelines for each molecule, outlining its structure, behavior, and variations. This ensures consistency and reusability across different parts of the interface.
- Create Modular Components: Develop molecules as modular components that can be easily integrated into larger organisms or templates. This modularity enhances flexibility and scalability in design.
- Document Usage Guidelines: Document how each molecule should be used in different contexts, providing examples and best practices to guide designers and developers.
- Iterative Design and Testing: Iterate on molecules based on user feedback and testing results. This iterative process ensures that molecules meet usability and accessibility standards.
Creating molecules effectively bridges the gap between basic UI elements (atoms) and more complex interface components (organisms), fostering a cohesive and efficient design system.
Organisms in atomic design are relatively complex UI components that are composed of groups of molecules and/or atoms. Here's the process I followed for creating organisms within an atomic design system:
- Component Composition: Combine related molecules and atoms to form organisms that fulfill specific functions or display specific content.
- Modular Structure: Design organisms in a modular manner to ensure they can be reused across different parts of the interface and in various contexts. This approach enhances consistency and reduces design and development time.
- Hierarchy and Relationships: Establish hierarchical relationships between organisms and their constituent molecules and atoms. This helps in understanding how different parts of the interface relate to each other.
- Documentation and Guidelines: Document each organism thoroughly, including usage guidelines, variations, and interactions. This documentation ensures that designers and developers understand how to use and implement organisms correctly.
- Iterative Refinement: Continuously iterate on organisms based on user feedback and testing results. This iterative process helps in improving usability, accessibility, and overall user experience.
Creating organisms effectively bridges the gap between simpler components (atoms and molecules) and more integrated, functional parts of the interface, contributing to a cohesive design system.
Templates in atomic design serve as higher-level components that combine organisms into reusable layouts or pages. Here's how I are structured templates within an atomic design system:
- Composition of Layouts: Templates define the overall structure of a page by organizing various organisms and sometimes molecules into coherent layouts. These layouts provide consistency across different sections or types of pages.
- Reusability: Like other atomic design components, templates are designed to be reusable. They establish guidelines for placing organisms within a page or screen while maintaining flexibility for different content.
- Hierarchical Organization: Templates fit into the hierarchy of atomic design by sitting above organisms but below pages. They provide a mid-level structure that bridges the gap between individual components (atoms, molecules, organisms) and final pages.
- Guidelines and Documentation: Detailed documentation accompanies templates to guide designers and developers on their usage. This documentation ensures consistency in layout and interaction patterns throughout the design system.
- Iterative Development: Templates evolve through iterative design and development processes. They are refined based on user feedback and testing results to enhance usability and meet user needs effectively.
Templates play a crucial role in atomic design systems by providing a structured approach to creating consistent layouts and pages, thereby streamlining the design and development workflow.
Results
Upon reaching the debut phase, I took the lead in on-boarding team members to the new design system. As the team became fully acquainted, they embraced the system as the authoritative source for design and functionality guidelines. The tangible results started to emerge once the system was fully implemented, bringing the team the following benefits:
- Streamlined work-flows
- Increase in team velocity
- Unified design consistency
- Increase in brand credibility