Driver App

Discipline: UX Design UI Design Interaction Design

Collaborators: Support Team Ownership Product Owner

Taking a pre-existing app (with a 1.5 star rating) built for updating and tracking shipments and make it more intuitive and increasing usability for truck drivers.

driver wireframes

User Stories

As a truck driver, I need to be able to update the shipment I'm carrying as quickly and easily as possible. Updates I need to be able to make include updating arrival/departure times and being able to easily upload documents.

Original App Layout

Original home screen
Shipment details
Updating arrival times

My Role

I was the sole designer on this project, not only working to make the site more intuitive, but to implement our design system that was being used on our three other products, but not this one. I collaborated with the product owner, application support, and the development team.

The Approach

My approach started with me trying to use the app and seeing some obvious places for improvement. Next, I read every app review on the Google Play Store and the Apple App store. Then, I met with the support team. What did they hear most from users? Where were their pain points? What worked well, and what didn't?

user flow chart
Notifications are only available on certain pages

The Solution

Make the obvious changes like come up with a unified header so notifications are available on all pages. User testing would find the "not so obvious" pain points.

The Homescreen

There were a lot of things that could be improved with the homescreen layout. The border on the left side of the shipment felt more like a design choice than it did a warning for being late. At first glance the city (Indianapolis) looks like it could be where the shipment began, but it's actually the last place a check call was made.

Updating Details Screen

The details screen was primarily used as a way for drivers to update their status (i.e. "Unloading"). The obvious change here was to make the buttons less confusing. Here, we condensed the buttons down to one, and a drawer opened allowing users to update their status. The header was now consistent with the rest of the app, allowing users to receive notifications on any page. There's now a subheader consistenting up the driver's status, dead head miles and estimated time to arrival.

Updating Arrival Times

The original screen shows the importance of "Designing the Obvious." In this case "Lumper Charges" and "Comments: don't looks like fields users should type in. In the case of lumper charges, users were confused on whether they were suppose to confirm whether or not they had lumper charges or if they were supposed to type in a dollar amount. (mention the time auto defaults to the current time if the user wants to use it instead of having to check a box)

Uploading Documents

The original document upload screen had usability hurdles, in that users could only upload one image per document. The issues being, some documents were more than one page.

Original document upload screen
Now you can tie multiple images (multi-page docs) to one document.