Building helpful and informative graphics for an in-cab environment.
User Interface (Professional Projects)
My time at Caterpillar utilized my skillset for a variety of projects: Early conceptual UI work and exploration, 3D implementation, Asset Management, Code Alteration, Iconography Generation and cataloging, as well as Final design and GUI specification delivery.
Due to the value of the intellectual property, much of my work remains confidential until public release.
My Role:
Spanning across numerous projects, my responsibilities can be roughly divided into 4 categories.
1 - Visual Representations Definition
2 - Symbol generation, approval, delivery, and documentation.
3 - Web Component creation and delivery
4 - Design System Creation and Maintenance
The Cab
In the cab, primary displays are directly in front of the operator, and secondary displays are located on a pillar to the side.
source: cat.com
Placement requires interaction primarily with the right hand, specifically the thumb or pointer finger. The bumpy, unstable environment of a machine cab, leads to the operator stabilizing his hand on the display’s side, corner, or bottom.
As a result, the most accessible touch areas are in an L-shape at the lower right side of the display.
Defining Visual Language
A need for specific visuals to aid in teaching operators how to properly control and interact with the expensive, high tech machines, in the safest and most efficient manner. Failure to utilize the machine can result in loss of productivity or unintentional mechanical abuse.
The problem:
Tips and operator tutoring for difficult maneuvers or advanced features
Solution:
Life-like
+ Accurate Detail
- Distracting color
vs.
Greyscale
+ Accurate Detail
+ Easy to Highlight
Using a CAD model, ensured a true-to-life representation of the componentry. A greyscale rendering style with exaggerated edges was selected for its definitive (though not distracting) appearance.
Blue was determined to be the highlight color, due to its neutral denotation, as well as the fact that it is a highly visible color among the most common types of colorblindness. A subtle glow was added to place further emphasis.
The callout is highlighted, clearly defining a hierarchy.
15% enlarged component
Dark opacity layer to provide hierarchy
Info highlight
Greyscale image
Background
Machine Health Component
Working in the Venn Diagram between engineering capabilities and software constraints, I defined the visual language for machine health representation.
An enthusiastic group of engineers pushed to display all of the monitored readouts, while limiting display hardware was only capable of processing light and simplified graphics.
Dynamic machine status graphic:
Truck Cab + Bed individual roll angles
Necessary to avoid rollover
Green “safe zone” provided as a guideline (actually tipping point varies)
Tire Pressure Monitoring
Warn operator before a dangerous tire pressure causes an accident
Omissions
Perhaps more important than the elements of machine health shown, are the conscious decisions to avoid showing brake temperatures and differential lock activity. Both of which are monitored and provided by the engineering team, but deemed to be unnecessary and distracting pieces of live information.
Increase / Decrease Configurable Components
I fought for the departure from linear steppers in favor of a radial design. This mimics the cabs physical rotary control knobs, unifying the physical and digital user experiences. The component’s built-in buttons also provide touch capability, with generously sized touch areas.
The result was one graphic component, in a flexible and repeatable format, that could be interacted with on 4 different interfaces (touch, d-pad, navigational dial, and physical control).
The thoughtful construction allows for one increase/decrease component, through the use of variants, to fulfill the function of many use cases, such as temperature, fan speed, and volume controls (shown below).
Radio Graphic Component
The current generation of Caterpillar UI is most easily recognized by a stylized trapezoidal outline, internally referred to as the “Dogbone”. In order to continue to incorporate this design into the space-constrained displays, variants were produced, which nested additional features, providing functionality, while maintaining brand identity.
This graphic provides a clear indication of the selected audio source, while displaying the range of other available options. The design allowed for multiple methods of interaction via the touchscreen or a navigational dial.
Built into the branding element, this design has since received a patent.
Iconography
Vital to Caterpillar’s international nature, standardized icons aid users of all languages to navigate features within the displays. I led a symbols committee consisting of safety and compliance advocates, expert operators, product managers, and designers, in order to ensure new icons met the needs and concerns of all groups, before approving a new symbol for use across all of Caterpillar’s design systems.
To provide consistency within the library, sizing guides help standardize layout for each new symbol created.
A cache of common modifiers and icon add-ons, aid in building consistent size and location among similar symbols. Standardized line weights maintain a familial feel throughout the entire library.
The entire library of icons is categorized by machine, function, or use-case for easy discovery.
All new icons receive approval through safety standards, ISO requirements, + branding preferences, in order to properly represent the intended meaning.
Theme Sheet Attributes
*Actual CSS variables are confidential IP*
Defining the next generation of Caterpillar UI. Assigning variable names to use cases, and colors to said variables. The results provide multiple different theme variations for each single variable; Allowing one simple drop down selection to change the look of everything.
EXAMPLE
〰️
EXAMPLE 〰️
The Importance of Color
The utility of color within a cab environment, requires a mostly subdued, non-distracting color scheme. High contrast indicators and readouts utilize color only when communicating an important message to the operator. Likewise, light pollution from the display can be blinding in dark settings.
The operator should not be distracted by the display, since the work to be done and safety hazards are found in their surrounding environment.
Built with “read-at-a-glance” familiarity
Typography
The in-cab displays use Roboto, an easy to access typeface, equipped with a myriad of translations - essential for the international sales of Caterpillar machines. The condensed variant, slightly narrower, aids in fitting the necessary information within the small displays without requiring truncation.
The font has 2 main objectives:
Be compact, fit information without the need for excessive scrolling
Be legible from a distance (the displays are an arm’s reach from the operators).
As a result, minimum sizes are enforced to avoid strain or distraction.