TruckX

Electronic logbook and trip planning app for truck drivers.

TruckX image

About

For this project, I worked directly with the CEO of a startup, to design a digital replacement for paper-based truck driver log books. My goal was to give the early stage startup the main user flows, along with the main body of design so they could start building a prototype.

Platform

Android and iOS

Time

Dec 2016 - Feb 2017

Role

  • Visual Design
  • Interaction Design
  • Prototyping

User stories

Today, truck drivers use logbooks to record their service hours and data about their truck. Every time they start a new delivery they have to fill out basic information about their truck and relevant dates using this log book.

The users of this app are truck drivers who would want to use an app instead of their paper log books. They have smartphones and are used to using apps. They want to make their driving experience simpler and remove the risk of damaging or losing their paper log book. They also are aware of OBD-II devices that can be used to gather telemetry data from their trucks (distance traveled, fuel consumption, etc) that can be used to provide data to this app.

Requirements

  • The design must be fully compliant with FMCSA and DOT regulations.
  • It must be easy to use by truck drivers.
  • It has to organize a large amount of data effectively on a small phone screen.
  • Allow drivers to plan their trips and add stops in their favorable locations ahead of time.
  • Allow drivers to add upcoming loads and see all the previous loads with relevant data they have completed.
  • It has to improve on the experience of using a physical logbook by putting together:
    • Data from an external OBD-II device connected to the truck which measures telemetry data (fuel consumption, distance traveled, time and duration of the truck’s movement).
    • The smartphone’s GPS information (location and time) with the telemetry data.
    • Google Maps API to search and add stops easily.

Truck driver paper logbook sheet

Paper log book sheet

Information architecture

I created this IA with the CEO to demonstrate the main structure and content of the app. This document was considered the main source of truth about what was going to be designed and built. I kept this diagram up to date through the design process with new information that needed to be added to the design.

Information architecture

Wireframes

This paper wireframe user flow was created to give the developers an idea of what needs to be built, so they could have started planning the construction of the app ahead of time.

Wireframes

Interaction design

I created this interaction flow with more details than wireframes to allow the engineering team to determine what it would take for them to build it. It includes notes about interactions of how components of the app behave when interacted with.

Click here to view large image.

Interaction design

Low fidelity prototype

In order to test out the user flow before designing the high fidelity app, I created the low fidelity prototype to get user feedback.

Low fidelity prototype gif

High fidelity mockups

My goals for the visual design were to keep app looking simple and easy to modify and extend the design.

High fidelity mockups

High fidelity prototype

Using InVision I created a high fidelity prototype that was delivered to the engineering team with the mockups in order for them to build the app.

High fidelity prototype gif

Featured projects

Abbey Road Studios

Abbey Road Studios
Open project