# Loadline: Case Study | Gr8r Studio

> Loadline: plan every load in 3D and run the day from one place. Load planning, shipments, fleet, dispatch and live tracking in one workspace, with each truck's load shown in 3D and every problem explained before it leaves the dock.

Source: https://gr8rstudio.com/work/loadline

# Loadline: plan every load in 3D and run the day from one place.

Load planning, shipments, fleet, dispatch and live tracking in one workspace, with each truck's load shown in 3D and every problem explained before it leaves the dock.

Built by Gr8r for its own portfolio. Not client work.

Client

Loadline

Project

Transport operations platform

Platforms

Web app, desktop

- [Product Design](https://gr8rstudio.com/services/product-design)
- [Product Engineering](https://gr8rstudio.com/services/product-engineering)
- [AI Workflow Automation](https://gr8rstudio.com/services/ai-workflow-automation)

[View live demo](https://loadline-slks.vercel.app/)[Discuss your product](https://gr8rstudio.com/contact)

The problem

## See the load before the truck leaves.

A transport planner fills trucks, assigns drivers and watches dozens of trips across several depots. An overloaded axle, a missing driver or a late delivery is easy to miss in a spreadsheet until the truck is already on the road. The product had to show each load as it really sits in the trailer, and flag what is wrong before dispatch.

- 1Loads are planned without seeing them
- 2Axle limits and missing drivers surface too late
- 3Planning, dispatch and tracking live in separate tools

Where the day starts: today's numbers and the next departure, with the steps left before it can go.

Each exception says why it happened and what to do, with the fix one click away.

The workflow

## From the dock to the delivery window.

1. 1
Plan
Load the truck in 3D and check capacity, weight and axle balance.
2. 2
Fix
Resolve exceptions with the recommended action.
3. 3
Dispatch
Assign a driver and send the truck on its route.
4. 4
Track
Follow every truck on the map against its ETA.

The product

## Built around the truck, not the spreadsheet.

Four parts of the interface carry most of the planner's day. Each keeps the load, the route and the money in view together.

1. Load planning
### The load, as it sits
Each truck opens as a 3D model of its trailer and cargo, beside load details, axle loads, shipments and trip economics.
2. Optimise
### A better load, shown before it is applied
Optimize load compares the current plan with a better one: capacity, axle imbalance, loading operations and cost, with apply or review.
3. Tracking
### Every truck on one map
Live tracking lists each trip with its ETA and shows the fleet on a map, with time controls to replay the day faster.
4. Analytics
### How full, how far, how punctual
Fleet and capacity utilisation, on-time delivery, margin and cost per kilometre, with lane and weekly breakdowns.

Engineering

## A 3D planner and a live map in the browser.

Loadline is a React single-page app built with Vite, with each screen loaded as its own code-split chunk. The trucks and cargo are rendered in WebGL with three.js, and dispatch and tracking run on MapLibre with OpenFreeMap tiles. A ⌘K command palette reaches every screen and action.

- 3D load views with three.js
- MapLibre maps on OpenFreeMap tiles
- ⌘K command palette
- Search, filters and status tabs on every list

1. Find: search and filter every shipment
2. Jump: run any command with ⌘K
3. Fix: see the problem on the truck itself

Outcomes

## Designed for planners who need to see the load.

What the product demonstrably does. Measured business results will be added only with evidence and approval.

- ### Every load in 3D
Cargo, capacity and axle loads shown on the truck itself.
- ### Problems caught before dispatch
Exceptions explain the cause and recommend a fix.
- ### One workspace for the day
Planning, fleet, dispatch, tracking and documents in one place.

## Running a complex fleet operation?

Gr8r helps teams turn challenging requirements into clear digital experiences and working software.

[Discuss your product](https://gr8rstudio.com/contact)

## Next project

- [SaaSCRMCloseCRMA structured CRM for busy sales teams: tasks, deals, records and automation that reps can scan in seconds. Read the case study ](https://gr8rstudio.com/work/closecrm)
- [AISaaSSellerOSOne workspace for marketplace sellers: sales, stock, shipments and profit, with an AI briefing. Read the case study ](https://gr8rstudio.com/work/selleros)
- [AIFintechLedgerOSFinance operations where AI agents handle the routine work and people make the risky calls. Read the case study ](https://gr8rstudio.com/work/ledgeros)
- [SaaSProductivityTask Management AppOne workspace for projects, tasks, deadlines and updates, from each person's list to the company timeline. Read the case study ](https://gr8rstudio.com/work/task-management-app)
- [ProcurementOnboardingVelunoSupplier onboarding with parallel reviews, documents, renewals and a supplier portal in one workspace. Read the case study ](https://gr8rstudio.com/work/veluno)
- [AIAutomationRelayA workflow automation workspace where AI agents run the work and people approve the risky steps. Read the case study ](https://gr8rstudio.com/work/relay)
- [DronesLogisticsSortieMission control for autonomous delivery drones, with a live 3D map of every flight. Read the case study ](https://gr8rstudio.com/work/sortie)
- [LogisticsOperationsAxleA fleet command centre for live tracking, dispatch, safety, compliance and maintenance. Read the case study ](https://gr8rstudio.com/work/axle)
- [HealthcareSaaSCendaraHealthcare claim denials worked to resolution: documents, appeals, reviews and payer replies. Read the case study ](https://gr8rstudio.com/work/cendara)
- [WebsiteTravelContrailFlight search where every flight opens a 3D model of its aircraft, so you choose your seat inside the cabin. Read the case study ](https://gr8rstudio.com/work/contrail)
- [WebsiteLearningKnowspaceA zoomable canvas of surprising facts, explored by topic, search and a small daily goal. Read the case study ](https://gr8rstudio.com/work/knowspace)
- [WebsiteWellbeingHinterlandAn illustrated mental health publication: topics, essays, short practices and a clear route to support. Read the case study ](https://gr8rstudio.com/work/hinterland)
- [WebsiteAgencyAtlasA design agency website told as a gallery visit, with old master paintings reworked as dot prints. Read the case study ](https://gr8rstudio.com/work/atlas)
- [UX auditProcurementVeluno UX AuditOur own supplier onboarding product, audited like a client’s: 13 findings, 3 high, and what to leave alone. Read the case study ](https://gr8rstudio.com/work/veluno-ux-audit)
- [UX auditHealthcareCendara UX AuditOur own claims product, audited like a client's: 12 findings ranked by impact, from sideways tables to hidden logins. Read the case study ](https://gr8rstudio.com/work/cendara-ux-audit)

Ask Ali