design systems
Establishing Consistency through Atomic Design and Component Libraries
When I joined John Deere’s billion-dollar flagship IT project as a contractor, the task was clear: redesign the user interface for U.S.-based dealerships while addressing the pitfalls encountered during the Australian release. The Australian launch revealed challenges like inconsistent CSS, fragmented implementations, and manual processes that slowed down both design and development. For the U.S. release, the goal was to build a scalable design system that would create consistency, improve workflows, and simplify maintenance.
I led efforts to establish reusable components, rebuild custom icons, and implement a scalable design approach, all while ensuring collaboration between UX and engineering. Together, we transformed complex workflows into an efficient system that could scale globally.
This section on Atomic Design is from guidelines I authored on building reusable components
Atomic Design
Atomic Design is a front-end design methodology which breaks down visual elements into their smallest usable design element and scales up from there. Each of these visual elements are building blocks which are referred to as components.
When building new components or pages, its often helpful to label your components according to their atomic structure.
Example
Atoms are the smallest building block and can consist of a “Label”, “Input” or “Button” among others. Most atom components will be available from the GIT UX Asset Library. Pull them into your file via the Asset Tab.
Molecules consist of multiple atoms together. A Search Input Box with a Label and a Search Button would be a molecule. It retains all of the properties of each of the atoms and when changing an atom, changes should be able to be aborbed by the Molecule. When using Figma, Atom Variants should be usable inside of Molecules via component instances.
Organisms consist of a grouping of Molecules. A facet organism contains muliple filter molecules - each of those filter molecules consist of atoms such as checkboxes, labels and addional filter controls.
Templates are general page layouts containing Organism, Molecules and Atoms. The Template handles auto layout containers, grid gap / margins and ensures that everything flexes properly when the width is adjusted.
Pages reference Templates and are given more specific information to be used in high fidelity prototyping or mockups. Usability Testing sessions and Developer Hand-Off benefit from having the page’s closeness to the final product. The Place Order, Confirm Order and Order Details Pages all reference the Order Template.
Developed spec sheets for each component, detailing interactions and necessary changes. Examples below:
Created design guidelines to support strategy, upskill team members, and ensure quality and consistency.
The project faced several critical challenges:
Inconsistent Implementations - The Australian release’s hard-coded CSS and fragmented designs created inefficiencies and maintenance headaches.
Scalability Issues - The lack of reusable components made it challenging to scale designs across teams and regions.
Manual Processes - Engineers frequently dealt with repetitive, hard-coded styles and inconsistent implementations, making maintenance and scaling a constant challenge.
Responsive Gaps - A cohesive approach to responsive and mobile design was missing, creating inconsistency in user experiences.
Establishing Reusable Components
Identified the need for CSS Modules early on, laying the foundation for reusable components that eliminated inconsistencies across the application.
Rebuilt and centralized custom icons into a shared library, reducing developer dependencies on designers and improving scalability for updates.
Introduced and documented CSS variables to unify visual themes, enabling sweeping updates across the platform with minimal effort.
Defining UX Standards
Collaborated closely with the Component Stewards, a team of front-end engineers, to define scalable UX standards for React components that met both design and technical needs.
Applied Atomic Design principles to structure components systematically, ensuring seamless integration into design workflows and compatibility with leading systems like Material UI.
Championed the transition to Styled Components, advocating for its long-term scalability and maintainability, which was later adopted globally by John Deere’s IT teams.
Building and Scaling the Component Library
Designed comprehensive spec sheets for over 15 reusable components, detailing interaction states, accessibility requirements, and responsive behaviors.
Reviewed and provided over 100 actionable improvements to the Figma component library, ensuring alignment between UX and engineering teams.
Proactively ensured all components adhered to responsive design standards, reducing rework and improving cross-device usability.
Driving Responsive Design Adoption
Co-led a Responsive 101 workshop for engineers, building alignment around best practices and setting expectations for mobile and responsive design.
Designed and delivered responsive templates and components, ensuring consistency and scalability across devices, particularly for high-impact workflows like inventory management and ordering.
Faster Design Cycles - Designers and engineers reduced prototyping and iteration times significantly, thanks to the streamlined component library.
Improved Consistency - Reusable components ensured a unified visual language across regions and product lines, reducing discrepancies.
Enhanced Developer Efficiency - Centralized assets like the icon library and CSS variables eliminated redundant work, allowing developers to focus on feature delivery.
Scalable Design System - The robust component library became the foundation for a globally scalable UX strategy, supporting John Deere’s growing IT demands.
Cross-Team Collaboration - The shared language and tools fostered by the library bridged gaps between UX and engineering, improving trust and workflow efficiency.
This project is a testament to my ability to identify inefficiencies, implement scalable solutions, and create systems that balance speed, quality, and user needs. By building reusable components and a robust design system, I ensured John Deere’s IT teams could deliver high-quality, consistent user experiences at scale.