Chrisevolve
← back to work
PayCargo Mobile · 2024

Designing the PayCargo mobile app from scratch.

I led the end-to-end design of PayCargo's first mobile app, from scratch. AP teams approve payments from the road; truckers, drivers, and field operators pay on-site the moment cargo is ready at the terminal or warehouse. PayCargo finally runs where the cargo does.

My role
Lead Product Designer End-to-end ownership
Team
Me — design lead PM · EM · 2× iOS · 2× Android · 2× BE · Data
Timeline
2024 Q2 → 2024 Q4 9 months
Platform
iOS + Android · 0 → 1
at a glance
The setup
the problem
Every PayCargo payment ran through a browser on a laptop. AP teams couldn't approve from the road, and an entire audience of truckers, drivers, and field operators at terminals and warehouses had no way to pay on-site. Cargo sat at the dock until someone could get back to a desk.
The goal
Build PayCargo's first mobile app: fast enough for AP teams to approve from anywhere, and field-ready for the people physically standing next to the cargo.
Success metrics
  • AP teams can approve a payment in under 30 seconds
  • Drivers and field ops can pay on-site without prior training
  • Time from cargo-ready to payment-confirmed drops at the dock
Live · iOS + Android
01 · Pay at the gate, container in hand
In-product impact
858+
New user segment activated
Truckers + field operators onboarded in the first 6 months.
58%
On-site payments
Mobile transactions originated at terminals, warehouses, gates.
−62%
Time-to-payment
AP users on the move vs. desktop equivalent.
Business impact

What it meant for the business.

New user segment activated
858+
858+ truckers and field operators onboarded in the first 6 months, a user group the desktop product had never been able to serve. 41% of monthly active mobile users now come from outside the traditional AP-team segment.
On-site payments at point of release
58%
58% of mobile transactions now originate at a terminal, warehouse, or facility. These are payments that previously waited hours or days for someone at a desk.
Speed-up for existing AP users
−62%
−62% time-to-payment for AP users on the move vs. the desktop equivalent. Median time from notification → confirmed payment: 47 seconds.
02 · Problem framing

Why we built it.

PayCargo's web product served the AP manager at her desk. But freight doesn't run from a desk, and a whole group of users (truckers, drivers, field operators) never sat at one. Until the carrier gets paid, cargo sits at port racking up demurrage by the hour.

Three signals made the mobile case undeniable: 47% of web sessions started on mobile (and abandoned within two screens), an entire user segment couldn't use PayCargo without a laptop, and 18% of weekly support tickets contained phrases like "on the road," "at the terminal," or "couldn't get to my computer." The opportunity wasn't "PayCargo, but smaller." It was building the tool for the person standing next to the cargo.

Demand signal: mobile session abandonment by device class, alongside a pull-quote from tagged support tickets
100%
Demand signal: mobile session abandonment by device class, alongside a pull-quote from tagged support tickets.
Research

Three angles on the same problem.

With no existing mobile product to evaluate, I ran three research tracks in parallel: competitor analysis (how the job is solved on competing apps), in-house analytics on PayCargo's mobile-web traffic, and contextual interviews with AP teams, drivers, and field operators in their actual environments. Nothing made the roadmap unless all three pointed at the same friction.

1Step 1

Competitor analysis

I audited (a) freight and logistics mobile apps (CargoWise, Flexport, CargoSprint), (b) approval-workflow apps in adjacent B2B fintech, and (c) field-operative apps from outside fintech (ServiceTitan, Onfleet) to understand how mobile patterns translate to high-stakes, time-sensitive, professional contexts.

The output: a what to adopt, what to reject, what to invent map ranked by relevance to the cargo job.

Competitive audit board: apps clustered by pattern, with annotations
100%
Competitive audit board: apps clustered by pattern, with annotations.
2Step 2

Mobile demand signals in Amplitude + Support

Even without a mobile product, the demand signal was already in our data. I ran segment analysis on web users by device class, pulled abandonment funnels for mobile traffic, and worked with Customer Success to tag and surface support tickets that mentioned mobile or field contexts.

Within a week we had quantified evidence that 47% of users were already attempting the job on phone, and bouncing.

Mobile session funnel + support-ticket theme cluster
100%
Mobile session funnel + support-ticket theme cluster.
3Step 3

Contextual interviews in the field

For the desktop case, interviews validated hypotheses already shaped by data. For this project, interviews were the primary evidence. I ran 14 contextual interviews across truckers, brokers, dispatchers, and AP managers, with a mix of at-port visits, on-site walkthroughs, and ride-alongs.

