Fleet Component Library
The scalable component library enhanced iteration speed and development efficiency, resulting in a cohesive design system for the future and improved consistency across the enterprise platform.
01/ Summary
The Product
Verizon Connect Enterprise Fleet
Fleet is a software solution designed to help manage large fleets efficiently. It offers vehicle monitoring and ensures driver compliance with ELD (Electronic Logging Device), HOS (Hours of Service), and EV (Electric Vehicle) management. Fleet is used by major businesses such as Costco and Aussiemove International.
The Problem
Verizon Connect Fleet lacked a consistent set of icons, typography, colors, components, and templates, creating challenges for the engineering and design teams to make quick iterations on the fleet product. With the help of my design team in Christchurch, I created a scalable design sticker sheet from scratch.
Background
Verizon Connect Fleet needed a unified design system to streamline the development process and enhance user experience.
My Role
-
Audited the fleet upon joining the company
-
Identified and addressed inconsistencies
-
Communicated early and often with key stakeholders
-
Initiated the development of the UI library
-
Proposed next steps to evolve the UI library into a comprehensive design system
02/ Process
Auditing the enterprise product (Challenge #1)
Before building anything, my mindset is always to understand the depth of the product. This approach was crucial during my initial task at Verizon Connect. I aimed to thoroughly comprehend the product, so I audited the entire Fleet enterprise tool. This audit helped me understand the product's intricacies and identify any inconsistencies and problems.
02 / 01
💡Hover to see the auditing process ↓
Some of my auditing process with Fleet enterprise software
Collecting feedback about Fleet design problem from CFTs
Taking to stakeholders to understand the problem
After auditing, I addressed the issue of inconsistency by consulting a cross-functional team from QA, engineering, product, marketing, and support. I asked them, "What inconsistencies have you observed in the software?"
02 / 02
Finding out resources
During the process of implementing the fleet design system, we conducted several design trials that ultimately proved unsuccessful. However, I found it beneficial to review old files. In doing so, I came across a Sketch file containing all the components, albeit unnamed. This discovery facilitated the reuse of these components within the system.
02 / 03
Old sketch file of Fleet with components
Atomic Design by Brad Frost - Give it a read if you didn't 😊
Undertanding Atomic Design Methodology
One of my colleagues suggested reading "Atomic Design" by Brad Frost. We used this as a foundation to build our design library, thereby creating an opportunity to expand the current implementation into a comprehensive design system in the future.
Atomic Design by Brad Frost
-
Atoms: Basic elements (e.g., buttons, inputs).
-
Molecules: Groups of atoms (e.g., search bar).
-
Organisms: Complex components (e.g., header).
-
Templates: Layouts without content.
-
Pages: Templates with real content.
It ensures consistency and scalability in design.
02 / 04
03/ Design implementation
Starting small with Perceptual patterns
I started building from small elements such as icons, fonts, and colors. I streamlined the colors into three categories: Primary, which includes three key brand colors; Secondary, which covers colors related to error, warning, and information; and lastly, Greyscale. It was essential to narrow this down to 12 colors, each having its specific use case within the fleet software.
03 / 01
Colors, Font and Icons
Variants -> nested components to complete a elements(Showing how I put together Fleet navigation)
Working with functional components
Using the power of Figma nested components and variants, the initial complexity was challenging. However, building a strong foundation will be beneficial, ensuring that everything is scalable and replaceable in the future.
03 / 02
Commuicate early and often
I often communicate with my cross-functional team about the work I'm doing, especially on projects like this. I bring these updates up in our stand-up meetings with engineers, product sync-ups, and town halls to gather feedback. Additionally, I usually hold an internal feedback session every week with my design team and a fortnightly session with the design system team in Dublin.
03 / 03
Communicating with CFTs (Definitely not us 😅 I made this with Copilot to provide context for the content) - The actual meetings were conducted online and couldn't be recorded.
Slide to know more, some of the UI library for Enterprise Fleet
Creating UI library
Now it's time for me to put together a UI component library, starting with all the required functional patterns such as:
-
Buttons
-
System messages
-
Form elements
-
Data Grid
-
Navigation
-
Window elements
-
Empty States
-
Maps
-
Layout (We only have a desktop app)
03 / 04
Documenting component usage
The key to a good design library is providing as much information as possible for the usage of the components created. Therefore, I ensured that I provided context on what can be done with each component. For example, buttons can be dragged and users can make the necessary changes in the design.
03 / 05
Copying button from the main component and showcasing the documentation
04/ Outcome
After implementing the UI library, I should make sure that everything is working and fiablity for designing any interface of enteripse fleet software, so I tested it will all the compoenent and putoether entire page like suggested in atomic design process
Some more templates of other screens from Enterprise Fleet made using the component library.
05/ Next steps and Future
Starting to gain buy-in to expand this into a design system with senior stakeholders.
I approached key stakeholders, including my manager and the experience director, to propose expanding our component library into a full design system. I emphasized that this system would not only benefit designers but also streamline processes for everyone in the organization. By providing consistent guidelines and reusable components, we can improve efficiency, reduce errors, and enhance collaboration across all teams.
Establishing a Governance Process
To build and introduce new components to the UI library, my colleague worked on a page called Dispatch. Through the established governance process, he was able to bring in the design and add components effectively.
Impact
The sticker sheet allowed for quicker iterations, improving the overall efficiency of the development process. Customers benefited from a more cohesive and user-friendly interface, leading to increased satisfaction.
Learning
learned how to collaborate effectively, bringing everyone to the table and understanding their perspectives. Additionally, I leveraged existing systems to build the foundation of the UI library, evolving it into a design system based on atomic design principles.
Key Points
-
Collaboration: Engaged with cross-functional teams to gather input and foster understanding.
-
Leveraging Old Systems: Used existing components as the base for the UI library.
-
Building the Design System: Applied atomic design principles to structure and expand the library.
-
Governance Process: Ensured consistent integration and updates through a structured process.
-
Scalability and Usability: Created a scalable and user-friendly design system for all team members.
More case studies
Implemented Light mode for driver app
The sticker sheet sped up iterations and boosted development efficiency, resulting in a cohesive, user-friendly interface that increased customer satisfaction.