uI design & Graphic Design / 2023

Daimler Truck Design System

Design System

I was hired in April 2023 to help build out a user experience center of excellence at Daimler Truck North America. My first task was to build a design system. I used the atomic design approach for simplicity. I used the React Material UI library as a reference as we had several projects using React as the code base and cross referenced a style guide provided by Daimler Truck Germany as we were aiming for global usage. It took 2 months to create the pre-prototyped elements that corresponded to both systems.

I tested the design system with several UX designers throughout the company and incorporated their feedback in the design system. I also wrote and designed a 50 page UX handbook for internal use educating users on all aspects of the practice and a project template with the design system already published into the file. The design system, handbook, and project template are in use as of October 2023.

Atomic elements for the design system
Headline, paragraph, buttons, and link typographyColor blocks with RGB and hex codes
Array of buttons for the Daimler design system with notationDesign system elements to create login and other modals
Form fields with multiple states for the design systemVideo and audio players for the design system
UX Handbook

I wrote and designed a handbook to assist the design system in expanding understanding of UI/UX at Daimler Truck North America. The handbook is a high-level overview of UX and caters to several audiences - product owners, project managers, developers, and designers. Along with information on the how and why, I included an extensive glossary on UX terms so non-designers can understand designer speak to a degree. For designers, I defined some best practices so that all Daimler Truck design files can be edited easily by other design team members.

The publication is created in InDesign and exported as an interactive PDF. It is hosted in a shared environment and labeled for version control.

An electric truck with Daimler UX Handbook text over itVision page from UX handbook
UX handbook page covering design thinking methodologyUX Handbook page showing different wireframe types