Ryder Trucks

RyderGyde

RyderGyde is Ryder Truck’s all-in-one digital platform for managing fleet operations — enabling customers to track vehicles, schedule maintenance, and request roadside assistance. Over time, however, the platform fell behind modern usability and design expectations. Its interface became fragmented, navigation was cumbersome, and the overall experience no longer reflected Ryder’s updated brand or design system standards.

Background

RyderGyde is Ryder Truck’s digital platform for fleet management — a hub where customers monitor vehicles, schedule maintenance, and access roadside assistance. However, as Ryder grew, the app struggled to keep pace with modern usability and design standards. The interface had become visually inconsistent, difficult to navigate, and out of sync with Ryder’s evolving brand and design system.

Goal

Redesign and Apply MUI Design System

The goal was to bring RyderGyde into alignment with the new MUI Design System, enhancing usability, accessibility, and visual consistency across web and mobile. This was a 3-month design engagement to modernize the platform and improve the overall user experience for fleet managers and operations teams.

‍

<  Drag  >

Before

After

Challenges & Solutions

RyderGyde’s existing UI lacked structure and hierarchy, resulting in friction for users who depended on the platform for quick, critical decisions. Navigation patterns were inconsistent, and redundant visual elements made it difficult to find key functions like Roadside Assistance or Vehicle Tracking.

• Legacy Code & Design Debt:
  Before: The app’s older front-end framework limited the ability to implement consistent styling or interaction patterns. Each screen used its own logic for layout, spacing, and buttons.
  After: We mapped every interface element to MUI tokens and components, consolidating patterns into a modular design system. This allowed scalable updates, smoother handoffs to developers, and faster iteration across all screens.
  
• Fragmented User Experience:
  Before: Drivers and Fleet Managers operated in separate silos with different layouts and navigation. Common actions—like viewing asset health—required entirely different paths.
  After: We introduced a role-aware home architecture built on shared components (cards, status pills, dashboards). Both roles now access the same data with contextual views—creating consistency while retaining relevance.
  

• Inconsistent Visual Hierarchy:
  Before: Competing fonts, mismatched iconography, and random color usage made it difficult to parse priority information.
  After: A standardized MUI design language introduced a clear hierarchy: consistent typography scale, 3-tier color system (action, alert, neutral), and predictable spacing. Critical alerts and key actions were elevated visually to reduce decision friction.
• Data Density & Performance:
  ‍Before: Drivers and managers struggled to load and interpret dense, real-time data on smaller screens.
  After: Progressive disclosure was applied—showing high-level summaries first with drill-down capability. Real-time data feeds were optimized through pagination and skeleton loading, maintaining responsiveness while preserving data depth.
• Accessibility & In-Cab Usability:
  Before: Small tap targets and low contrast ratios made it difficult for drivers to safely use the app while on the road.
  After: We introduced large, 44dp+ touch targets, increased contrast, simplified navigation, and added offline and voice-friendly functionality. The experience now aligns with WCAG and driver safety standards.

Fleet managers often described the interface as “too dense for something I rely on daily.”Our challenge was to reimagine the experience without disrupting the workflows users already depended on.

What I Accomplished

Activities and Deliverables

• Conducted user research to identify high-friction tasks within the software and app. See the research.
  
• Defined design principles rooted in MUI to ensure scalability and brand consistency while also maintaining the design system's core usability.
  
• Rebuilt core components such as the AppBar, Toolbar, Button, TextField, Select, Dialog, Snackbar, Card, Grid, Drawer, maintenance scheduling, and roadside support for inclusion in Storybook for devs.
• Delivered a responsive UI framework as a prototype that unified RyderGyde’s visual identity across platforms.

RyderGyde’s existing UI lacked structure and hierarchy, resulting in friction for users who depended on the platform for quick, critical decisions. Navigation patterns were inconsistent, and redundant visual elements made it difficult to find key functions like Roadside Assistance or Vehicle Tracking.

01 Research

The Starting Point

To understand where pain originated, I reviewed user analytics, support queries, and NPS feedback, then interviewed fleet managers and service reps.

Common complaints pointed to unclear navigation, visual noise, and redundant steps when accessing vital data.

“It feels like I’m fighting the UI just to find what I need.”

– SW Fleet Manager

This feedback informed key UX hypotheses: simplify hierarchy, standardize typography, and give users a clear mental model for task completion.

Manager Feedback

During our weekly Zoom calls with users, we spoke with many drivers who helped identify some of the possible reasons this was happening. Volume, time, and pressure really weren't on their side.

“I’m drowning in alerts—I need the top five that truly matter right now.”

Phillis

Fleet Manager, Ryder

"I need parts availability and warranty info in the same place I approve work.”

Charles

Fleet Manager, Ryder

“Yesterday’s reports don’t help me make decisions for today’s routes.”

Alex

Fleet Manager, Ryder

"It feels like I’m fighting the interface just to find what I need."

Rene

SW Shop Manager, Ryder

Driver Feedback

During our weekly update calls with users, we spoke with many drivers who helped identify some of the possible reasons this was happening. Volume, time, and pressure really weren't on their side.

“Small buttons and crowded screens are hard to use in a moving truck.”

Jerry

Driver, Ryder

“It takes too many taps to get to my next stop and start navigation.”

Keran

Driver Ryder

“I get prompts while driving—give me hands-free options and bigger, clearer actions.”

Paul

Driver, Ryder

“Why am I entering the same truck number three times? The app should already know that.”

Susan

Driver, Ryder

02 Define

Meet Alex, one of our fleet managers