The question that unlocked everything: "Walk me through the last time you needed to do something PayCargo-related and weren't at your desk."

Field photos + interview recording grid
100%
Field photos + interview recording grid.
The findings

Mobile opportunities.

Three patterns showed up across the audit, the analytics, and the interviews. The triangulation separated real opportunities from a feature wishlist.

01

On-site payments at cargo release

Desktop structurally couldn't serve this one:
  • Container ready, no AP available. A trucker, driver, or broker is at the gate with the container ready, and payment has to clear now.
  • Manual workaround chain. Phone the office, wait for AP to log in, sometimes fax. Every step is minutes lost.
  • Cost compounds by the minute. Demurrage starts the moment the wait does. Every minute is paid by the carrier or the shipper, and none of it comes back.
02

Speed-up for AP users on the move

AP teams were already trying mobile and bouncing, because we were forcing them back to desktop:
  • 47% mobile sessions, mostly abandoned. People on phones leaking out of the funnel within the first two screens.
  • Improvised workarounds. Forwarding emails to spouses, calling junior staff to log in, screenshotting requests over WhatsApp.
  • A native flow reclaims the time. The mobile funnel turns the workaround into a 30-second approval.
03

Status at a glance

Status checks happen all day, and on desktop they're slow enough that people stop doing them. Mobile turns the check into a one-tap glance:
  • Checked many times a day. Brokers, dispatchers, and ops staff constantly watch cargo and payment status.
  • No need to open the app. Push notifications, lock-screen status, and a home-screen widget surface what users need without a single tap.
  • The everyday-use hook. Quick daily checks build the habit that keeps the app on the home screen.
We also surfaced demand for document capture, receipt scanning, and multi-account switching, but those got deferred to v2 to keep MVP scope tight.
03 · Process

Defining the mobile job, then designing for it.

One session set the direction for mobile. PM, Engineering, CS, and Sales in the room, with one required output: a Job-to-Be-Done specific to mobile that every feature would later have to defend itself against. Without it, the product would have drifted into "desktop, smaller."

When I'm at a terminal, warehouse, or gate with cargo ready to release, I want to pay or approve from my phone in under 90 seconds, so the container moves and demurrage doesn't start counting.

That framing made the MVP cut obvious. Mobile wasn't desktop made smaller. It was the on-the-ground payments device. Every proposed feature had to clear the 90-second test, and anything that didn't help close that loop shipped in v2.

Two directions out of the workshop

Two options on the table

The workshop output split into two different bets, same JTBD with different scope. Both went to mid-fi for a usability round before we committed to high-fidelity.

Option A · Lite-but-complete
PayCargo, miniaturized
see what went wrong

The first option was to take the full desktop product and shrink it onto mobile. Same vendor catalog, same long transaction form, same admin surfaces, just smaller. On paper it had feature parity, faster scope, and the lowest risk.

what went wrong
Failed the 90-second test on every flow. A 12-step transaction form doesn't survive a thumb-only context, and field operators don't need 80% of the desktop surface area. Shipping this would have shrunk the desktop product instead of building for the JTBD.
Option A — screen 1
Option A — screen 2
Option A — screen 3
Option B · Final
Built for the moment cargo is ready
see what worked

The direction we shipped. A focused app for three core jobs (view, approve, notify), with biometric-first auth and lock-screen / widget glanceability. Drivers and field operators pay on-site; AP teams approve from anywhere.

what went well
Cleared the 90-second test in round-1 usability and matched the 9-month scope. Two mid-fi screens locked the foundation: the transactions list as the at-a-glance home, and the notification + lock-screen flow as the everyday-use hook.
Option B — screen 1
Option B — screen 2
Option B — screen 3

Click any option above to expand. Option B cleared the 90-second test in round-1 usability and became the foundation for high-fi.


Validation

User testing, one round per platform.

Before high fidelity, four mobile-specific principles drove every screen: one-handed by default (primary actions in the bottom thumb arc), glanceable over comprehensive (answer from the notification when possible), offline-tolerant (cached state + optimistic UI, since ports have terrible connectivity), and biometric-first auth (Face ID / Touch ID, never password every time). Two Maze + UserTesting rounds followed, one on iOS and one on Android, sized to validate the 90-second test and surface platform-specific patterns before production.

