Driver Mobile App

Truck Driver Mobile App

Duration: 4 years (Mar 2021 – Present)     •     Timeline: 2-week sprint cycle     •     Project Length: 4 years
Transportation · Mobile App UI/UX Case Study

All-In-One Driver App for Freight, Pay, Routes & Real-Time Support

Enterprise driver mobile app designed to centralize loads, documents, pay, and support in a single experience. As Lead Senior UI/UX Designer, I owned the end-to-end lifecycle—from discovery and journey mapping to Figma system, accessibility, and analytics instrumentation.


RoleLead Senior UI/UX Designer (research → launch)
PlatformiOS & Android · React Native
Timeline3 releases · 12+ months
ToolingFigma, Jira, GA4, Hotjar
Driver mobile app home dashboard UI
Driver Home Dashboard
A single starting point for drivers to see their next load, route, weather, messages, and pay—all in one glance.
+72%
App adoption (6 months)
−35%
“Where’s my load?” calls
−41%
Missing / bad POD docs
+21
Driver NPS lift

Research & discovery

Methods

  • Ride-along interviews with solo & team drivers to capture real-world workflows on the road.
  • Contextual inquiry with dispatch, safety, and payroll to understand cross-team dependencies.
  • Audit of legacy apps, SMS threads, and portals to map where information was fragmented.

Insights

  • Drivers were juggling 4+ channels (calls, SMS, printed trip sheets, portals) to understand each load.
  • Most “urgent” issues were actually gaps in visibility—status, appointments, and pay detail.
  • Drivers want clarity and predictability more than “features”; anything complex gets ignored.

Risks

  • Multiple business units and fleets had slightly different rules and workflows for loads and pay.
  • Cell coverage and device performance varied widely, requiring offline-friendly patterns.
  • Trust in prior tools was low, so adoption depended on visible reliability and transparent pay.

Problem

  • Drivers lacked a single, up-to-date source of truth for loads, routes, and stop details.
  • Documents and PODs were often late or incomplete, delaying billing and settlements.
  • Dispatch and driver support were overloaded with basic questions about pay, ETAs, and appointments.

Goals

  • Give drivers a clear “start of day” experience: what’s my load, where am I going, and when?
  • Reduce support calls by surfacing self-service answers inside each load and pay screen.
  • Increase on-time deliveries and document completeness without adding friction to the trip.

Driver journey we designed around

1
Plan the day

Driver logs in to see today’s loads, appointments, route, and any critical alerts.

  • Start-of-day summary with first load, time windows, and key stops.
  • Weather and routing indicators surfaced before leaving the yard.
2
Accept & prep

Driver reviews stop sequence, instructions, and equipment requirements before rolling.

  • Tap-through checklist for equipment, seals, and trailer notes.
  • Instructions grouped by stop with clear “must read” callouts.
3
Pickup & in transit

En-route updates, time changes, and issues are managed in one place.

  • Timeline view of stops with clear current / next state.
  • In-context messages from dispatch tied to the active load.
4
Delivery & docs

POD capture, signatures, and load exceptions are captured at the dock.

  • Guided POD capture with auto-enhance and blur detection.
  • Per-stop document checklist to avoid missing pages.
5
Pay & home time

Driver reviews settlement, bonuses, and home-time plan without calling payroll.

  • Trip-by-trip pay breakdown with clear line items.
  • Projected settlement and upcoming home-time visible at a glance.

User journey map — steps & emotions

Observed emotions during moderated tests and pilot launch across core driver tasks.

😀Delight 🙂Confident 😐Neutral 😕Confused 😣Blocked 😌Relieved
1
Open app & orient

Driver launches the app at the start of the day to see what’s on deck.

🙂Confident
  • Home shows next load, ETA, and important alerts in one card.
  • Clear “Today” vs “Upcoming” split reduces scanning effort.
2
Review load details

Driver checks pickup, delivery windows, and special instructions.

😐Neutral
  • Stop list shows addresses, appointment types, and gate codes.
  • “What’s expected” section summarizes key requirements.
3
Pickup & dock

At the shipper, the driver checks in and loads freight.

😕Confused
  • Dock details and phone numbers surfaced on the active stop.
  • We added clearer cues after testing showed missed instructions.
4
Delivery & POD

Driver captures signatures and paperwork at delivery.

😌Relieved
  • Camera flow guides angle, cropping, and quality in real-time.
  • Inline “Looks blurry?” prompts reduce rejected documents.
5
Pay review

After the trip, driver verifies pay and mileage.

😀Delight
  • Pay breakdown card ties each line item back to loads and stops.
  • “Report an issue” opens a guided, structured support flow.
6
Home time & planning

Drivers look ahead to home-time and future loads.

🙂Confident
  • Home-time requests and approvals visible alongside upcoming loads.
  • Reduced uncertainty about when they’ll be back with family.
Emotion curve over a typical trip Higher = more positive sentiment & confidence
Authentication · Mobile UX

Driver login & 2-way authentication — secure mobile access (5 screens)

This flow highlights how drivers securely sign in from the cab—using mobile-friendly forms, clear error states, and 2-way authentication that balances security with speed.

Driver mobile app welcome and sign-in screen
1 Launch & welcome
Branded welcome with clear actions

Drivers land on a focused welcome screen with “Sign in” and secondary help links. Typography, contrast, and spacing are tuned for quick scanning in the cab.

Driver mobile app username and password form with mobile keyboard
2 Enter credentials
Mobile-first username & password form

Email and password fields trigger the right OS keyboards, include show/hide password, inline validation, and accessible labels for screen readers and switch controls.

Driver mobile app two-factor method selection screen
3 Choose 2-way auth
Select verification method

