Building a design system from the ground up to create a cohesive brand and UX within the ELD application

eFleetSuite Design System

Role

  • UX/UI Design

  • Design System Management

  • Documentation

  • Redesign

Design Tools & Deliverables

  • Figma

  • Component Library

  • Personas

Collaborators

João Silva - Senior UX Designer

Denise Grove - Product Manager

Abhijeet Kher - Engineering Manager

Project Overview

eFleetSuite ELD is an Android tablet application and a web-based admin portal that streamlines the process of logging driving data for truck drivers. The objective of the eFleetSuite design system was to save time for software engineers, user experience designers, and product managers by establishing standardized components and design patterns. This eliminates guesswork and ensures consistency across new feature development. My role in the project was to audit, design, and document the existing legacy design system, followed by proposing a possible redesign. Throughout the project, I collaborated closely with the design and product management teams to ensure a successful launch.

Discovery

Audit Documentation

To create a comprehensive component library for eFleetSuite, we began with an in-depth audit to inventory assets, typography, components, and design patterns. This involved a thorough examination of the Android tablet application and the web-based admin portal.

eFleetSuite Android Application

eFleetSuite Web Application

Analysis

Personas

To gain a deeper understanding of our users, we developed two major personas: the driver and the motor carrier. To gather valuable insights, we conducted informal interviews with product managers and sales engineers. These personas provided a clear picture of our users' needs, goals, and pain points.

Motor Carrier Employee

Truck Driver Persona

Competitive Research

To inform and guide the design process, we conducted a comprehensive analysis of competing products and solutions in the transportation industry. This research helped us identify industry standards, best practices, innovative features, and design approaches. We also gained insights into the strengths and weaknesses of our competitors, which influenced our design decisions.

Design

Foundations

When building the design system, we carefully considered both the legacy system and Google's Material Design guidelines. Our aim was to strike a balance between maintaining existing patterns and promoting accessibility and modernity. Additionally, we planned for a future redesign aligned with Trimble Transportation's branding guidelines, following their acquisition of Innovative Software Engineering. The design system's foundations included grid systems, spacing scales, typography, color systems, and iconography.

eFleetSuite Design System Foundations in Figma

Typography

Typography plays a crucial role in designing an Android tablet application for vehicles. We established guidelines to ensure large, readable text with a font size not below 24px. This ensures optimal readability for drivers and supports their focus on the task at hand. Additionally, we maintained ample spacing between elements to enhance clarity and facilitate quick and efficient interaction.

Component Library

To enable consistent and efficient development across mobile and web platforms, we created a comprehensive component library. This library included highly requested features prioritized by engineers and ELD-compliant design patterns.

eFleetSuite Design System Mobile Components in Figma

Mobile Components

The mobile component library encompassed buttons, form fields, status indicators, tables, dialogs, headers, and alerts. We emphasized the implementation of a grid system for consistent layout, aligning with Google's Automotive OS guidelines. Typography recommendations were followed to improve readability and ensure driver safety.

eFleetSuite Design System Web Components in Figma

Web Components

The web component library offered more design flexibility compared to its mobile counterpart. It included components such as headers, buttons, form fields, and tables, providing a refreshed look while adhering to the overall design system.

Learnings Recap

This project provided invaluable learning experiences for the entire team. Conducting a UI/UX audit for the application, which had not undergone such assessment before, revealed inconsistencies and a lack of documentation in the customer journey. Through internal user interviews with truck drivers, we gained insights into their frustrations and daily workarounds. Working with legacy systems presented its own set of challenges; however, the design system and personas now serve as documentation of available design patterns for engineers and product managers. This has led to time savings in the design stage and improved customer satisfaction by reducing complaints.

Benefits

  • Time Savings: Standardized design components and patterns streamline the design stage for engineers and product managers.

  • Improved Customer Satisfaction: Consistent and user-friendly design reduces customer complaints and enhances the overall experience.

Legacy Systems

Working with legacy systems presented its unique challenges. Our design system aims to educate everyone involved in the application and promote modern design practices. However, until these practices are fully adopted, the design system and personas serve as essential documentation of available design patterns. By providing engineers and product managers with a clear reference, this documentation has proven to be instrumental in saving time and improving the overall user experience.

eFleetSuite Web Portal Home Terminal Detail Screen Before and After

More Designs

Helping candidates find their job match one note at a time

Crafting a Unified Design System to Transform Mental Health Experiences with Intuitive and Engaging Interfaces

A strategic UX overhaul fostering engagement, empowerment, and aesthetic coherence in the realm of dance.