Round 1
iOS, 8 participants on iPhone.
Validated Face ID auth, the lock-screen widget, and the urgent-payment flow. Surfaced an action-sheet dismissal that didn't match UIKit convention, and we tightened it before the Android round.
Round 2
Android, 8 participants on Pixel + Samsung devices.
Validated biometric auth, the home-screen widget, and back-gesture handling on the urgent-payment modal. Combined task success across both platforms: 92%, SUS 84, and a 47-second median on the 90-second test. Greenlit for production.
Maze test results: task success and heatmap from the Round 2 high-fi study on real devices.
Maze test results: task success and heatmap from the Round 2 high-fi study on real devices.
Foundation

Mobile design system extension

Rather than build a parallel system, I extended the existing PayCargo design system with mobile-specific primitives: bottom sheets, action sheets, native form components, biometric flows, offline indicators. Tokens stayed shared; components became platform-aware. Desktop and mobile read as one product across both surfaces.
Mobile design system extension
100%
Shared tokens, platform-aware components: one system, two surfaces.
04 · Final design

What we shipped.

A focused MVP shipped on iOS and Android. Three surfaces, each one chosen because it cleared the 90-second test: open the app, finish the job, get back to work.

01 · Live status widget + smart notifications

Glanceable cargo + payment status from the home screen

iOS and Android home-screen widget showing pending payments, recent releases, and cargo status. Push notifications only fire on state changes that actually matter (released, blocked, payment-required), so the user isn't pinged for every backend event.

Widget + notifications
Widget + notifications
100%
64%
users enabled the widget in week 1
Resolves: status awareness without context-switching. 41% notification engagement rate, well above the 14% industry average for B2B logistics apps.
02 · Vendor search

Find the right vendor: airline, station, or name

Searchable vendor directory tuned for the gate: airline prefix, station, or carrier name with a country filter. Lightning-marked frequent vendors float to the top, so repeat-pay flows take one tap instead of five.

Vendor search
Vendor search
100%
03 · Select payment method

Pick how to pay in one tap

Bottom-sheet payment selector with available balances inline, so users see what they can spend before they commit. PayCargo Finance, Overnight Debit, and Credit Card each show processing fees at the moment of choice instead of on a confirmation screen.

Select payment method
Select payment method
100%
47s
median app open → confirmed
Resolves: on-site payments at the point of cargo release. 92% task success in usability testing across truckers and AP users.
05 · Results & feedback

The numbers, post-launch.

62%
Mobile adoption
Of eligible users active on the app within 90 days of launch.
71%
Urgent payments on mobile
Share of urgent payments now originated on a phone, most at the point of cargo release.
47s
Notification → confirmed
Median time from push notification to confirmed payment.
−68%
"Couldn't get to my computer" tickets
Reduction in support tickets mentioning mobile-or-field context within 90 days.
4.7★
App Store rating
820+ reviews across iOS + Android stores.
84
SUS score at launch
Post-launch study with 22 participants across both AP and field segments, well above the 68 industry benchmark.
Reflections

Key learnings.

Two columns of muscle memory: the patterns that fought us in this 0→1 mobile project, and the ones that compounded enough to bring forward.

What went wrong
  • 1Held the widget for v1.1. I de-risked launch by deferring the home-screen widget by three weeks. When it shipped, 64% of users enabled it in the first week, making it the highest-frequency touchpoint in the product. It should have been the headline feature on day one.
  • 2Analytics shipped in waves. Event tracking came after the surfaces it measured, so early mobile metrics had gaps. Tag everything from sketch one, especially in a 0→1 product where the first 90 days are the only chance to baseline.
  • 3"Mobile parity" pressure didn't fully die. The 90-second test killed most parity asks, but the conversation kept resurfacing in eng standups. Stronger upfront alignment on this is not desktop, smaller would have saved cycles.
What actually worked
  • The 90-second test as a feature gate. Every proposed feature had to defend itself against a single number. A single number is easier to enforce than a 12-slide priority deck.
  • Triangulate before designing. When the competitor audit, analytics, and field interviews all pointed at the same friction, the roadmap got obvious. When two of three agreed, that's where I dug deeper.
  • JTBD-first workshop. One session set the direction for the entire project. Without it, mobile would have drifted into a smaller version of the desktop product.
  • Biometric-first auth. Removing password friction at the exact moment urgency peaked was the single biggest perceived speed-up in user testing.
Retrospective

What I'd do differently

  • Run a diary study before the sprint. The contextual interviews were powerful but episodic. A two-week diary study would have surfaced the rhythm of mobile needs across a full operating cycle, not just the moments interviewees remembered.
  • Set up event-level analytics before the first build. Some early mobile metrics had gaps because we instrumented in waves. Tag everything from sketch one.
PayCargo Mobile — three iPhones showing the shipped app
Next case study ↓
Togal AI · 2020–2021
AI takeoff tool, 0 → 1. →