Developing a Multi-Site Design System for Caterpillar


2018 - 2019


During my tenure at Caterpillar, I was responsible for leading the vision and strategy for a set of marketing technologies, including the Adobe Experience Cloud infrastructure. Over the years, ad-hoc front-end design and development practices had accumulated significant UX and technical debt, resulting in complex codebases, inconsistent designs, and increased maintenance costs. An overhaul of the front-end framework was necessary to offer more flexibility and creativity to content creators while reducing development complexity and support costs.


  1. Front-End Code Complexity:
    • Multiple codebases with no common library of web elements and styles.
    • Poorly organized cascading styles and JavaScript libraries.
    • Hundreds of redundant templates and components.
    • Custom-coded elements used instead of the platform’s native capabilities.
  2. Design to Development Complexity:
    • Time-consuming design and prototyping processes due to recreated elements.
    • Inconsistent designs and UI elements.
    • Misalignment between final design assets and legacy code, complicating integration.
  3. Large Design & Development Team:
    • Varied approaches to solutions among multiple designers, developers, and strategists.
    • Frequent recreation of elements from scratch.
  4. Varied Business Needs:
    • Diverse requirements across hundreds of websites and different companies.


To address these challenges, I led the effort to overhaul the front-end framework and develop a design system that catered to existing designs and new features:

  1. Needs Analysis:
    • Evangelized the need and benefits of a design system throughout the organization.
    • Conducted a technical assessment to reveal the scale of the challenge.
    • Collaborated with teams to evaluate strategic options for addressing the issues.
  2. Strategy & Design:
    • Defined common use cases for templates and components across sites.
    • Developed a strategy for streamlining and consolidating existing web elements.
    • Worked with design teams to create a new design system using graphic files, live front-end code, and best practices.
  3. Development:
    • Collaborated with the platform team on a plan to integrate new front-end code into the existing legacy system.


This comprehensive overhaul of the front-end framework and the introduction of a multi-site design system significantly improved Caterpillar’s digital capabilities, ensuring a consistent and high-quality user experience across its extensive web presence.

  1. Design:
    • Improved the speed and quality of designs.
    • Introduced rapid prototyping to test multiple concepts quickly.
    • Enabled non-designers to plan their content.
    • Achieved design consistency within the website and across other company channels and websites.
  2. Development:
    • Created future-proof, extensible code that is easier to scale.
    • Streamlined development processes, reducing time and effort required for new features and enhancements.
  3. Collaboration:
    • Provided consistent direction and guidance to multiple parties.
    • Enhanced communication between designers, developers, and strategists through a common visual language.
  4. Costs:
    • Simplified changes and enhancements, allowing for increased velocity.
    • Reduced supplier costs for design and development.
    • Enabled teams to repurpose time and focus on user testing and content creation.





2018 - 2019




Find this information interesting?​

There is more where that came from!

Scroll to Top