Caterpillar VST: Building the Design System

Overview

I built and maintained the design system for Caterpillar’s Value Simulation Tool, a platform for dealer support and sales enablement. It established shared components, visual standards, and interaction patterns for machine performance analysis, job-site modeling, and financial comparisons.

The Challenge

VST brings together complex tools with different data and workflow requirements. The challenge was to create components that were easy to use consistently while remaining flexible enough to support specialized interfaces.

Context + Constraints

As the team’s sole UI designer, I needed a system that supported efficient design work and clear developer implementation. It had to accommodate dense tables, charts, configuration forms, and responsive layouts within an existing Angular application.

Design Decisions

I used modern Figma features, including component slots, to balance ease of use with flexibility. Slots allowed reusable components to accommodate different content while preserving their shared structure and styling. This made components adaptable to domain-specific workflows without requiring a separate variant for every content combination or detaching instances to customize them.

Implementation + Collaboration

I maintained the Figma components and templates and worked with front-end developers to translate shared patterns into Angular components and consistent HTML and CSS. The system provided a common reference for discussing component behavior, layout, and feature-specific requirements.

The "So What"

The system provided a reusable foundation for VST while allowing individual workflows to retain the functionality they needed. Component slots helped make flexibility part of the component architecture. The central lesson is that a useful design system makes consistent implementation straightforward and accommodates variation deliberately.