HOME
CATERPILLAR
Lead Product (UX) Designer
ZACK BAUMEL
Intro
Desktop UI
Mobile UI
Prototypes
Wireframes
Design System
Documentation

Caterpillar ®

UX/UI
UX RESEARCH
VISUAL DESIGN
WEB DESIGN
DESIGN SYSTEM
PROTOTYPES

Senior Product Designer | 2018-2020 I consulted with Caterpillar and led UX/UI design for their International product website, Cat.com.

Get in Touch:

Desktop UI

Caterpillar's core product catalog experience was designed to give content authors a versatile range of UI components to create with. Each of the 70+ countries where Cat is present has their own marketing teams, so each page/component was designed for layout flexibility and accessibility.

Mockups of homepage variations authors can create with re-usable UI components

Mockup of an interactive re-usable UI component to showcase product features

Mobile UI

In 2020, I was responsible for the design of Cat.com's new mobile-first user account features. Tasks included designing a comprehensive set of form elements and content components that could be personalized based on user preferences and location.

Mockups showing sign-in components, sign up form, and account menu on mobile

Mockup of responsive homepage viewed on a tablet

Mockup of the account menu showed on a mobile device

Interactive Protoypes

Once integrated with the Caterpillar core teams, I introduced new software such as Webflow and Miro. Using Webflow, I created interactive prototypes to validate UI patterns, test micro-interactions, and share production code specifications with developers.

Video screen-capture of interactive Webflow prototype

Wireframes & Userflows

Low fidelity wireframes and userflows were created and presented to stakeholders. High fidelity wireframes were shared with developers for assessing feasibility and development timelines.

Wireframes and user-flows showing exploration of advanced product preferences and login interactions

Design System UI Assets

I was co-responsible for managing Caterpillar's comprehensive UI design system, built in Sketch. Based on Atomic Design principles, each symbol/component was built with states and overrides that made design exercises rapid.

Video screen-capture of component library versatility using Sketch

Design System Documentation & Specs

When design assets were ready for handoff, documentation was prepared for various teams. Highly detailed specifications were created for developers, and content/component guidelines were created for content editors.

Screenshots of UI component usage documentation for developers and content authors

Screenshot of annotated micro-interactions for developer reference