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.
The Cab
In the context of 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
Design Process
-
Requirements for new UI are provided.
-
Initial concepts are made, then narrowed down to 2 or 3 options, presented in low-fidelity mockups.
-
Shared with product group, expert operators, and UX architects. A concept is selected, and any necessary revisions are made.
-
A finalized deliverable is created.
-
A presentation-ready mockup is made for sign-off and final approval.
-
GUI specification is created and double-checked. Assets are handed off.
Or Figma is marked as “ready for dev”.
-
Perform UI audits to catch mistakes, and ensure proper implementation
Machine-Help Visuals
The problem:
Operators are afraid to interact with the machine or alter any settings, for fear of ruining a multi-million dollar piece of equipment. This can result in loss of productivity or accidental machine abuse.
Solution:
Tips and operator tutoring for difficult maneuvers or more advanced features
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.
Life-like
+ Accurate Detail
- Distracting color
vs.
Greyscale
+ Accurate Detail
+ Easy to Highlight
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
Visual representation of the machine’s live status:
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
Increase / Decrease Component
Using a radial design, I was able to mimic the rotation of the physical control knobs use in the cab. This unifies the physical and digital user experience. The component’s built-in buttons also provide touch capability, with generously sized touch areas.
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).
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 - made up of safety and compliance advocates, expert operators, product managers, and designers - 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.
Radio Graphic Element
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 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.
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.
Theme Sheet Attributes
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. This allows for altering the colors of the entire UI with one simple drop down selection.
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.
The operator should not be distracted by the display, since the work to be done and safety hazards are found in their surrounding environment.