Elegant IT
Logistics SaaS · UX and UI · Full-Stack · AI

We turned a 12-step
process into four screens.

A global freight company's operations team was spending 3 to 4 hours every day on a dashboard that had never been designed. It had grown. Features were bolted on. Nobody planned it. We were brought in to replace it completely.

0%
Task completion uplift
0 wks
Discovery to live
0%
Reduction in task time
UX ResearchProduct DesignFrontend EngineeringBackend EngineeringAI Automation
app.freightops.com / operations
Operations overview
Live · Updated 14 sec ago
Today
428
In transit
12
At risk
96%
On time
ID
Route
ETA
Status
SH-481
SHA → LAX
14:20
On time
SH-482
RTM → NYC
09:05
Pending
SH-483
DXB → JFK
Delayed
SH-484
SIN → SEA
22:10
On time
Supply ChainLogistics SaaSReact + Next.jsFigmaNode.jsPostgreSQLAI Automationn8nInformation ArchitectureSupply ChainLogistics SaaSReact + Next.jsFigmaNode.jsPostgreSQLAI Automationn8nInformation Architecture

Their operations team had six browser tabs open at all times just to track one shipment. Nobody designed it that way. It just grew.

What we observed in week one
01

Shipment tracking required navigating between four separate modules.

02

Morning reports were compiled manually from three data sources.

03

No real-time visibility created reactive client communication.

04

New operators needed three to four weeks to reach full productivity.

Before · 12 connected nodes
After · 4 clean steps
PlanDispatchTrackClose
Discovery and research
01 / Field study

What we found in user interviews

We spent week one watching the operations team work. We did not ask them what was wrong. We counted clicks. We timed tasks. We noted every moment they opened a new tab or picked up the phone because the system could not tell them what they needed to know. By the end of the week we had documented 23 distinct friction points.

02 / Scope shift

The insight that changed the scope

The real problem was not the interface. It was data fragmentation. Shipment information lived in three disconnected systems. Any interface built on top of that would be fragmented too. Fixing the UX required fixing the data layer first. We told the client in week two. They agreed and extended the scope.

03 / What stayed

What we decided not to redesign

The existing system had some things that worked. The cargo classification taxonomy. The client notification templates. The weekly SLA summary structure. We kept all three and built the new system around them. Founders who have used a platform for years have institutional knowledge embedded in it. Throwing everything away is never the right answer.

The biggest decision of the project happened in week one, before we opened Figma.

What we designed

Seven screens. One operations system.

01Dashboard overview
/dashboard
Operations overview
Live
428
In transit
12
At risk
38
Pending

All active shipments, real-time status, one screen.

02Shipment detail
/shipments/SH-481
SH-481 · SHA → LAX
On time
BookedMar 12
DepartedMar 14
ETAMar 22 · 14:20
62% of journey complete

Complete lifecycle in a single view. No tab switching.

03Route intelligence
/routes/intelligence
Route options
AI ranked
A · 14d · $4,200B · 17d · $3,650

AI-suggested route alternatives ranked by cost and time.

04Exception queue
/exceptions
Exception queue · 12
High
SH-483 · 4hr delayReroute
SH-501 · CustomsContact
SH-477 · Resolved

Flagged delays with one-click resolution actions.

05Client reporting
/reports/weekly
Weekly client report
Auto
Acme Corp · Week 11
Shipments38
On-time rate97.4%
Avg transit14.2 d
Send to client

Automated report generation. Zero manual compilation.

06Multi-carrier view
/carriers/compare
Carrier bids · SH-512
4 bids
Maersk$3.2k14d
MSC$3.6k13d
CMA CGM$3.4k16d
Hapag-Lloyd$3.5k15d

All carriers compared in a single bidding interface.

07Operator onboarding
/onboarding
Welcome, Mara
Day 1
Find an active shipment
Open the route options panel
3Send a client update
4Resolve an exception

New operators productive within their first shift.

The average number of modules an operator needs to open for any single task dropped from 4.2 to 1. Every critical action is now within two clicks of the main dashboard.

AI

The client did not ask for AI.
We proposed it anyway.

In week three we identified three workflows consuming more manual time than anything else: morning report compilation, route exception flagging, and SLA risk prediction. We scoped a two-week proof of concept and presented it as an optional addition. The client was skeptical. After two weeks they asked us to build all three into the main product.

Morning Report Agent

Runs at 6am daily. Pulls data from all connected sources. Compiles the standard operations briefing.

Delivers it to the right people via Slack. Zero coordinator time required.

Exception Intelligence

Monitors all active shipments continuously. When a delivery is tracking toward a missed SLA, the system surfaces it early.

Three suggested resolution options ranked by cost and time impact.

Natural Language Search

Operators search using plain language. The system understands intent rather than matching keywords.

"Show me all shipments for Acme Corp that were late last month" returns the right results.

Claude APIn8nMake.comSupabaseReactNode.jsPostgreSQL
What changed thirty days after launch
0%
Task completion rate uplift
First 30 days post-launch
0%
Reduction in average task time
Compared to the legacy system
3.4 hrs
Saved per operator per day
Based on time-tracking data
0 wks
Discovery to live product
Including AI integration

“I was not sure we should change the whole interface. We had 40 people trained on the old system. Two weeks after launch the team was faster than they had ever been and nobody was asking to go back.”

Operations DirectorName withheld by request
How eight weeks looked
Week 1
Discovery
Interviews. Friction mapping. Priority matrix.
Week 2
UX architecture
Information architecture. Core user flows.
Week 3
Visual design
Hi-fi UI. Design system. Prototype.
Week 4
Data architecture
New schema. API design. Integration plan.
Weeks 5–6
Engineering
Frontend and backend in parallel.
Weeks 7–8
AI · QA · Launch
Pipeline. QA. Deployment. Training.

The client saw working screens at the end of every week. Nothing was a surprise at launch.

Tech stack
R
React / Next.js

Frontend and SSR

N
Node.js

Backend API and business logic

P
PostgreSQL

Multi-tenant relational schema

S
Supabase

Realtime updates and hosting

C
Claude API

Natural language search and exceptions

n8
n8n

Workflow automation and agent pipelines

F
Figma

Design system and prototype

Ae
After Effects

Onboarding animations and transitions

Ready to build something like this?

Book a free 15-minute call. We will look at what you are building and tell you honestly what it takes and whether we are the right fit.