Developing a Multi-Site Design System for Caterpillar

organization
Capabilities
Timing

2018 - 2019

Situation

At Caterpillar, I was responsible for product management for their Adobe Experience Cloud infrastructure. Their setup included a network of 100+ websites and 15+ supporting technology platforms.

Over the years, ad-hoc front-end design and development had led to significant UX and technical debt, which slowed down development, constrained design ideas, and limited functionality enhancements. Further, this complexity increased maintenance and support costs.

Action

I led the effort to overhaul the front-end framework on existing legacy platform to offer more flexibility and creativity to content creators. We built a design system that accounted for all aspects of the existing design, as well as new features to be introduced.

NEEDS ANALYSIS

  • I evangelized the need and benefits of design system throughout organization.
  • I complete a technical assessment which revealed scale of challenge
  • I work with teams to evaluate strategic options for addressing issue.

STRATEGY & DESIGN

  • I defined all common use cases for templates and components across the sites.
  • I developed 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.

DEVELOPMENT

  • Worked with platform team on plan for integrate new front-end code into existing legacy system

Result

DESIGN

  • Improvements to the speed and quality of designs.
  • Introduction of rapid prototyping to test multiple concepts quickly.
  • Enable non-designers to plan their content
  • Design consistency within the website, as well as across other company channels and websites.

DEVELOPMENT

  • Future-proofed, extensible code that is easier scale

COLLABORATION

  • Provides consistent direction and guidance to multiple parties.
  • Better communication between designers, developers, and strategist. Common visual language.

COSTS

  • Changes and enhancements to platform are easier and can be completed with more velocity.
  • Reduce supplier costs for design and development.
  • Repurpose time and focus into user testing and content creation.

Additional Details

  • Code complexity- The product had been augmented over time and:
    • had multiple codebases
    • lacked a common library of web elements and styles
    • Had 100s of redundant templates and components
    • did not have a clean, scalable code front-end code structure with well-organized cascading styles. Styles did not inherit across the platform as intended and CSS conflicts were common, resulting additional work and work arounds.
    • Had custom-coded elements rather than using the platforms native capabilities
  • Large team – Multiple designers, developers and strategists worked in this same codebase, but:
    • Had varied approaches to their solutions
    • Often recreated elements from scratch with each new endeavor
  • Varied business needs – With hundreds of websites across different companies, the needs were quite varied and difficult to anticipate. ****
  • Design complexity
    • Design and prototyping took longer, since elements were being recreated.
    • Designs were inconsistent, with each party creating UI elements “their way”.
    • Final design assets were not aligned with legacy code, which made it more difficult to integrate. Development took longer as teams spent more time figuring out how to implement new designs in old code.

organization

Capabilities

Timing

2018 - 2019

SITUATION

ACTION

RESULTS

Find this information interesting?​

There is more where that came from!

Scroll to Top