Product: Carrier 360

Role: Senior UX Designer

Tools: Figma, Excel, PowerPoint

Methods: Product Research, Code Audit, Design Audit

​

TL;DR

• Design systems only work when products adopt them properly.

• 100% design system compliant products create a framework for rapid response to users’ needs.

• Product code and design audits should be completed to ensure compliancy.

• DS compliancy creates consistency and consistency is key to creating great products and user experiences.

​

Product Overview

Carrier 360 is one of J.B. Hunt's customer facing applications that allows Carriers (independent truck drivers and transportation companies) to find, book, and execute loads.

 

Discovery

Implementing a new design system is a challenge, especially when its purpose is to serve multiple applications within an enterprise solution. Integrating that new design system into an application that is not compliant with the previous design system and components is a much larger challenge. So where do you start? First, you must get a baseline as to the level of compliancy that application is adherent to. The goal here was simple: As a POC (proof of concept) for this new product auditing process, determine the design system compliancy of Carrier 360 in the following categories:

 

• Components

• Colors & Icons

• Typography

 

* Patterns, Accessibility, and Branding Guidelines will be considered at another time outside of this audit.

* For full context and to follow along while viewing this case study, you can download the following documents:

 

• Final Presentation

• Code Audit Results

• Design Audit Results

​

Conveying the Importance

Before digging into the process of this audit, it’s important to understand the full context of why this audit was being conducted. More so, it was extremely important at the time to convey to leadership exactly why a design system matters to us as an organization, our products, and our end users.

 

Design System Users: A lot of efforts were made by our UX organization switching from Adobe XD to Figma. Furthermore, a herculean effort was made by our design system team to ensure that our component libraries in Figma were representative of the components available and that they accurately matched the implemented code. By doing so, this builds the framework for rapid response to our users' needs. For a simple example: If we find in research that our users are having a hard time tapping buttons, we can quickly make this change in our design system library, connect our products to that new design system version, and then release an updated application. This rapid response only works with products that are design system compliant.

 

Product & End Users: I’ll make this one as simple as possible – Consistency matters. I’ll use the ‘Modal’ component that was being used in Carrier 360 as an example: At one point, Carrier was using 8 different types of modal windows… The cognitive load on our users shouldn’t be burdened by inconsistent user experiences. Design System compliance mitigates these inconsistencies and bad user experiences. J.B. Hunt is a Fortune 500 Company - its software should be representative of that status with premium user experiences.

 

Process

 

Code Audit: The code audit was conducted by our Expert Software Engineer and myself. This was done by reviewing code in Carrier 360 and documenting known instances of components. These components were then compared with the amount of those components that were design system compliant.

​

Design Audit: The design audit was conducted by myself. This was done by creating a custom ‘Audit Color Theme’ that was applied to a one-off design system version. This special audit theme was then passed into a test version of the Carrier 360 application. By doing so, this created an easy way to visually spot components that were compliant and non-compliant. Anything you see on screen using the traditional J.B. Hunt color theme is non design system compliant. Anything you see on screen that is black, white, or magenta, is design system compliant.

 

Results

After conducting the Carrier audit, the following design system compliancy scores were determined:

 

• Components: 14% Compliant

• Icons: 100% Compliant

• Colors: 100% Compliant

• Typography: 28% Compliant

 

The 4 most used components, Button, Toast, Card, and Modal were only 7% design system compliant.

 

Impact and Learnings

Although the numbers in our code audit were not as accurate as I would have liked due to the amount of custom code being used, in conjunction with the design audit, it became completely clear that Carrier 360 was not at all at the level of design system compliancy we would like. This lack of compliancy is ultimately being passed on to the end users’ experience. Research doesn’t always yield the results you’d like to see, but results are results. Before a problem can be resolved, you must recognize that a problem exist. By conducting this audit, it helped surface a problem and brought awareness to the problem.