Redesigning the ChargePoint mobile app
Project & Role
The ChargePoint app allows users to find charging stations for their electric vehicles, and start charging. I led the redesign of the ChargePoint mobile app for Android and iOS. My responsibilities included: designing the interaction, prototyping the app in Invision and animations in Framer.js, planning and conducting research to test the design, and creating final visual design based on a style guide created by another designer on our team.
Design
The existing app had a 2.5 star rating on both iOS and Android. The goal was to redesign the app to better meet the needs of users, and to improve ratings.
Based on interviews with users, and conducting usability testing with the existing app, we uncovered their needs.
FINDING STATIONS
Electric cars use blue color on the dashboard to indicate they're charging. ChargePoint has used green and blue colors in the app to indicate if the station is available or in use. We found in our testing that drivers didn't understand this color coding. To help with this, I designed the station overview to show a label with what the color means.
To help drivers easily pick a station, I simplified the information shown on the station overview. To further simplify the interaction, I designed the overview to show the right information based on context: the nearest available station is shown when the user is not charging and the charging status is shown when they’re charging.
I explored the different possibilities of showing the information in low-fidelity wireframes:
I created a prototype in Invision and we tested the design with users. Users were able to figure out the status of the stations quickly, and found the navigation easy to use. We found that some users were not clear that they could press on the overview to get more details on the station. Based on this, I designed animation to indicate to users that the overview slides up and there is more information.
I worked with the ChargePoint visual style and the Android Material design principles to create the final visual design:
FIRST TIME EXPERIENCE
When drivers first get an EV, we learned there is a significant learning curve. Drivers didn’t understand the energy unit, kWh, and the pricing being based on kWh. They also didn't understand the different types of connectors that cars have: J1772, CHAdeMo, CCS etc.
To help drivers understand pricing, I designed the station details page to provided an estimate based on how long they charged instead of kWh consumed. During sign up, we ask people for their car. Based on this, the map automatically shows only stations that work with their car so they don't have to worry about different connector types. I designed the UI for entering the car, and we made it delightful by showing images of people’s cars when they add them.
Most of the calls to ChargePoint support are from new drivers who are in front a station, and don’t know how to charge. I designed the station details page to show a prominent “Start Charge” button.
IMPROVING STATION RELIABILITY
Drivers also provided feedback about going to a station, and finding that it wasn't working. They wanted a way to be sure if the station worked before heading there. Our stations are connected to the network, and a competitive advantage is being able to provide real time status and usage. I designed a “Last Used” section that shows if someone charged at a station recently and what car they charged. This helps drivers figure out if a station is working.
We also found that drivers had trouble finding the station after they reach its location. Photos of the location can help with this, and I designed a way for people to add photos to the station details page.
When a station was in use, drivers wanted to know when it became available. I designed a way for drivers to get notified when a station becomes available. Additionally, to help drivers plan their charging, the Popular Times section in the app shows drivers historic usage information.
ChargePoint received complaints about the price for charging being too high or that the station wasn't serviced when it was down. Stations are owned by the people who bought the stations, not ChargePoint, and it wasn't clear to drivers that ChargePoint wasn't responsible for all stations. I added language next to the price section to make it clear who was setting the price.
Drivers were reporting problems at stations as tips, which weren't being monitored by the station owner or ChargePoint. I designed a "Report a problem" link next to the Tips section, and provided structured fields for drivers to report problems accurately. The support team is using this feedback to act on issues quickly.
Impact
The app ratings have improved from 2.5 stars to 4.5 stars. The app also got great reviews on the app store:
"I'm all about simplicity and ease of use and this app gets it."
"Love the new layout."
"This app is beautiful! What a great job at Material Design. Very impressive!"
Since the introduction of the Start Charge button, calls to ChargePoint support to start a session have gone down. ChargePoint Support has also been happy with the structured reporting we designed, and are acting on problems quicker.
Apple featured the iOS app as an app of the day.