Steve LaFrance's Portfolio

Initially, the application relied on plain text to explain why content was missing or what action users should take. We shifted this approach to include helpful, and sometimes playful, illustrations paired with more engaging, user-friendly text. This transformation changed the tone from ‘nothing to see here’ to a more inviting ‘if there were something here, this is what you’d do.’

The notifications in CHEC, while functional, lacked a sense of warmth or helpfulness. They often came across as too ‘default’ or impersonal. This led us to review and revise the headers, aiming to make them feel more human and approachable. However, when we proposed these changes, we were careful to ensure that the new tone didn’t undermine the clarity or urgency of the information being presented.

For many years, the CHEC application used a basic, off-the-shelf React animation to indicate content loading. However, during discussions about opportunities to further develop the brand, the loading animation was identified as an area for potential improvement.

Daimler Truck North America primarily manufactures “cab and chassis” vehicles, which serve as a flexible platform for customers to build custom bodies tailored to various industries. The concept of “building” a vehicle quickly became a central theme for the brand, inspiring the creation of a new visual language to represent this process.

The updated loading animations, which reflected this theme, were met with widespread enthusiasm from users. The team frequently received positive feedback, with users expressing delight over the new animations and even suggesting new vehicle types they would like to see added.

The CHEC tool has evolved to integrate with and handle data from a variety of external sources. However, due to infrastructure limitations, the requested data is not always received or transmitted quickly enough to meet the timing requirements set by web browsers. As these issues surfaced, it became evident that users were receiving very little assistance when an error occurred.

In collaboration with the Product Servicing Team, a set of helpful troubleshooting steps was created to guide users in reporting errors. These instructions were designed to clarify what information needed to be provided when submitting a report. Over time, this text was refined based on observed user behavior to improve the quality and usefulness of the error reports submitted.

To further enhance the user experience, six illustrations were designed to be displayed when an error occurred. The illustration shown is randomly selected, with the goal of surprising the user and adding a touch of humor to what is typically a frustrating situation. When the error handling process was updated, these illustrations were incorporated into the solution.

Through testing, it was discovered that timeout errors were being grouped with other error types, causing confusion. To improve the user experience, and allow users to return to their previous content after a timeout, a modal approach was adopted specifically for this error type.