Interaction Design Assignment


(Amsterdam, the Netherlands)

Design a solution that helps people to find the best way to overcome the EV range problem


I was working on the assignment several days by spending a couple of hours on each dayThe picture below shows my design process. After the picture, I am presenting everything in details: my way of thinking step-by-step, how I've started, how my design decisions were made and how I came up with the final results.


When I got the assignment, initially I was thinking to start immediately with some user research to get at least some insights from the people around with EV I know - how they deal with planning long-distance trips, etc. But then, I decided to brainstorm on my own first and come up quickly with some concepts based on my own expertise, and only then involve those people to validate the ideas.

The idea, first of all, is to have a system that connects all together:

  • Mobile TomTom App / In-car TomTom navigation system (a user can use one of them or both)

  • Charging App (knows the car's battery level, type of connector, manages charging process, payment procedure, sends notifications, etc.)

The system is smart enough to suggest you optimal route(s) based on your EV range, current battery level, and provide options of the closest available (and suitable for your specific EV) charging stations on your way. Based on the preferences, the algorithm 

of the calculating total time will differ if a user chooses "Departure" or "Arrival" time. In case of using "Arrival" time as an option, the system takes into the consideration that the charging time can be minimised if it's needed in the situation. For example, no needed to charge up to 100% to continue the trip to be able to make it closed to desirable time of arrival to a place (of course it also should consider charging stations on that place to get way back).

So, when planning any long trip with EV, the device is taking into account:

  • full route

  • part of the route that you can make with you current battery level

  • options of charging stations around the area when your car's battery will need to be charged

  • time needed for the first part of the route

  • time needed for charging

  • time needed to continue the trip after the charging 

  • total time needed and estimated time of arrival

To be able to see a full picture and the user flow I decided to visualize it in the story board (see below) based on the example given in the assignment.

Story board

(For the style inspiration - credits to the designer who created a character on the main picture of the assignment)

Peter was super happy to be invited for a first interview at the TomTom HQ in Amsterdam for upcoming Wednesday at 14:00. 

He really wanted to make sure that he is in time for the interview, that's why he planned to start head over to Amsterdam already around 11:45.

But it was exactly the moment he found out that the remaining range of his new car is about only 80km. That’s not enough to make it to Amsterdam... At that moment Peter was super scared that he cannot make it time...

Luckily, together with his new car, Peter got a new navigation TomTom system integrated together with the TomTom mobile App and the charging App. He decided to try it immediately and see what the system will suggest to him. After choosing the "Arrival" option and choosing the exact time he have to be in Amsterdam, the device gave him a hope that he can make it in time, even by taking into account charging time on the way. The system suggested several options of the charging stations around the area when the battery will need to be charged, and showed how much time the whole route will take.

After choosing one of the options of the suggested route with the charging on the way Peter sighed "Phew..." and started to head over towards Amsterdam by singing his favourite song.

When it was a time to charge the car, Peter stopped on the suggested by the system charging station. While waiting for the charging he ordered his favourite cappuccino with a blueberry cheesecake in the cafe near by. He tried to be more relaxed and less stressed before having the important interview. In the App on his mobile phone he could monitor the charging process and how much time left. To save time it was not needed to charge the car's battery fully up to 100%, that's why when it was enough battery level, he got a notification from the App that he can continue driving.

When there was several kilometers left to Amsterdam, Peter felt fully relaxed. At the TomTom office in Amsterdam he was exactly in time!

New navigation system from TomTom, integrated with EV car of Peter, helped him in his situation and provided him seamless user experience with finding the best way to overcome the EV range problem!

Some additional thoughts

After creating the storyboard, some additional thoughts came to my mind about the features that can be also useful in the system (= make the system more smart): 

1. A user can have a mobile App or in-car navigation device, or both. The initial idea is that they both have similar interface features. They are both can be synced with each other. So, a user can use one of them or both alternately, especially if one of the devices is out of service for any reason.

2. The system knows all the technical specifications of a car including a connector type. When charging is needed, based on the situation or chosen preferences in the settings, it suggests high reliable stations with suitable EV charging type (that will help to calculate more or less accurately charging time, thus calculate the total amount of time for the whole route).

3. The device should show real time availability of the charging stations and update info on the way. The system should recalculate the route "on the fly" and inform the user about situations such as high volume of a station, traffic jams, battery status, etc.

4. The system stores users' preferences such as suggesting charging stations only with café, WC, restaurants, baby care places, etc. nearby. Also, when for example travelling with kids, tell to the system to take into account that within the way around 2-3 stops will be needed.

5. If there are any unplanned stops (for a bathroom or other reasons), the smart system recommends to charge the car in charging stations nearby and recalculates the route, so there is no stops for charging needed further as initially planned. 

6. If there is a regular way to drive somewhere and back (for example work <-> home, home <-> park for kids), system remembers those trips and notifies the user if something on the way is changed (charger is broken, restaurant is closed, etc.) and suggests new optimal options.


After all, I started to work on the wireframes to show how I imagine the user interaction - planning a long trip and seeing what the device suggests (based on the example given in the assignment). For the wireframes, I've chosen Balsamiq as a tool, because at that moment I wanted to focus only on capturing ideas and functionality just to present my concept and do not think about hi-fi visual representation yet. 

Remark: In the wireframes I am showing only example of using a mobile phone.

Some parts of the interfaces for Balsamiq I prepared in Adobe Illustrator.

Interactive prototype

To see the interactive prototype please click the button "Check the Demo" below:

User feedback

Luckily on that stage of the design concept I had some time to show the prototype to some people around and got their feedback. There are some valuable points (see below) that I was thinking about but didn't show in the prototype. If I would go further with the assignment I would start the second iteration and would dive more deep and think more thoroughly how to deal with mentioned use cases from the user experience as well as from the technical implementation points of view. 

"I didn't see the point about how the user can set preferences/settings. Trusting the system is nice, but how do I know it is taking into account my wishes? Will it stop in convenient areas for me? Will it warn me about traffic to a certain location? How do I get updates on changes once I enter in and select something?"

"If you want me to choose the first option why give options in the first place? Why would I choose one option over another? Do I know how many times I would need to stop?"

"I would also expect to find information on how much delay is included in the travel time due to traffic jams (based on online information)."

"I would appreciate a suggestion where I can park (ideally at a charging point nearby so the car can charge while I am at the TomTom office. And finally how long does it take me to walk from said charging point to my final destination."

"Perhaps I prepare this journey the evening before, Ideally the application on my phone warns me when it is time to leave (based on the most recent traffic information)."

"You show the distance to the destination. You could consider to make the text red if distance > range and green if distance < range."

"If my phone acts as a portal to the integrated navigation in the EV, then what is displayed on my phone while driving? Or do you consider a scenario without an integrated TomTom navigation system? In that case, how does my phone get the battery status info from my EV? Perhaps you want to show that if the user has an integrated TomTom, she/he enjoys certain advantages over those users that do not have this."