Fleet Management Web App
Public transport providers and delivery companies are switching their buses and trucks from gas-fueled vehicles to electric vehicles. ChargePoint was providing the chargers and wanted to create a new software product for fleet owners to charge and manage their electric vehicles. The app needs to help the users accomplish these tasks: Charge and monitor vehicles, dispatch vehicles to routes, manage energy at the site, and manage stations.
My Role
As an IC: I was the lead designer. I led research with customers and worked closely with the product management team to define the MVP. I explored concepts for navigation and information architecture and designed the core flows of the app. I led discussions with engineering and product management to finalize the design.
Leadership: As the scope of the product grew, we brought in 3 more designers to work on additional features. I managed their work. As a team lead, I divided work among the designers and led design critiques in the design team. I also identified design components and worked with 2 designers to start our design system.
Understanding user needs and figuring out MVP
To understand the needs of fleet owners, the product and UX team visited 3 bus depots and a truck depot. We conducted a workshop at each site to document the workflow for preparing and scheduling gas-fueled vehicles. I documented the research and identified insights that will guide the design.
Exploring concepts and socializing with the team
To make the transition easy to electric vehicles, we wanted to minimize changes to the workflow involved with gas vehicles. The fleet owners just wanted the vehicles to be ready in time, and only to be involved if there are any issues with the charging. I designed screens to show the status at a glance and make them aware of any issues.
The Fleet management app needed to work with our existing station management app. I explored various options and created the navigation and architecture for the Fleet app.
To make the information glanceable and to make the app visually interesting, we explored different ways of displaying information - cards for the different entities (depot, fleet, vehicle) instead of table rows:
Finalized Design
The yard managers wanted to see the charging status of their vehicles, quickly identify any issues with charging, and to get information about the battery level so they can assign buses to routes based on their battery. We designed a view to help them accomplish this.
During the research, we also learned that yard managers wanted to locate their buses in the depot. We designed a map view to show all of the vehicles.
For fleet owners to view and manage their vehicles, we designed a Fleet section that provided information about vehicles at a glance.
As their charging needs grow, fleet managers will need to manage the energy use at their site. Anticipating this, we wanted to help them visualize their energy use and manage how it is used. I worked very closely with the PM to define the MVP and designed the visualization and settings screens.
Visual Design: Creating a design system
Taking the components I created in the exploration, we worked with our brand team to create the final visual design. I worked closely with two other designers to start the design system for ChargePoint web apps.
I also prototyped animations in Figma:
Iterating with user feedback
We deployed the app to multiple customers and engaged with them to get feedback on the app. We made improvements based on their feedback. A couple examples are below.
The vehicle page was updated to focus on the charging status and reduce the focus on the vehicle on-route as the depot managers said that was not their focus.
We organized the energy settings page better to make it easier to understand based on the user’s feedback.
Impact
The app has been deployed to multiple transit customers and is helping them to electrify their fleets. 8,000+ vehicles have been added. It helped create a new business area and source of revenue for ChargePoint.
The fleet app was mentioned when ChargePoint was recognized as one of the most innovative companies in North America by Fast Company.