Fleet Defender
Role
UX/UI & Product Designer
Services
UX/UI Design · Product Design · Design System
Market
USA · Enterprise Fleet & Logistics
Fleet Defender is a cybersecurity web app built for Werner Enterprises to protect a fleet of 6,000+ commercial trucks across the US. The platform uses a progressive disclosure model
Map → Alert Notification → Side Drawer → Incident Response
to surface critical security threats without overwhelming fleet operators with unfiltered data.
Built on the Sentinel Design System (extended from Flowbite), the product handles real-time
GPS spoofing alerts, unauthorized access detection, and multi-role fleet management across security, safety, maintenance, and compliance profiles.
Fleet Defender at a Glance
The Impact:
Under Werner Enterprises — one of the largest trucking companies in North America, Fleet Defender now protects a fleet 12x larger than its original pilot. The progressive disclosure model reduced investigation time from 8 minutes to under 2 minutes per alert, and the multi-profile architecture (security, safety, maintenance, compliance) let cross-functional teams work from a single platform without role conflicts — replacing a
fragmented set of spreadsheets and manual reporting tools.
12x Fleet Growth
From a 500-vehicle pilot to full enterprise deployment.
Enterprise Adoption
Trusted by Werner Enterprises, one of the largest trucking companies in North America.
Multi-Profile Platform
Role-based access unifying security, safety, maintenance, and compliance teams.
The Problem:
Too Much Data,
Not Enough Clarity
500-vehicle pilot to 6,000+ active trucks
Fleet operators managing thousands of vehicles across the US face a paradox: more data visibility creates more cognitive overload, not less. Early versions of the platform surfaced every alert simultaneously, making it nearly impossible to distinguish critical threats from routine notifications. The design challenge was to architect a progressive disclosure system
Map View → Hover Card → Side Drawer → Incident Response Panel
That let operators move from fleet-wide awareness to vehicle-level forensics in three interactions, without losing context at each step. Every UI decision was evaluated against one question:
does this help the operator act faster, or does it add noise?
Design
goals:
Reduce cognitive load without hiding critical information
Preserve context at every step — no dead ends, no lost state
Support multi-role access (security, safety, maintenance) from one platform
What was
broken:
Every alert carried the same visual weight, with no severity hierarchy
Operators couldn't distinguish critical threats from routine notifications
No clear path from fleet-wide awareness to vehicle-level action
The How:
Research & Insights
Fleet Defender's foundation existed before I joined, an initial structure built by the development and product team based on early client requirements. From there, the platform evolved through continuous, direct feedback loops with Werner Enterprises:
recurring stakeholder meetings, desk research, and iterative delivery cycles rather than a single upfront research phase.
One clear artifact from that process: the research behind the platform's customizable reporting dashboard module combined a formal functional requirements spec-covering role based authentication, widget-based layout customization, real-time data integration, accessibility, and security, with a curated library of UI reference patterns spanning onboarding flows, chart typologies (bar, line, pie, area, heatmap, time series), drag-and-drop customization, and admin layout conventions from comparable products.
Design decisions were grounded in both technical constraints and proven UX patterns from day one, not
built in isolation.
That same client-embedded process drove the design and delivery of 5+ major features beyond original scope, including:
FEMA Alerts
Emergency and environmental threat notifications
Incident Report
Structured documentation and resolution tracking for security events.
1.
2.
3.
Fuel Theft Dashboards
asset-protection monitoring for fuel-related threats.
The Evolution:
From Flat Map to
Structured Response
Fleet Defender was never designed in one pass. Earlier explorations including a version of the product built before I joined the project used a flatter visual language:
color-coded map markers with minimal hierarchy and no severity encoding, tracked through a basic, static sidebar list.
Before:
A flat, single-purpose interface — one dashboard per data type, generic navigation, and no severity hierarchy. Every alert and recommendation carried equal visual weight, with no clear path from awareness to action.
After:
A modular platform with clear navigation and a live view built for fast scanning. Severity is consistently encoded across every module, guiding operators from fleet-wide awareness to vehicle-level detail in seconds.
Every iteration in between, including work archived in a running design "graveyard" of discarded directions, pushed toward more structure and less reliance on color alone, a navigation model built to scale as the fleet grew from 500 to 6,000+ vehicles.
The
Solution:
Sentinel Design System
Sentinel is Fleet Defender's design system, built on a Flowbite foundation and extended with custom components specific to fleet cybersecurity:
Severity badge system (Critical / High / Medium / Low) with consistent color encoding across all alert types, a Side Drawer component for contextual vehicle detail without navigating away from the map, radial gauge widgets for multi-metric vehicle scoring (Cyber / Safety / Maintenance / Eco), and a contextual notification system for fleet-wide environmental alerts.
The system was documented for developer handoff with Figma-to-code specs.
The
Reflection:
What This Project Taught Me
Fleet Defender was my entry point into designing genuinely complex, high-stakes software. Complexity turned out to be where the most interesting design decisions live, the harder the requirement, the more room there is to build something that actually accelerates how people work, not just something that looks polished.
Designing for cybersecurity specifically reshaped how I approach product design:
permissions, security tiers, user verification, role types, and threat alerts all carry a different weight than a typical SaaS feature. This category of software isn't about delight it's about prevention, and about giving people the fastest possible path to resolution when something does go wrong. That distinction now shapes how I approach every security-adjacent problem I design for.
See More Work
More products, systems, and experiences I've designed.
PrescribedRX
Medical Telehealth & E-commerce
Revitalizing a telehealth brand by reducing task completion time by 40% through a streamlined sitemap and a unified digital-to-physical identity.
Health-tech
E-commerce
Brand Identity
Packaging
Hospitium
Centralized Healthcare CMS
Cutting average appointment time from 20 to 12–15 minutes through a centralized CMS that puts patient history, exam results, and treatments in one place, while enabling efficient remote scheduling for patients.
B2B CMS
Healthcare IT
Product Strategy
Workflow Optimization
Let's build something great
Open to new roles and projects. Let's talk.
Menu
Contact
Social Media