Freight Carrier & Broker Operations Platform
Transforming carrier workflows with end-to-end digital efficiency
Enterprise carrier portal built to unify load tenders, real-time freight visibility, compliance documentation, and settlements into one seamless experience. As the Lead Senior UI/UX Designer, I guided the full product lifecycle—from discovery and workflow mapping to Figma system creation, accessibility standards, and analytics instrumentation.
One starting point where carriers see new tenders, in-transit loads, document status, and settlements—without digging through email.
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
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.
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”.
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.
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).
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.
Carrier logs in to see what needs attention right now.
- Dashboard highlights new tenders, loads at risk, and invoices needing docs.
- “Today vs Upcoming” split reduces scanning across multiple tables.
Carrier reviews rate, lane, requirements, and accessorial rules.
- Tender details call out requirements, time windows, and penalties clearly.
- Lane and margin calculators help evaluate fit quickly.
Carrier assigns a driver/equipment and accepts the load.
- Early tests surfaced confusion around appointment dependencies.
- We simplified the accept flow and added inline validations and helper text.
Post-delivery, carrier uploads POD and supporting paperwork.
- Document task list makes it obvious what’s missing vs complete.
- Drag-and-drop, bulk upload, and auto-tagging reduce manual sorting.
Carrier submits invoice and confirms settlement details.
- Guided invoice form with validation before submission.
- Instant confirmation with expected payment date and remittance method.
Carrier monitors open, paid, and disputed invoices.
- Payment status filters and exports for finance teams.
- Less guesswork and fewer “Where’s my money?” calls.
Dispatcher-ready order intelligence
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.
- 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.
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.
- 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.
User management
The User Management area gives carrier admins complete control over account access with a simple, organized interface.
- 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.
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.
- 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).
Alerts & geofences
Geofence Alerts allow operations teams to create custom safety, compliance, and routing zones directly on the live map.
- Users can draw custom polygon shapes directly on the live map.
- Flexible drag-and-drop anchors support irregular boundaries.
- Reduces risk by flagging dangerous or restricted routes early.
- Weather, traffic cameras, and map layers can be toggled for deeper context.
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 |
|
|
| Tenders & loads |
|
|
| Docs & invoices |
|
|
| Payments & issues |
|
|
Qualitative feedback from carrier councils and in-portal surveys guided the roadmap: better lane presets, multi-user carrier accounts, and clearer payment timelines.
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. |
|
| Tenders & assignment | Prioritized tender list with filters, badges, and lane presets; side-by-side assignment flow that surfaces requirements before acceptance. |
|
| Docs & compliance | Per-load document tasks, drag-and-drop uploads, status chips, and automated reminders for missing items. |
|
| Invoices & pay | Structured invoice submission, payment status views, and a simple “Dispute / ask question” flow tied to specific loads and invoices. |
|
Accessibility & inclusive design
| Area | Standard | Status | Notes |
|---|---|---|---|
| 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. |
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.
Hire a UI/UX Designer who delivers results through research and prototyping
I design scalable, data-informed digital experiences that simplify complex workflows and drive measurable business outcomes. From research to high-fidelity design prototypes, I help product teams ship solutions that reduce friction, boost adoption, and perform reliably at enterprise scale.
