Pro Bill - From one long scroll
to a billing experience clerks trust.
Pro Bill - From one long scroll
to a billing experience clerks trust.
A real enterprise billing module. Two iterations. One honest account of what the first version revealed - and how the second version fixed it.
01 - overview
Aug 16, 2024
Fastfrate is one of Canada's largest privately-held intermodal carriers, operating 28 terminals coast-to-coast and moving freight by truck, rail, and final-mile delivery across Canada and into the USA. Their operations span LTL, TL, drayage, warehousing, and final-mile services.
Fastfrate is one of Canada's largest privately-held intermodal carriers, operating 28 terminals coast-to-coast and moving freight by truck, rail, and final-mile delivery across Canada and into the USA. Their operations span LTL, TL, drayage, warehousing, and final-mile services.
Content
Product type: Enterprise Web Application
Content
Domain: Freight Logistics & Billing Operations
Content
Team: Solo Product Designer (Me)
Content
Timeline: 2 weeks
Content
02 - about pro-bill
Aug 16, 2024
A Pro Bill is Fastfrate's internal billing document for a single shipment. It captures who moved what, how much it weighed, what services were applied, who's getting charged, and how much they owe.
When it's published, it locks. The invoice goes to the customer. The accounting system triggers. Money moves. Corrections after publish require supervisor intervention — there is no undo.
Content
primary user
billing Clerk
billing Clerk
reviews prefilled data from CSR and Dispatch, completes billing sections, validates charges, and publishes. Processes 50–100 bills per shift. Last human checkpoint before money moves.
Content
03 - THE brief
Aug 16, 2024
The client came with a clear ask
and a detailed spec
The client came with a clear ask
and a detailed spec
"Design the Pro Bill screen.
All fields on one screen so clerks can see everything at once."
"Design the Pro Bill screen.
All fields on one screen so clerks can see everything at once."
Content
5 Sections, A lot of Input Fields and Information
5 Sections, A lot of Input Fields and Information
Content
04 - DISCOVERY
Aug 16, 2024
Before designing anything,
we asked the questions the spec didn't answer
Before designing anything,
we asked the questions the spec didn't answer
Q1. How many bills does a clerk process per shift?
Content
50–100 bills per shift at busy terminals. Volume spikes at month-end.
Content
Q2. How much data is pre-filled when a clerk opens a new Pro Bill?
Content
60–70% for standard bookings — shipper, consignee, trip details come from the CSR. The clerk verifies that and fills in the billing layer: charge codes, cube details, weight, stamps, accessorials. Walk-in shipments start from scratch.
Content
Q3. Do multiple clerks ever work on the same bill?
Content
Yes — across shift changes, a draft gets picked up by whoever's next. The second clerk has no visibility into what was verified versus what was just auto-populated. They re-verify everything from scratch.
Content
Q4. Do clerks fill the form linearly or jump between sections?
Content
They jump constantly — BOL in front of them for dimensions, separate screen for rates. Linear flow isn't how they work.
Content
05 - First iteration
Aug 16, 2024
First Version - V1
as client wanted
First Version - V1
as client wanted
Clerks cross-reference fields constantly and jump between sections non-linearly. A single screen wasn't a design limitation, it was a workflow requirement.
Content
04 - First iteration
Aug 16, 2024
✓ Every field has its place - five sections, clean hierarchy, nothing buried.
Content
✓ Keyboard shortcuts Ctrl+1–5 enable instant section jumping for power users.
Content
✓ Multi-bill tabs (Pro Bill 1, 2, 3) cleanly handle multi-segment trips.
Content
✓ Three-column address layout shows all parties at a glance.
Content
✓ Bill Total bar pinned at bottom - live financial reference always in view.
Content
06 - some issues
Aug 16, 2024
But….
While designing V1,
Few problems became visible
But….
While designing V1,
Few problems became visible
01
Content
Long scroll makes the form feel overwhelming - 50+ fields on one continuous page signals complexity before the clerk even starts
Content
02
Content
No completion state per section -
clerks can miss filled fields or errors without any indicator that a section is incomplete
Content
03
Content
Errors have no focal point - validation issues scattered across a single scroll force clerks to hunt up and down to find and fix them
Content
01
Content
Can increase cognitive load - no natural pause points as complexity builds section to section
Content
03
Content
Errors have no focal point - validation issues scattered across a single scroll force clerks to hunt up and down to find and fix them
Content
04
Content
Sections feel identical - same visual weight and typography throughout makes it hard to distinguish where one section ends and another begins
Content
None of these were execution failures
They were natural limits of a single-scroll structure, providing the rationale for a better solution.
None of these were execution failures
They were natural limits of a single-scroll structure, providing the rationale for a better solution.
07 - Alternatives Explored
Aug 16, 2024
Three structural approaches proposed.
One chosen.
Three structural approaches proposed.
One chosen.
option a - REJECTED
Linear Wizard
Linear Wizard
Step-by-step with enforced sequence. Strong completion visibility but breaks the non-linear workflow requirement.
Content
Rejected: Wrong tool for power users processing 100 bills a day.
Content
option b - partial
Accordion + Validation
Accordion + Validation
Keep single-page layout, add inline validation states and a completion summary. Solves few problems but not cognitive load.
Content
Partial: Still a 3,000px form. Completion requires scrolling to interpret.
Content
option c - chosen
Freely Navigable Stepper
Freely Navigable Stepper
Five steps, all accessible anytime. Click or use shortcut keys. One section in focus. Completion status always visible.
Content
Chosen: Respects all constraints. Adds structure without restricting access. Zero relearning cost.
Content
08 - success metrics
Aug 16, 2024
Success metrics,
KPIs Defined for v2
Success metrics,
KPIs Defined for v2
kpi 01
↓ Error Rate
↓ Error Rate
Reduction in post-publish corrections caught by supervisors.
KPI 02
↑ Billing Speed
↑ Billing Speed
Less time to process each bill - without increasing error risk for power users.
kpi 03
↓ Onboarding Time
↓ Onboarding Time
Days for new clerks to reach proficiency without supervisor assistance.
KPI 02
↑ Billing Speed
↑ Billing Speed
Less time to process each bill — without increasing error risk for power users.
09 - second iteration
Aug 16, 2024
And here it goes,
Version 2
And here it goes,
Version 2
STEP 01
Aug 16, 2024
billing details
✓ Same clean input fields structure, but in stepper design
Content
✓ Reduced vertical height of few elements (Probill no. - status) for more content space
Content
✓ Crtl + ←/→ arrows to switch between tabs for power users
Content
STEP 02
Aug 16, 2024
address details
✓ Shows completion of previous tab once every field is good to go
Content
STEP 03
Aug 16, 2024
Additional Details
STEP 04
Aug 16, 2024
Cube details
✓ Errors appear exactly when clerk tries to jump to next section
Content
✓ It means clerk can jump to next/previous section but error will be shown on tab
Content
✓ Errors can be of wrong values or missing values based on logic
Content
STEP 05
Aug 16, 2024
References
10 - Reflection
Aug 16, 2024
the honest reflection
the honest reflection
What I'd push back on earlier
Content
My first instinct was to challenge the single-screen requirement immediately. Discovery changed that. When clerks process 100 bills a day with non-linear workflows, flexible access isn't a preference - it's a hard requirement. The client was right about that constraint.
Content
Where they were wrong was assuming "one screen" automatically meant "good UX." Those are different things.
Content
What V1 taught me
Content
You can't find what's missing in a brief - you find it while designing. V1 needed to exist before its structural limitations became visible. That's not a failure. That's what iteration is for.
Content
11 - other modules
Aug 16, 2024
More modules I owned
that we can discuss
More modules I owned
that we can discuss
Configure Pricing Application
Content
Contract Management
Content
Driver App
Content
Customer Onboarding
Content
next casestudy
next
casestudy
next casestudy
My creative spirit comes alive in the digital realm. With nimble fingers flying across the device.
