UI/UX Case Study

Spotter ELD

A trip planner for US truck drivers that turns a regulated, paper-heavy task into one screen: enter a trip, get a compliant route and auto-filled daily log sheets.

Role
UI/UX, build
Domain
Logistics / compliance
Platform
Web app (live)
Tools
React, Leaflet, Canvas
Spotter ELD results screen with trip form, route map and stat cards
The result screen: trip inputs on the left, a live route with a colour-coded legend, and at-a-glance stats.
01Problem

Drivers plan routes and log hours by hand.

US truck drivers are bound by Hours-of-Service rules: limited drive time, mandatory breaks, and a 70-hour cycle. Most plan the trip in one place and fill out their daily log sheets separately, by hand. It is slow, easy to get wrong, and a wrong log is a compliance problem.

The design challenge

Take a dense regulatory task and make it feel like filling in three fields, without hiding the detail a driver actually needs to trust it.

02Goal

One input, a route, and the paperwork done.

The whole experience fits on a single screen. A driver enters current, pickup and dropoff locations plus hours already used, hits one button, and gets a mapped route with fuel, break and rest stops, plus daily log sheets generated for them.

03Empty state

Start with a calm, obvious first move.

Before any input, the screen guides rather than overwhelms: a simple prompt and a single clear call to action, so a first-time user knows exactly where to begin.

Spotter ELD landing and empty state
Empty state: one prompt, one action. No blank canvas anxiety.
04Interaction

Reduce friction at the point of input.

Location fields use autocomplete with a clear map-pin affordance and a live cycle-hours indicator, so the form fills fast and the driver can see their remaining hours update as they go.

Autocomplete location input with map pin
Autocomplete and a live hours indicator keep the form quick and legible.
05The hard part

A daily log that looks like the real thing.

The standout piece is the FMCSA daily log: a faithful, drawn-to-grid duty-status sheet, generated automatically from the planned route. Getting this to read like the paper form drivers already know was the difference between a toy and something they'd trust.

Auto-generated FMCSA daily log sheet
The auto-generated FMCSA log grid: the detail that makes the tool credible.
06Whole flow

Input to compliant trip, in one view.

Stops are listed chronologically and the route, stats and logs all update together, so the driver always sees the full picture without leaving the screen.

Full Spotter ELD overview
Everything in one place: route, stops, stats, and logs.
07Outcome

Shipped and live.

Spotter ELD is deployed and usable end to end, so it can be tried rather than just looked at. It's the project I point to when I want to show that I can take a genuinely complicated domain and make the interface feel simple.

Open the live app
Next case study
Streak