ChargePoint Station
Project & Role
I led the design of the station user interface to make it easy for users to charge. I also created prototypes in InVision. A member of our team built a prototype of the station with an iPad for the user interface. We tested the user interface and made improvements based on feedback. I prototyped UI animations in Pixate to make the station provide a responsive and delightful experience to users.
Design
Most of the calls to ChargePoint support are new drivers calling to figure out how to charge. We wanted to address this in the station design. The goals for the design were:
A simple first time experience that drivers can figure out easily
A visually engaging user interface that communicates the station status clearly
A consistent experience with the mobile app
FIRST TIME EXPERIENCE
When standing in front of the station, drivers need to know how to charge, and how much it costs. We included this information prominently on the screen. The main instruction on the screen says, “Tap your phone or ChargePoint card below” and there is a button to see the price. Near Field Communication (NFC) technology allows the driver to simply tap their phone on the station’s RFID reader to start charging. Users can create a digital member card by using NFC technology on their Android and iOS devices. This technology simplifies the first-time experience of charging, as drivers don’t need to wait for the RFID card to arrive in the mail, or in the case of pressing “Start Charge” in the app, figure out which station they’re standing in front of when there is a row of stations.
Drivers do need to sign up with the charging network to be able to tap to charge, so we included instructions on the station screen explaining they need to sign up in the mobile app. The two screens, instructing the driver about tap to charge, and signing up with ChargePoint, animate and rotate at regular intervals.
For users who want to press Start Charge in the mobile app, they need to identify the station they're in front of. The station name is present prominently to help with this. The station names are created by hosts, and the free-form field results in names that are hard to read. To improve station names, we designed a new activation set up with a proposal to do automatic numbering.
CLEAR COMMUNICATION
In order to simplify the interaction with the station, relevant information is presented step-by-step instead of explaining everything up front. After the user taps their phone, an authorization screen is displayed, and then a screen instructing the driver to plug in. There is also sound feedback to tell people that the plug (which is locked in the station before authorization) has been unlocked.
When the user taps their card, the card animates in from the bottom to provide confirmation. The instruction bar with the “Tap your phone to start” message also animates to show the various states of the station.
After the user plugs in, the charging status screen is shown. There is sound feedback on the station to tell users the charging has started if they plug in and walk away. The charging status screen shows the estimated miles of range added to help drivers figure out how long they need to charge. The units of energy or kWh are provided for people who need that information, but it is de-prioritized to make the information more user friendly.
CONSISTENT EXPERIENCE
The visual style and information provided is consistent with the mobile app.
DUAL-PORT STATIONS
For stations with two ports, the status of each port is shown on the main screen.
Impact
We tested the station user interface in Berlin, and users were able to figure out how to charge and found it easy to use. The design was shown to auto manufacturers and was received well. The station won an Eletrek.com best of CES award at CES 2017.