design systems
Establishing Consistency through Atomic Design and Component Libraries
Overview
Starting in late 2018, John Deere’s flagship IT project faced fragmented designs, redundant workflows, and scalability challenges. Product teams struggled with inconsistent design implementations, slowing both development and user experience improvements.
As a UX Designer, I spearheaded the development of a scalable design system based on Atomic Design principles. By transitioning from Sketch and InVision to Figma, we created a streamlined component library with around 40 reusable components and well-defined variants. These efforts enabled product teams to deliver consistent, accessible, and scalable user experiences across multiple regions and product lines.
Key Results
Scalable workflows
Reusable components and templates enabled rapid page development with consistent design and functionality.
Improved efficiency
Front-end development time was cut by 50%, allowing teams to focus on new features rather than redundant tasks.
Cross-functional adoption
UX designers, researchers, and engineers collaborated to establish shared standards, ensuring alignment across global teams.
User experience consistency
Streamlined design patterns improved usability across devices, reducing rework and inconsistencies.
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.
Challenges
Inconsistent Implementations
Hard-coded CSS and fragmented designs in the Australian release created inefficiencies and maintenance headaches.
Scalability Issues
The absence of reusable components hindered design scalability across teams and regions.
Responsive Gaps
Teams lacked a cohesive approach to responsive design, resulting in inconsistent user experiences.
Actions & Contributions
Developed scalable components
Designed core components like label-value lists, quantity selectors, tables, and alerts, ensuring responsive and accessible behaviors.
Created reusable templates to maintain consistency across product modules and devices.
Led design system adoption
Led the Reusable Components Guild to scale the component ecosystem and drive design consistency.
Facilitated UX Guild initiatives and managed feedback loops through bi-weekly UX touch-bases with PMs and UX Advocates to support component adoption.
Improved design workflows
Collaborated with UX engineers to maintain the Storybook for coded components based on Figma designs.
Used Figma’s advanced features (variants, auto-layout, and conditionals) to streamline prototyping and design handoff.
Promoted best practices::
Co-led Responsive 101 and Components 101 workshops to train teams on reusable component development and mobile-first design.
Enhanced workflows by implementing skeleton loaders and contextual alerts to improve page-loading behavior and usability.
Impact
The scalable design system fundamentally transformed how John Deere’s IT teams delivered UX. By breaking designs into reusable atomic components, we established long-term design consistency and eliminated guesswork in development. The adoption of reusable templates accelerated page development, while workshops and guild leadership strengthened collaboration across UX and engineering. This work laid the foundation for John Deere's scalable UX strategy, continuing to drive efficiency and product success globally.