DAT TruckersEdge

WHAT IS TRUCKERSEDGE?

TruckersEdge is a digital freight-matching marketplace that is one of DAT Solution’s flagship products. It has over 15,000 daily active users. It is one of the oldest loadboards that truckers use on a day-to-day basis.

PROBLEM STATEMENT

TE was on a legacy platform and needed to be re-platformed on Angular and redesigned using DAT style guide (based on Material Design). The redesign included some brand-new features and workflows in addition to the existing features.

MY ROLE

Lead UX Designer working on the SCRUM product team, cross-collaborating with developers, the PM and the QA team. Worked with our UX Researcher to perform usability studies and SUS tests.

My main areas of responsibility were:

• Management (weekly design reviews and sprint user stories)

• UX analysis (user flows and personas)

• Design (Web application, Mobile responsive site, branding)

• Wireframing and prototyping (basic flow and interactions)

• Dev and QA Hand-off (hi-fi mockups, assets)

Users and Audience

The two primary users of the application were Truckers (including owner-operators and contract drivers) and Freight Brokers. They form the two sides of the marketplace - advertising loads and trucks and looking for jobs and drivers.

Process

Understanding our users

Truckers are hard to reach users. They are mostly on the road and when they're back from their trip, they're busy looking for the new load to take on their next trip. They also have to deal with a lot of hurdles as they deal with multiple clients and shipping companies.

Along with the UX Researcher, we visited Truckstops and spoke to Truckers about their experience and process for finding loads. I also visited freight broker companies to learn more about how they worked with our product. The easiest way was to tap into the wealth of knowledge from our sales and support employees that had been with the company and interacted with our users for over 20 years.

Journey mapping and user flow

Trucker and Broker Journey maps and personas were created and established as a baseline for all design decisions. This data came from our UX Researcher's prior research sessions. There were regular check-ins with the Engineering team and PM to ensure tech feasibility.

Wireframing and initial designs

I built on the existing initial designs using the insights we got from the user research. I also made sure the designs fit the user journey and also worked well with the previous design of the application.

Using DAT Material Design library

Drawing from Google Material Design, DAT Design System helped simplify the design process. It also sped up the development process without having to rebuild the wheel, using Angular Material components.

User's familiarity with Material components across mobile and web meant that we could use patterns and conventions without much introduction.

Rethinking some custom components

Some of the UI components were custom-made for the DAT product suite. Multiple select dropdown menu with tabs was one of the custom components that was designed to accommodate the equipment field. However, having to upkeep the component every time Angular Material library was updated proved to add additional overhead to the dev team.

Replacing it with simpler and non-custom components proved to be not only easier for the user to understand but also for the dev team to upkeep.

Prototyping and Testing

Working with our UX Researcher, I defined the flows and features that needed to be tested. These user flows were made into clickable prototypes and if, it was one screen, a high-fidelity mockup. Invision and later, Figma was used to create clickable prototypes. They were used to test the usability of the application at major trucking shows. SUS was used as a primary method.

We also set up a survey/interview booth during Driver Appreciation days at a local Truckstop to conduct formal interviews and surveys that helped learn what features matter and to test the initial designs. We used Validately to conduct in-person moderated testing. We used scheduled online sessions to test out prototypes and gather feedback about high-fidelity mockups.

Based on the feedback from the testing, the product team and I had to decide whether a feature was ready to be put into a sprint for development or the design needed more refinement.

Dev hand-off and participation in the sprint

Dev hand-off was done using Invision and Figma. I was part of sprint planning so that I knew what went into a particular sprint. Regular conversations with the PM and check-ins with the QA tester helped keep the design and development in sync.

Iteration and validation

Customer feedback was always part of iterations of the design. There were times when the user feedback was completely different from what we had assumed and it meant going back and relooking at how a particular feature was laid out.