Optimizing Fleet Tracking
Fleet Tracking Software for Small to Enterprise Fleets
Holistic Map Project
While working as a senior product designer for a fleet tracking software and hardware company, I was tasked with improving the Map page for over 150k daily users, which would be no small feat. I quickly realized there were too many new requirements coming in from different areas such as product roadmaps, customer support, and outside partner solutions. The current map page wouldn’t be able handle it all with the existing experience.
I took a step back and initiated the Holistic Map Project, which started by identifying the main user roles and found their main tasks, goals, and motivations for using the map to track their fleets. Next I determined how those user types were accomplishing their tasks and goals using the current map UI and functions, which I was able to discover through 45 minute user interviews, a link to a survey found on the map page, and evaluating analytics.
An interesting insight: We found that our users were instinctively drawn to the visualizations of the Map and would use it as a jumping off point to navigate to other areas in the system, even though what they were trying to accomplish had nothing to do with the real time location of their fleet. This lead to a HMW statement that impacted another project: “How might we aid users to form better navigational habits?”
Complex Filters
The current map experience was found to be overloaded and cluttered, but users were still demanding more ways to view their fleets. One thing was obvious, the filters on the map needed a revamp.
Fleet managers needed a way to quickly apply filters as well as save those sets of filters for later. I also found that the filter components needed to be more clear of what had already been applied. As for the types of filters available, I established a list of data points that would need to be built into the backend.
Because the map page is the highest traffic page of the system, it was critical that we get the new filter bar to be as solid as possible, as it would influence the rest of the design system and all other pages. I brought the proposed new design to our design team for weekly critiques, launched a study on usertesting.com to test my prototypes, and got stakeholder buy-in to release the new filter bar on the map for a beta selection of users.
Overall feedback was positive. The new filter bar was proven to reduce the amount of time fleet managers spent manually searching for individual vehicles, allowed for more ways to view groups within fleets, and helped users save those views to be able to quickly jump between them, which we actually found had a pretty high adoption rate!
Search
After starting research into the needs of our map users and understanding that locating a vehicle is the number one task of a fleet manager, I noticed that the current UI of the map page had a very unusual behaviour when searching. When a user was interacting with the search bar, they were essentially selecting the vehicles to show on the map, not searching within the entire fleet.
The search bar needed to be complex since fleet managers wanted to be able to quickly search for:
Individual vehicles
Groups of vehicles
Drivers
Locations (addresses or pre-defined zones)
I added a way for users to scope their search, and found after testing that this helped users reduce the amount of typing to find the intended result, creating a much faster search for the map.
Interestingly, the expected result from the different search types was not always the same. After a user searched for a vehicle, their next step would vary greatly depending on the task they were trying to accomplish, which could be to contact the driver of that vehicle, or to schedule that vehicle for an upcoming route or maintenance later in the week. I started to understand when the user expected the map to zoom into the area to show the element they were searching for, versus staying at the same zoom level and highlighting the searched element within the visible screen. Context of the locations of the rest of the fleet was not always needed, depending on the search type.
Vehicle detail View
Since fleet managers were searching for vehicles as a jumping off point to accomplish tasks, I designed a “card” detail view of the vehicle to offer quick ways to accomplish tasks right on the map. The card shows the vehicle and driver’s statuses, and allows for quick common actions. I wanted fleet managers to get an overall snapshot of what the vehicle and driver were doing at any given moment, then take next steps.
This feature that I designed had amazing reception with users that we tested with, as well as our internal support team and product teams.
Mobile Updates
Through research and analytics I found that one third of fleet managers were accessing the map page through a mobile device, and that our current mobile map experience was very subpar to the desktop. Utilizing modern mobile patterns and practices, I improved the mobile experience so that fleet managers could quickly locate vehicles, perform quick actions from a drawer, and have a more focused experience with less clutter.
A few examples of the quick wins I was able to bring to the map page’s mobile experience:
Ensured any action on mobile would be available through a drawer or full screen take over, since the old experience had drop-downs and modals opening over top of the map.
Condensed the most used map actions into the header and used icon buttons rather than full text buttons to keep the UI uncluttered and clean.
I made sure that all the elements on the map screen had the proper touch target sizes, as the previous version was extremely hard to use.
NEW UI Components
When it came to updating the map’s vehicle symbols, I wanted to make sure our users would see something a bit familiar, and not have to relearn the application. But the shortcomings with the existing symbols were some of the shapes themselves had no meaning, that they were coloured at random, and didn’t have a positive rating by fleet managers who wanted to see something more modern and updated.
To give the colour meaning, we assign the vehicle icon a colour ONLY when filters were applied, so they could easily be differentiated between groups or status. I ensured the colour palette on the map would be fully compliant with accessibility standards. The shapes were updated and contained in a circle so all the symbols would have the same weight and visual hierarchy. I also gave the map vehicle list an updated layout to allow for faster scanning.