Drivers pick SMS code, authenticator app, or push notification. Each option explains speed and reliability so drivers choose what fits their device and coverage.

Driver mobile app one-time passcode entry screen with countdown and resend
4 Verify one-time code
OTP optimized for mobile input

A 6-digit OTP screen uses auto-advance fields, numeric keyboard, countdown timer, and a clear “Resend code” pattern. Errors are explained in plain language with no jargon.

Driver mobile app biometric and remember device setup screen
5 Trust device & biometrics
Biometric & “remember this device” setup

After first successful login, drivers can enable Face ID / fingerprint and choose to trust the device for a limited time window—reducing friction while preserving security.

−38% Login-related support calls from drivers
+62% Drivers using biometrics for daily sign-in
−29% Failed login attempts / password lockouts
Load board · User journey

Load Board search — driver user flow (5 screens)

This flow walks through how a driver finds and books their next load in the mobile app—from search filters to confirmation. Use these screens to highlight the end-to-end experience in your portfolio.

Driver mobile app Load Board search screen with filters
1 Open Load Board search
Search from driver home

Driver taps Load Board from the home screen and sees saved search presets with origin, radius, and date range pre-filled.

Driver mobile app Load Board filter sheet
2 Refine filters
Apply filters that match preferences

Driver adjusts filters for miles, rate, equipment, and home-time preferences, then saves the combination as a reusable preset.

Driver mobile app Load Board results list
3 Scan results list
Compare loads by pay, miles & timing

Card-based results surface route, rate, distance, and timing up front so drivers can scan and shortlist the best options quickly.

Driver mobile app Load Board load details screen
4 Review load details
Open details before committing

Dedicated details screen shows stops, appointment windows, special instructions, and estimated pay so drivers can make an informed decision.

Driver mobile app confirm and book load screen
5 Confirm & book
Book load & return to trip view

Driver confirms the load, sees a success state, and is taken back into the trip view with their new assignment clearly marked as “Next up”.

−27% Time to find a desirable load
+34% Loads booked via self-service Load Board
−22% Dispatch calls about “available freight”

End-to-end UI/UX journey & outcomes

The app is structured around the real trips drivers run every day. Each stage of the journey has explicit UX improvements tied to measurable metrics.

Journey stage UX improvements Impact & KPIs
Plan the day Start-of-day dashboard with today’s load, appointments, and route; clear separation of “Today” vs “Upcoming” and high-signal alerts (weather, detours, documents).
  • +18% improvement in on-time arrival to first stop.
  • Reduced “What am I doing today?” calls into dispatch.
Execute load Timeline-based load view with current / next stop, tap-to-call, and in-context messages pinned to each load.
  • −35% reduction in generic status calls (“Am I on time?”).
  • Faster routing of issues to the correct team (safety, fleet, customer).
Documents & POD Guided camera flow with auto-enhance, blur detection, and per-stop document checklists.
  • −41% fewer rejected or missing PODs.
  • Shorter billing and settlement cycle times.
Pay & settlements Trip-based pay details, projected settlement, and structured “Report an issue” flow that captures load, stop, and context automatically.
  • Fewer payroll disputes and one-off clarifications.
  • Measured +21-point lift in driver NPS after adoption.

Analytics, events & feedback loops

To measure impact and guide iterations, I defined an event model for GA4 and created dashboards aligned to driver and operations KPIs.

Area Key events What we measured
Home & orientation
  • home_view (with fleet, role, and time of day)
  • cta_tap (call dispatch, open load, open nav)
  • Daily active drivers & depth of engagement.
  • Which CTAs are most used at start-of-day.
Load execution
  • load_open, stop_expand, instruction_view
  • message_send with load context
  • Correlation between instruction views and on-time performance.
  • Drivers / fleets generating most support load.
Documents & POD
  • pod_start, pod_retry_blur, pod_submit
  • How many PODs need a re-capture due to blur or missing pages.
  • Time from delivery to complete, usable documentation.
Pay & issues
  • pay_view, settlement_view
  • pay_issue_start, pay_issue_submit
  • Frequency and type of pay disputes across fleets.
  • Drop-off in pay-issue flow (are issues being resolved in-app?).

Qualitative feedback from driver councils and Hotjar in-app surveys validated where to invest next: home-time visibility, lane preferences, and better surfacing of repeat stops and “favorite” routes.

Design system highlights

Color & density

Brand and accent colors optimized for cab environments (glare, low light) with AA contrast. Components tuned for touch targets at 44px+.

Typography & layout

Type scales and clamp-based headings for small devices. Card-based layout keeps critical info near the thumb zone.

Components & states

Status chips, load cards, message previews, alert banners, and document states built as reusable variants to support future features.

Accessibility & inclusive design

AreaStandardStatusNotes
Color & contrast WCAG 2.2 AA Met High-contrast themes for cab glare; all text & icons meet AA contrast.
Touch targets 2.5.5 Met Minimum 44px touch targets; thumb-zone placement for primary actions.
Keyboard & switch 2.1.1 Met Flows are navigable via external keyboard / switch controls for some drivers.
Semantics & labels ARIA / HTML Met Descriptive labels, roles, and accessible names on all interactive elements.
Motion & haptics 2.3.1 / prefers-reduced-motion Met Subtle motion only; respects OS “reduce motion”; haptics limited to key confirmations.
Offline / low-bandwidth Robustness Review Critical details cached locally; additional work planned on error states in dead zones.
Let’s design for the people moving your freight

Need a Senior UI/UX designer for driver experiences?

I help transportation and logistics teams build driver apps that reduce friction, cut support calls, and earn driver trust—backed by analytics, accessibility, and strong UI systems.