Statement
It is a UI challeng for the user to navigate an optimal charging station route. As a real sustainable and future-oriented person, he drives an Electric Vehicle (EV). He has an appointment at the HQ in Amsterdam and he will be driving there from Eindhoven, 130km away. Just a couple of hours before he finds out that he still needs 80km to finish this journey. So he uses the App to help him find the optimal route to the charging station.
Problem
1.How might we help drivers to check how much power he/she left?
2.How might we help drivers to find the charging station?
3.How might we help the driver to book the time slot at the charging station?
Assumption
The user plans a route to his parents, but the app knows that there’s not enough power to make the trip. The app warns him and to plan advises via a charging station.
On the map the user sees which part of the route he can’t complete and sees his range and charging stations on the map. He selects a charging station, the route gets re-planned via the station and in the more info section, he can make an appointment.
1
2
In this page, I want to tell the user there is not enough power for this car. And how much power they still need to achieve the destination.
1. the car doesn’t have enough power
2.how much power they still need to complete the trip—>emergency level
3.suggest them to find the route which goes via charging station
The original sentence “Not enough power to reach your destination” is too long and not clear for users to read when they are driving, so I use the short sentence “not enough power’” to remind users. It will be more strong and clear when they don’t have enough time to read while driving.
Because the user is driving, it is better to use less but important information on the screen. So I think they just need to know two information on this screen. First, the car doesn’t have enough power to drive. Second, how much power they still need for completing this trip.
Recommendation:
Users can see the distance of the charging station from them and choose the nearest one
4. I add the button to go back to the last step for users who want to see the information on the last screen.
5.The starting point is a car which symbolizes the user, and the navigation recommendation will change by the head of the car and the destination. Gradation of navigation line symbolizes movement of the car.
6. I add the station name and the distance from the station to the user, they can see which station is near clearly.
7. Because this is a map, users need to know where they are and relocate to the place they are.
3
After clicking the strip button of the sheet, they can pick the time slot.
8. They can see the detail which helps users in selecting. Include ranking, business hours of this power station.
4
Confirm the power station:
After selecting the station button they can see the detail information of this station.
9. I think they just need to know the name and the ranks of this station on this page, and if they want to see more information they can click the strip button on top of the sheet.
10. When the user clicks the station button, they can tell the button is selected by its color. And can see the details of this station.
5
Users can move the map.
11. Users can move the map to a clear position for them to see the navigation line.
12. After clicking the book appointment button, the color will be dark green to let users know they already selected.