Driver App

Driver Mobile App

Duration: 6 months (Jun 2019 – Mar 2020)     •     Timeline: 10-week sprint cycle     •     Project Length: 10 months
Portfolio Case Study — Transportation & Logistics

Empowering drivers with intuitive tools that drive performance

Transform Ideas into Seamless Experiences! Explore intuitive mobile app designs that captivate users and drive results. Ready to elevate your app? Let’s create something extraordinary!

Columbus State University cover image placeholder
5 yrs
Senior UI/UX Designer and Leadership
End-to-End
Research → Launch
Driver • Mobile App
First CRST driver mobile app
Featured Case

Driver F1rst Mobile App - New Product

I owned the end-to-end product experience for CRST’s Driver F1rst mobile app—from research and information architecture to high-fidelity design and usability testing. Partnering closely with product management and engineering, I defined user goals, mapped driver workflows, and created a unified design system that scaled across iOS and Android.

My focus was transforming fragmented driver tasks—such as load assignment, pay visibility, messaging, and document submission—into a streamlined, driver-first experience built around clarity, speed, and trust. Through ride-along observations, journey mapping, and iterative prototype testing, I identified key friction points in daily use and designed solutions that improved usability, consistency, and accessibility across the entire driver ecosystem.

End-to-End Journey

Driver F1rst Mobile App — UI/UX Journey Map

1

Research & Discovery

Interviews, analytics, and field observations revealed how professional drivers interacted with dispatch, pay, and document features throughout their day.

  • Driver & operations interviews - uncovering real-world challenges faced on the road and at terminals.
  • Heuristic & competitive evaluation - benchmarking logistics and transportation apps to identify usability gaps and opportunities.
  • App analytics & workflow audits - reviewing in-app behavior patterns, session drop-offs, and feature adoption to guide design priorities.
2

Information Architecture & Strategy

Reorganized navigation and task hierarchy to align with how drivers naturally think and work on the road. Mapped key workflows—like accepting loads, viewing settlements, and uploading documents—into a cohesive, accessible experience that minimized friction and cognitive load.

  • App architecture & navigation model - simplified task flow across Loads, Pay, Documents, and Messages.
  • User flows & journey mapping - captured real driver scenarios from dispatch to delivery to identify pain points and priorities.
  • Content structure & task hierarchy - established clear visual patterns and consistent terminology to support faster task completion.

This redesign unified previously fragmented tools into a single mobile hub that helped drivers focus on what mattered most—completing their trips efficiently and confidently.

3

Wireframing & Prototyping

Created low- to high-fidelity wireframes to define core driver workflows and validate interaction models early. Each iteration focused on simplifying task completion, enhancing visibility of critical actions, and improving accessibility across devices and environments.

  • Low-fi to high-fi prototypes Established and tested end-to-end task flows for Loads, Pay, Documents, and Messages.
  • Interactive clickthroughs Validated tap targets, menu patterns, and progressive disclosure for smaller screens.
  • Accessibility checks (WCAG & mobile usability) Ensured color contrast, legible type, and ergonomic touch targets suitable for in-cab use.

Prototypes were continuously tested with active drivers, enabling the team to refine features, eliminate redundant steps, and confirm that every action could be completed safely and efficiently in real-world conditions.

4

Visual Design & Interaction

Developed a unified design system tailored to the driver environment—high contrast, clear hierarchy, and simple, recognizable iconography. Focused on designing interactions that minimized distraction and made critical information accessible at a glance.

  • Design tokens & mobile components — scalable UI kit for iOS and Android, including buttons, chips, tabs, and status indicators optimized for touch and motion.
  • Micro-interactions & feedback states — visual cues for task progress, confirmations, and offline actions to build driver confidence and reduce errors.
  • Typography & color accessibility — large, legible typography and contrast-safe color palette for bright and low-light conditions in-cab.

Each visual decision supported the app’s core goal—delivering a driver-first experience that blends clarity, usability, and performance into every screen and state.

5

Testing, Iteration & Launch

Conducted multiple usability tests with active CRST drivers to validate task clarity, navigation flow, and in-app communication features prior to release. Feedback directly informed design refinements, ensuring every update addressed real-world conditions and user priorities.

  • Usability testing & ride-along validation — measured task completion and comprehension in authentic driving contexts.
  • Design QA & developer collaboration — partnered with iOS and Android engineers to ensure visual parity, responsive layouts, and accessibility compliance.
  • Post-launch analytics & feedback loop — monitored adoption patterns and in-app behavior to identify continuous improvement opportunities.

The result was a mobile app designed with, not just for, drivers—grounded in usability insights and validated through real-world performance after launch.

Outcome

Driver F1rst Mobile App — Results & Impact

The Driver F1rst mobile app redefined how CRST drivers interact with their daily workflows—making every action simpler, faster, and more transparent. The redesign created a unified experience that improved task flow, reduced confusion, and strengthened communication between drivers and operations teams.

