Element Design System

Background

Bayer Crop Science set out to build a cohesive, scalable design system, the Element Design System, to unify the user experience across its many product lines and as many as 20 distinct brands. I worked within this system as a product designer, applying it across several brand themes, and parts of my own product work ended up shaping how the system evolved.

My Role

I was a consumer of the Element Design System rather than a member of the systems team itself. Over time, I worked across the D.A.D. brand theme (Dekalb, Asgrow, Deltapine), the core Bayer brand, the Channel brand, and several smaller regional brands, roughly 10 in total. Two things from my product work fed back into the system directly:

• I created responsive templates for mobile, tablet, and desktop, including breakpoint specs, grids, and layouts. The Element team later adopted these as company-wide component guidance.

• Theme-switching between brands became a major time-saver for maintaining consistency, so I ran training sessions teaching other designers how to use that workflow efficiently.

  

Challenge:

1. Working efficiently across many distinct brands. Each brand theme needed to feel appropriately distinct while still functioning within one consistent underlying system, and repeating full design work per brand wasn't sustainable.

   

   
   

2. Defining responsive patterns the system hadn't fully addressed. Clear breakpoint, grid, and layout guidance across device sizes wasn't yet standardized, which made consistent responsive design harder than it needed to be.

   

   
   

3. Helping teams adopt an efficient theming workflow. Theme-switching had real potential to save time across the org, but only once people understood how to use it well.

   

Solution:

• Responsive Templates
  I built out templates for mobile, tablet, and desktop breakpoints as part of my own product work, defining grids and layouts I needed to stay consistent across screen sizes. The Element Design System team later took these templates and used them as company-wide guidance for component behavior across breakpoints, extending well beyond the product I originally built them for.

  

  
  

• Multi-Brand Product Work
  I applied the Element Design System's theming capabilities across the D.A.D., Bayer, and Channel brands, along with several smaller regional brands, adapting product work to each brand's identity while staying within the system's shared structure.

  

  
  

• Theme-Switching Training
  Since switching between brand themes efficiently became a significant time-saver for maintaining consistency, I ran training sessions to help other designers adopt that workflow, reducing duplicated effort across teams working in different brands.
  
  

• Process Notes
  Working across roughly 10 brands meant constantly balancing brand-specific identity against system-wide consistency, since too much rigidity would have made individual brands feel generic, while too much flexibility would have undermined the system's purpose. Seeing my own templates get pulled into company-wide guidance also shifted how I approached the work going forward. I started designing with the assumption that patterns might get reused well beyond their original context, not just built for the product directly in front of me.

  

Outcome:

The Element Design System became a core part of Bayer Crop Science's design workflow. My responsive templates contributed directly to the system's cross-device component guidance, and the theme-switching training helped other designers work more efficiently across brands, supporting the broader consistency and efficiency gains the system was built to deliver.

Disclaimer: The visuals shown here don't use any Bayer typography, images, or logos due to NDA restrictions. While these examples reflect the design and functionality of the Element Design System, proprietary elements have been left out. For a more detailed walkthrough of my role and contributions, feel free to reach out to schedule a private call.