Persona #1: From these findings, I defined one of our primary personas: Alex Martin, a fleet manager overseeing dozens of vehicles. Evan’s goals are speed, reliability, and accuracy — he doesn’t have time to decipher complex layouts.His frustration stemmed from information overload and inconsistent patterns between modules.

Alex: Synthesis results

Persona #1: Fleet managers struggled with alert overload, siloed maintenance/parts data, and time-consuming approvals. We introduced a Fit-to-Deploy dashboard that rolls up asset status with shared Status Pills, added deep drill-downs (asset → job → part → warranty/cost), enabled bulk approvals and assignments, and surfaced data freshness with quick export/deep links for action. The result is a priority-first view that speeds return-to-service, improves confidence in decisions, and aligns teams around a single source of truth.

Meet Mike, one of our drivers

Persona #2: From these findings, I defined one of our primary personas: Mike Santos, a delivery driver responsible for time-critical deliveries. Mike’s goals are safety, speed, and reliability—he needs one-glance clarity for loads, stops, and ETAs and doesn’t have time to decipher complex layouts. His frustrations include cluttered screens, inconsistent patterns between modules, and core actions buried behind too many taps.

Mike: Synthesis results

Persona #2: Research showed drivers were slowed by too many taps, small targets in a vibrating cab, and re-entering known info during roadside events. We redesigned the Driver Home into a Trip Card that opens with Next Stop, ETA, Navigation, Roadside, and POD in one place, raised touch targets to 44–48dp, added biometric quick re-auth, and built offline queuing + auto-sync so tasks don’t stall in low signal. Document capture now includes auto-edge detect and glare guidance. Together, these changes make in-cab actions faster, clearer, and safer while reducing avoidable support friction.

Quick Wins: Combined synthesis results for manager and driver

• Priority-first sorting (severity/age) + pinned exceptions
  Customize default list/order so the most urgent or relevant items are at the top.
  
• Standard “Status Pill” language (OK / Warning / Action Needed)
  Tokenize colors/labels and reuse the same component across Driver + Manager views.
  
• Deep links everywhere
  From cards, toasts, and messages straight to the target screen (Trip, Work Order, Asset, POD).
• Data freshness timestamp (+ manual refresh)
  A small “Updated 2m ago” label in headers; add a Refresh action—build once, use everywhere.
• Global action affordances
  Larger CTAs (44–48dp), clearer labels, and consistent placement; on desktop add basic shortcuts (e.g., Enter = confirm), especially for upcoming updates and vital messages
• Unified feedback states
  Shared patterns for Queued / Syncing / Failed + Retry banners and toasts—same copy and visuals across roles.

03 Design

MUI Design Principles

Working within the MUI design framework, I developed a modular system of cards, tables, and navigation components adaptable across Ryder’s digital ecosystem. Here are a few design principles for MUI:

• Consistency through Systemized Components
  
• Accessibility and Inclusivity
  
• Responsive and Adaptive Design
• Visual Hierarchy and Information Density
• Motion and Feedback
• Theming and Brand Alignment
• Clarity and Efficiency
• Scalability and Maintainability

The visual approach emphasized clarity, hierarchy, and brand integrity.

Typography, color, and motion were unified under one system, making each interaction consistent and intuitive.

Key MVP map enhancements:

• Simplified navigation bar anchored by user tasks.
  
• Clarified Vehicle Clustering, cutting time to access roadside assistance by 30%.
  
• Introduced consistent representation of vehicles in/out of shop, increasing comprehension.

Map Design

In the RyderGyde map redesign, MUI design principles guided the creation of a cleaner, more consistent and accessible interface. The MUI Grid system ensured responsive layouts that adapted seamlessly between mobile and tablet displays, while elevation and color tokens were used to distinguish route states, vehicle markers, and alert zones without visual clutter. Typography hierarchy made key data — such as ETA, asset ID, and location status — instantly scannable, and accessibility tokens ensured contrast and tap targets met WCAG standards for in-cab use. Overall, MUI’s structured visual language helped simplify complex geospatial data into an intuitive, brand-aligned, and safely operable map experience.

Previous map design

New MUI map design-system iconography with larger touch targets.

New map designs

New map design

04 Testing

After building interactive prototypes, we conducted remote usability sessions with fleet managers and drivers.

Tasks included locating service information, initiating roadside requests, and tracking vehicle history.

Results:

• 92% success rate finding next stop and ETA accomplished without assistance.
  
• 2 out of 3 participants described the new flow as “cleaner and faster.”
  
• Notably fewer clicks were required to check vehicle health.
• Customers on weekly call, overwhelmingly (anecdotally) approved new direction of design.

05 Final UI

The new RyderGyde interface reflects a mature, enterprise-grade experience—bold typography, structured layouts, and seamless integration of the MUI component library.

Every element serves a purpose: data tables are readable at a glance, alerts are color-coded for urgency, and the overall tone is calm and industrial, mirroring Ryder’s brand.

Before → After comparison:

• Disjointed modules → Unified, responsive architecture
  
• Visual clutter → Simplified, functional minimalism
  
• Static visuals → Contextual design with feedback cues

07 Next Steps

Following the redesign, Ryder’s digital team began extending the MUI system across additional tools, including Maintenance Scheduling, Fuel Management, and Driver Insights AI dashboards.

Future enhancements will explore AI-powered anomaly detection and predictive maintenance features to further reduce downtime.

Personally, this project reinforced my belief that system-driven design isn’t about uniformity—it’s about empowering users through predictability.

With the new design system in place, Ryder now has the foundation to scale its digital experience intelligently and cohesively.