+18%
Faster Load Assignment
Simplified navigation and clear CTAs reduced time-to-task across core workflows.
+35%
Faster Document Uploads
Improved image capture, compression, and upload feedback minimized failed attempts.
-20%
Support Tickets
Clearer language and visual hierarchy lowered help-desk volume.
+23%
Driver Retention Improvement
Improved usability and trust helped reduce turnover among active drivers.

Driver F1rst evolved from a functional tool into a trusted companion—an intuitive, responsive, and accessible app designed for real-world conditions that keeps drivers focused, informed, and connected.

Overview of redesigned pathways and templates
Overview of redesigned pathways and template system (sample composite).
Pay & Settlements Challenges
Before/after highlights for Find a Program task
2017 website
Before
100%
  • Confusing pay breakdowns with inconsistent terminology.
  • No historical comparison or context between pay periods.
  • Deductions and bonuses hidden deep within submenus.
  • Limited visibility into load-based earnings or adjustments.
  • Drivers lacked trust and clarity when reviewing weekly settlements.
After
68%
  • Clear, plain-language pay summaries with consistent terminology.
  • Historical view showing week-over-week comparisons and trends.
  • Transparent breakdown of bonuses, deductions, and reimbursements.
  • At-a-glance totals with quick access to detailed line items.
  • Visual indicators and contextual alerts that build trust and reduce confusion.
Workflow completion — “Assign & confirm a load”
Before/after highlights for Find a Program task
2017 website
Before
100%
  • Load details scattered across multiple screens and tabs.
  • No clear visual indicator of next required action.
  • Unclear or inconsistent “Accept” and “Decline” interactions.
  • Frequent backtracking between messages, loads, and dispatch updates.
  • Delays in confirmation due to redundant steps and hidden CTAs.
After
68%
  • Unified “My Loads” dashboard with real-time status and clear priorities.
  • Single-screen workflow for review, accept, and confirm actions.
  • Prominent, color-coded CTAs with confirmation and undo options.
  • Contextual status chips (“Assigned,” “In Transit,” “Delivered”) for quick scanning.
  • Seamless integration with messaging to reduce confusion and turnaround time.
End-to-End

End-to-End UI/UX Journey & Outcomes

Journey Stage Before After Impact
Discovery Field Research Assumptions about driver behavior; limited insight into real in-cab usage. Ride-alongs, interviews, and analytics mapped to daily workflows. Clear problem framing · prioritized scenarios that matter.
IA Navigation & Flows Fragmented menus; actions buried across Loads, Pay, Docs, Messages. Task-first IA with “My Loads” hub, consistent labels, and status chips. Fewer taps · faster decisions · less backtracking.
Design System & Patterns Inconsistent components; rework across iOS/Android. Tokenized system; reusable mobile components; platform parity. Quicker delivery · fewer defects · easier scaling.
Validation Usability & Data Opinion-driven decisions; limited task benchmarking. Prototype tests + post-launch analytics on core flows. Evidence-based iterations · higher adoption confidence.
Accessibility Mobile AA Mixed contrast; small tap targets; unclear focus. Contrast-safe palette, 44px+ targets, clear focus & semantics. WCAG AA alignment across driver-critical screens.
Messaging Safety & Priority All messages looked equal; hard to spot critical alerts. Priority badges, sticky safety alerts, quick replies, read receipts. Faster responses · reduced miscommunication.

UX Improvements Matrix

Area Before After Impact
Loads Assign & Confirm Details split across screens; unclear next action. Single-screen review + accept/decline + confirmation. Time-to-assign ↓ · fewer errors.
Pay Settlements Terminology mismatch; hidden adjustments; no history. Plain-language summaries; history compare; drill-downs. Trust ↑ · support tickets ↓.
Docs POD / Compliance No capture guidance; failed uploads; uncertain status. Edge detection, multi-page, progress, retry, offline queue. Upload success ↑ · rework ↓.
Messaging Ops & Safety Noise overwhelms critical info; long threads. Priority labels, sticky alerts, quick replies, search. Response time ↓ · clarity ↑.
Offline Performance Actions fail silently; unclear when to retry. Queued actions, clear states, background sync. Reliability ↑ in low-connectivity areas.
Nav Findability Nested menus; duplicated labels; backtracking. Task-first tabs + consistent labels + breadcrumbs. Wayfinding ↑ · cognitive load ↓.

Accessibility Compliance Checklist

Criterion Before Fix Status
Contrast AA (1.4.3) Sub-4.5:1 text in bright conditions. Contrast-safe palette and tokens. AA Pass
Touch Targets Small buttons; crowded lists. 44px+ targets; spacing rules. Implemented
Focus Indicators Low-visibility focus on inputs/CTAs. High-contrast rings on all actionable elements. Implemented
Landmarks Semantics Div soup; inconsistent roles. H1–H3 hierarchy; header/nav/main/footer roles. Implemented
SR Labels Ambiguous icon-only buttons. Accessible names; aria-labels where needed. Implemented
Motion Reduced Non-optional micro-animations. Respects prefers-reduced-motion setting. Pass
Offline States Silent failures; unclear retry patterns. Offline banners; queued actions; clear progress. Implemented
Forms Errors Placeholder-only labels; generic errors. Explicit labels; aria-describedby; inline errors. Monitor