Modernising a Shipping & Logistics Platform
Case Study · Fleet Management · Web Application
Modernising a Shipping & Logistics Platform
CRST's internal operations tool — BOS — had served its time. We rebuilt it from the ground up: a modern, scalable platform that dispatchers, drivers, and managers could actually trust.
My RoleDesign Lead
PlatformWeb Application
IndustryTransport & Logistics
DeliverablesResearch · System · UI · Handoff
Scroll to read
Order Tracking
Shipment Creation
Fleet Management
Inventory Control
Reports & Analytics
Route Planning
Driver Management
WCAG Accessibility
Design System
Responsive UI
CRST Platform
UX Research
Order Tracking
Shipment Creation
Fleet Management
Inventory Control
Reports & Analytics
Route Planning
Driver Management
WCAG Accessibility
Design System
Responsive UI
CRST Platform
UX Research
The Company
CRST Specialised Services
CRST is one of the largest privately held transportation and logistics companies in the United States. They move freight across the country every day — flatbed, temperature-controlled, dedicated carriage — serving thousands of customers across retail, manufacturing, and government sectors.
At the heart of their operations sat BOS — their internal platform for managing orders, tracking shipments, assigning drivers, and reporting. It worked, but barely. As the business scaled, it became a liability.
4,000+
Trucks in active fleet across the US
40+
Years in the transportation industry
12K+
Employees relying on internal tools daily
3
Core user groups: dispatchers, drivers, managers
The Challenge
A platform that had outgrown itself
"The system works — but it shouldn't take a two-week training programme just to create a shipment."
— Internal user, CRST operations team
BOS was built at a time when CRST's scale was a fraction of what it is today. Over the years, feature patches, workarounds, and manual processes accumulated into something no one could confidently navigate.
🧩
Outdated UI, zero clarity
Dense tables, ambiguous icons, no visual hierarchy. New users needed weeks; veterans relied on workarounds.
🌀
Too many steps, confusing navigation
Shipment creation spanned 14 steps across 6 screens. Error states were vague, progress was invisible.
⚡
Not scalable or responsive
Fixed-width layout, no adaptive behaviour. As CRST grew, the platform's rigidity became a hard ceiling.
👥
New users couldn't self-serve
Onboarding depended on shadowing colleagues. No contextual cues, empty states, or progressive disclosure.
🔗
Siloed modules
Orders, fleet, inventory, and drivers were disconnected. Dispatchers toggled between unrelated interfaces.
♿
No accessibility compliance
Low contrast, no keyboard navigation, absent ARIA roles — inaccessible to a meaningful portion of staff.
My Contribution
Design Lead — end to end
From first interview to final handoff doc — I owned the design.
Solo design engagement embedded within a larger engineering and product team. I drove every decision from discovery through developer handoff.
🔍
User Research & Discovery
Stakeholder interviews and contextual user sessions with dispatchers, operations managers, and logistics coordinators.
🗺
Information Architecture & Flows
Rebuilt the site map and core user flows from scratch — reducing average task depth and unifying navigation across six modules.
📐
Wireframing & Prototyping
Lo-fi wireframes for stakeholder alignment, then interactive hi-fi prototypes tested across three rounds of user feedback.
🎨
Design System Creation
Token-based component library — 60+ components, colour system, typography scale, dark mode, WCAG 2.1 AA documentation.
💻
Final UI & Screen Design
All production-ready screens: dashboard, orders, fleet, inventory, reports, settings — with full responsive specs.
📦
Handoff Documentation
Annotated Figma handoff — component states, edge cases, spacing rules, WCAG notes — reducing engineering back-and-forth.
How We Got There
A process built around real users
Enterprise redesigns fail when they start from assumptions. We started from conversations — and kept returning to them.
🖼
Wireframes / Research Artefacts
Upload via right panel →
01 — DISCOVERY
Understanding the terrain
Immersed in CRST's operations — shadowing dispatchers, mapping workflows, auditing the legacy system.
→Stakeholder interviews (6 sessions)
→Contextual workflow mapping
→Legacy system audit
→Competitive landscape review
02 — IDEATION
Designing the architecture
New IA, navigation structure, module hierarchy, and core interaction patterns defined before visual design.
→Persona development
→Revised site map & IA
→Core user flow diagrams
→Lo-fi wireframes
03 — DESIGN & TEST
Iterating toward clarity
Interactive prototypes tested with actual users — three rounds directly shaped the final UI.
→Mid-fi interactive prototypes
→3 rounds of usability testing
→Design system development
→WCAG 2.1 compliance review
04 — HANDOFF
Handing over with confidence
Full production UI with thorough documentation. Worked alongside engineers to close the gap.
→Annotated Figma specs
→Component state documentation
→Dev support during build
→QA design review
🖼
Dashboard UI — New System
Upload via right panel →
What We Built
New system highlights
The redesigned BOS wasn't a new coat of paint — it was a rethinking of how logistics professionals interact with data at scale.
Dashboard
Role-aware dashboards with live insights
Each user type sees a personalised view of the data most relevant to their daily work. Real-time KPI widgets replace static exports.
Alerts
Actionable notifications & global alerts
A unified notification layer surfaces time-sensitive issues — delayed shipments, driver check-ins — with clear actions attached.
Shipments
One-click shipment creation monitor
From 14 steps across 6 screens to a single guided 4-step process. Progress is always visible, errors surfaced inline.
Analytics
Inline reports & analytics
Performance charts and delivery metrics embedded directly into relevant modules — context where decisions are made.
Access
User access controls
Admins get granular control over permissions — designed as a clear matrix view rather than a sprawling settings page.
Fleet
Route planning & driver management
Map-integrated fleet view lets dispatchers assign routes, track driver status, and manage availability from one screen.
Agents
Easy quotes for external agents
External logistics partners generate shipping quotes through a streamlined self-serve flow — reducing ops team back-and-forth.
Design System
Custom design system
Token-based system — 60+ components, dark & light modes, responsive breakpoints, full WCAG 2.1 AA compliance documentation.
Accessibility
WCAG compliance
Every screen meets WCAG 2.1 AA — keyboard navigation, focus states, colour contrast ratios, ARIA annotations throughout.
The Transformation
Old system vs. new system
The difference wasn't cosmetic. It changed how people worked — reducing cognitive load, eliminating workarounds, building confidence through clarity.
BOS — Legacy System
✗14-step shipment creation across 6 disconnected screens
✗Early-2000s UI — dense tables with no hierarchy
✗2-week onboarding before a user could work independently
✗No mobile or responsive layout — desktop only, fixed width
✗No WCAG compliance — inaccessible to users with disabilities
✗Manual report exports — no inline analytics or live data
✗Module silos — no shared context between orders, fleet & inventory
Redesigned Platform — New BOS
✓4-step guided shipment creation — single screen with inline validation
✓Modern dashboard UI with role-based views and live KPI widgets
✓Self-service onboarding with contextual guidance and empty states
✓Fully responsive design with defined breakpoints across all modules
✓WCAG 2.1 AA compliant — keyboard nav, focus states, ARIA annotated
✓Inline analytics embedded into each module — decisions in context
✓Unified platform — orders, fleet, inventory & drivers fully connected
Legacy BOS
🖼
Legacy BOS Screenshot
Upload via right panel →
New System
🖼
New System Screenshot
Upload via right panel →
Design System
🖼
Design System — Component Library
Upload via right panel →
The Impact
Delivering measurable improvements
Measured through usability testing, post-launch analytics, and qualitative feedback from the operations team.
0%
Reduction in shipment creation time
~18 min → ~7 min avg
0×
Faster new user onboarding
2 weeks → under 4 days
0%
Task completion rate
Up from 57% on legacy BOS
0%
Drop in user-reported errors
Post-launch ticket reduction
0+
Components in design system
With full state documentation
0/5
Average satisfaction score
Post-launch internal survey
AA
WCAG 2.1 compliance
First time in CRST tool history
0%
Higher analytics adoption
Inline vs. legacy export model
Looking Back
What I'd keep · What I'd do differently
Honest reflection is how design improves.
What I'd keep
Anchoring every decision in user research
The investment in upfront discovery paid off disproportionately. Every time a design decision was challenged internally, I could trace it back to a real user behaviour. Research built the credibility that design decisions needed to survive stakeholder scrutiny.
What I'd keep
Building the design system in parallel with screens
Rather than extracting components after the fact, I built the token and component layer as I designed. Every new screen was instantly consistent, and developers had a reference they could trust from day one.
What I'd do differently
Involve engineers earlier in the design process
Some ambitious interaction patterns hit implementation walls late in the project — not because they were bad, but because engineering constraints hadn't been surfaced early enough. I'd build in design-engineering reviews at wireframe stage, not just at handoff.
What I'd do differently
Test with a wider range of users, earlier
Usability testing was concentrated in mid-to-late design. With more time, I'd run low-fidelity concept tests much earlier — particularly for IA and navigation — before committing to the detailed design layer.
VHK.
Vishnu Haridas Karinatt · Product Designer · UX Researcher · Kerala, India
CRST — Shipping & Logistics Platform Redesign
Design Lead · Research · Design System · UI · Handoff
Web Application · Enterprise · B2B
Design Lead · Research · Design System · UI · Handoff
Web Application · Enterprise · B2B