Designing a new web product for EV fleets
ProBLEM
Public transport providers are switching their buses from gas-fueled vehicles to electric vehicles. ChargePoint was providing the chargers and saw a business opportunity to create a new software product for fleet owners to charge and manage their electric vehicles. We wanted to create a great experience for managing electric vehicle fleets.
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.
RESEARCH
To understand the needs of fleet owners, the product and UX team visited 5 depots in California. 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.
Key insights from the research:
Gas-fueling takes less than 10 minutes, while EV charging takes up to 4 hours and needs monitoring.
Depot managers would like to just have the vehicles be ready for their trips without having to constantly monitor.
Depot managers would like to see the status of charging at a glance and identify any issues.
EXPLORATION
Based on the research insights, I designed the workflow so fleet owners can get the information they need at a glance. I created a prototype and tested it with users.
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:
We were building a new app, and the design team wanted to take this opportunity to create a design system for all of our web apps. I worked closely with two other designers to create the design system for ChargePoint web apps.
FINAL DESIGN
I applied the design system, and incorporated feedback from testing the prototype to create the final 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.
I prototyped animations in Figma:
ITERATION
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.