Carrier Portal

Carrier Portal

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

Tenders, tracking, docs & settlements in one place

Enterprise carrier portal designed to centralize load tenders, real-time visibility, compliance documents, and settlements 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)
UsersCarrier owners, dispatchers, billing & compliance teams
PlatformWeb portal · Responsive React
Timeline3 phases · 14+ months
ToolingFigma, Jira, GA4, Hotjar
Carrier portal operations dashboard with tenders, tracking and settlements widgets
Operations dashboard
One starting point where carriers see new tenders, in-transit loads, document status, and settlements—without digging through email.
+64%
Portal adoption (first 6 months)
−32%
Email back-and-forth on tenders
−39%
Late / incomplete documentation
+19
Carrier satisfaction (NPS lift)

Research & discovery

Methods

  • Contextual interviews with carrier owners, dispatchers, and billing teams across fleets of different sizes.
  • Workflow mapping with internal broker / carrier reps to understand handoffs from tender to invoice.
  • Audit of legacy portals, spreadsheets, and email threads to see how work was really getting done.

Insights

  • Most carriers were managing freight across 3–5 systems (email, spreadsheets, TMS, portals, WhatsApp).
  • Key friction points were unclear tender requirements, missing docs, and unpredictable payment timelines.
  • Carriers wanted reliable status and simple flows more than “features”—complex portals were abandoned.

Risks

  • Different carrier types (asset, brokered, owner-operator) had different compliance and payment rules.
  • Multiple legacy processes needed to co-exist during rollout; we couldn’t force “all or nothing” adoption.
  • Trust in prior portals was low, so the new experience had to prove reliability quickly.

Problem

  • Tenders, tracking, documents, and settlements lived in disconnected systems and email threads.
  • Carrier onboarding and compliance reviews were slow, manual, and hard to track.
  • Internal teams were flooded with basic status questions about loads and payments.

Goals

  • Provide a single source of truth for carriers to manage tenders, execution, docs, and pay.
  • Reduce email and phone dependency by surfacing self-service answers in the portal.
  • Shorten time-to-onboard and time-to-pay while protecting compliance and data quality.

Carrier journey we designed around

1
Get onboarded

Carrier receives an invitation and completes onboarding without sending PDFs back and forth.

  • Guided onboarding checklist with clear requirements and real-time validation.
  • Progress indicators for profile, insurance, and compliance items.
2
Review tenders

Carrier sees a prioritized list of new tenders aligned to lanes and preferred equipment.

  • Saved search presets for lanes, rates, and timing preferences.
  • High-signal badges for “best fit”, “expiring soon”, and “preferred partner”.
3
Accept & dispatch

Carrier assigns a driver, accepts the tender, and aligns expectations with minimal friction.

  • Side-by-side view of tender requirements and carrier’s driver/equipment roster.
  • Inline checks for appointments, detention rules, and accessorials.
4
Track & deliver

Real-time tracking connects execution with what ops teams see in the TMS.

  • Status updates, ETAs, and exceptions aligned to stops and reference numbers.
  • Document tasks triggered by events (arrival, loaded, delivered).
5
Invoice & settle

Carrier uploads documents, submits the invoice, and tracks payment without calling in.

  • Guided invoice submission with required docs and fields clearly called out.
  • Payment timeline, statuses, and remittance history visible in one place.

User journey map — steps & emotions

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

😀Delight 🙂Confident 😐Neutral 😕Confused 😣Blocked 😌Relieved
1
Sign in & orient

Carrier logs in to see what needs attention right now.

🙂Confident
  • Dashboard highlights new tenders, loads at risk, and invoices needing docs.
  • “Today vs Upcoming” split reduces scanning across multiple tables.
2
Review tender

Carrier reviews rate, lane, requirements, and accessorial rules.

😐Neutral
  • Tender details call out requirements, time windows, and penalties clearly.
  • Lane and margin calculators help evaluate fit quickly.
3
Assign & accept

Carrier assigns a driver/equipment and accepts the load.

😕Confused
  • Early tests surfaced confusion around appointment dependencies.
  • We simplified the accept flow and added inline validations and helper text.
4
Upload docs

Post-delivery, carrier uploads POD and supporting paperwork.

😌Relieved
  • Document task list makes it obvious what’s missing vs complete.
  • Drag-and-drop, bulk upload, and auto-tagging reduce manual sorting.
5
Submit invoice

Carrier submits invoice and confirms settlement details.

😀Delight
  • Guided invoice form with validation before submission.
  • Instant confirmation with expected payment date and remittance method.
6
Track payments

Carrier monitors open, paid, and disputed invoices.

🙂Confident
  • Payment status filters and exports for finance teams.
  • Less guesswork and fewer “Where’s my money?” calls.
Emotion curve over a typical tender → pay cycle Higher = more positive sentiment & confidence
Orders Table · Compliance UX

Dispatcher-Ready Order Intelligence

Carrier portal onboarding overview with steps for profile, compliance and payments

Real-Time Orders Overview

The Orders table centralizes real-time shipment visibility with clear status signals, temperature monitoring, and stop progression in a clean, dispatcher-friendly layout. Search and filters help users quickly find priority loads, identify exceptions, and take action without digging through multiple screens.

  • One unified view of all active, in-transit, late, and completed orders.
  • Real-time data including temperature probes, stop counts, and next ETA.
  • Search + multi-filters for order status, arrival status, fleet, planning status, and temperature range.
  • Clickable order numbers reveal full order details, stops, and documents.
Carrier portal onboarding overview with steps for profile, compliance and payments

Real-Time Order Details Slideout

The order slideout brings together the timeline, live map, and load documents in a single, high-signal panel—giving dispatchers everything they need to troubleshoot, track progress, and communicate with customers without switching screens.

  • Chronological events: origin, pickups, arrivals, idle, detention, deviations.
  • Visual route progression with ETA markers and late/at-risk indicators.
  • Real-time truck location, speed, and ping history.
  • Quick access to BOL, POD, and required compliance docs.
Carrier portal onboarding overview with steps for profile, compliance and payments

User Management

The User Management area gives carrier admins complete control over account access with a simple, organized interface. Users can be viewed by registration status, assigned permissions, or removed entirely—all without needing support. Clear roles and visual cues make it easy to manage teams and maintain secure access across fleets.

  • Displays all active users with accepted invitations.
  • Shows acceptance date for audit clarity.
  • Role-based access (Admin, User) with clear visual tags.
  • Confirmation prompt prevents accidental deletion.
Carrier portal onboarding overview with steps for profile, compliance and payments

Invoices & Billing

The Billing / Payables workspace gives carriers a transparent, organized view of all financial activity—from paid invoices to unbilled loads and overdue payments. Clear search tools, visual summaries, and a detailed order-level breakdown make it easy to understand payment status, identify missing paperwork, and reconcile faster.

  • Universal search bar to quickly locate orders, invoices, or customers.
  • High-level dashboard summarizing the carrier’s financial posture.
  • Interactive pie chart for Paid, Unbilled, and Unpaid amounts.
  • Expandable rows allow quick access to attached documents (PODs, BOLs, invoices).
Carrier portal onboarding overview with steps for profile, compliance and payments

Alerts

Geofence Alerts allow operations teams to create custom safety, compliance, and routing zones directly on the live map. Users can draw polygons, define advisory or restricted areas, and instantly visualize alerts that impact their freight. With layered map controls and real-time event monitoring, dispatchers gain proactive visibility into high-risk zones before they affect a load.

  • Users can draw custom polygon shapes directly on the live map.
  • Flexible drag-and-drop anchors support irregular, multi-point boundaries.
  • Reduces risk by flagging dangerous or restricted routes early.
  • Weather, traffic cameras, and map layers can be toggled for deeper context.

End-to-end UI/UX journey & outcomes

The portal is structured around the real lifecycle carriers run every day. Each stage of the journey has explicit UX improvements tied to measurable outcomes.

Journey stage UX improvements Impact & KPIs
Onboard & profile Guided onboarding checklist with progress indicators, structured company profile and contact roles, and real-time validation on required fields and docs.
  • −43% reduction in time to onboard new carriers.
  • Fewer “What else do you need from us?” questions to ops teams.
Tenders & assignment Prioritized tender list with filters, badges, and lane presets; side-by-side assignment flow that surfaces requirements before acceptance.
  • −29% faster tender acceptance cycle times.
  • Improved match between load requirements and assigned equipment.
Docs & compliance Per-load document tasks, drag-and-drop uploads, status chips, and automated reminders for missing items.
  • −39% fewer loads missing critical documents at invoice time.
  • Shorter time from delivery to invoice-ready documentation.
Invoices & pay Structured invoice submission, payment status views, and a simple “Dispute / ask question” flow tied to specific loads and invoices.
  • Reduced payment status calls and ad-hoc spreadsheets.
  • Measured +19-point lift in carrier satisfaction (NPS) after rollout.

Analytics, events & feedback loops

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

Area Key events What we measured
Dashboard & orientation
  • dashboard_view (with role, fleet size, time of day)
  • card_click (tenders, docs, payments widgets)
  • Daily active carriers and depth of engagement.
  • Which widgets drive the most activity by role.
Tenders & loads
  • tender_view, tender_details_view, tender_accept
  • load_filter_change for lanes, equipment, and customers.
  • Conversion from tender views to acceptances by lane and customer.
  • Impact of presets and filters on tender response speed.
Docs & invoices
  • doc_upload, doc_error, doc_complete
  • invoice_start, invoice_submit
  • Time from delivery to complete documentation and invoice submission.
  • Where carriers dropped out in the invoice flow.
Payments & issues
  • payment_view, payment_filter
  • payment_issue_start, payment_issue_submit
  • Frequency and type of payment-related questions.
  • Effectiveness of the issue flow vs ad-hoc calls/emails.

Qualitative feedback from carrier councils and in-portal surveys guided the roadmap: better lane presets, multi-user carrier accounts, and clearer payment timelines.

Design system highlights

Color & density

Brand and accent colors tuned for long hours in front of monitors, with AA contrast for dense data tables and card-based summaries.

Typography & layout

Type scales and spacing optimized for ops and finance users who live in the portal. Sticky headers, frozen columns, and responsive tables keep critical data visible.

Components & states

Status chips, alert banners, task lists, and data cards built as reusable Figma variants to support new workflows without re-inventing the UI.

Accessibility & inclusive design

AreaStandardStatusNotes
Color & contrast WCAG 2.2 AA Met High-contrast table and card themes; all text & data viz meet AA contrast.
Keyboard navigation 2.1.1 Met Core flows (tenders, docs, invoices) are keyboard-navigable with visible focus states.
Semantics & labels ARIA / HTML Met Tables, filters, and action buttons use semantic markup and descriptive labels.
Responsive behavior WCAG 1.4.10 Met Portal adapts across laptop, large monitors, and tablets without horizontal scroll traps.
Error handling 3.3.x Met Inline errors explain issues in plain language; summary errors help in dense forms.
Future improvements Robustness Review Planned work on table personalization and preferences for low-vision users.
Let’s streamline your carrier workflows

Need a Senior UI/UX designer for carrier & partner portals?

I help transportation and logistics teams build carrier portals that reduce email chaos, shorten payment cycles, and increase adoption—backed by analytics, accessibility, and strong UI systems.