Evungo
About: innovative cloud-based web platform designed by Lab 1886, part of Mercedes-Benz, that allows adding, sharing, and managing electric vehicle (EV) charging stations. The solution is made for property and gastronomy owners who want to expand their business amongst the EV community.
Role: UX/UI designer; mentored UX/UI design intern; worked closely with the user researcher, UX copy-writer, engineers under the leadership of PO and co-founders.
Duration: 10 month
Services:
- Value Proposition Design
- UX Design
- Wireframing
- Usability Tests
- UI Design
Problem:
charge point owners have no simple end-to-end solution to share green energy with EV drivers.
Strategy and Approach
Re-defined target users and shaped up MVP
After the exploration and validation stages our team discovered market and user needs, we shifted our focus from the EV drivers to charge point (CP) owners, as we detected more opportunities in B2B sector. During feasibility and viability analysis we came up with the set of most desirable features which we framed into MVP. When the incubation stage started the team was ready to wireframe validated ideas.
B2B user (our target): Small business owners in rural areas (restaurants, hotels, golf clubs) who are happy to support EV drivers by installing CPs and sharing the electricity on the exchange of time spent on their premises.
B2B user pains:
- no end-to-end solution available in the market which would combine purchasing, installation, CP registration, maintenance and promotion for EV drivers;
- online CP registration;
- online CP activation;
- overview of CP performance;
- CP unblocking for charging;
- offer special conditions for the customers when charging in the premises of CP owner;
- CP owners are willing to share energy from their stations free of charge to help evolving EV network;
- minimal physical involvement during the charging session process.
Designed wireframes
I designed high-fidelity prototypes as we planned to test them after. According to the previous field studies, many users tend to drop-out when adding a charging station to the platform (due to unclear technical details and the number of steps they needed to fill in). So, together with the engineers, we found a solution to detect and fill in the information on a newly added charging station automatically during the registration process.
CP unblocking for charging
As we found out earlier, CP owners wanted to allow charging at their premises only for their customers. So, I suggested controlling CP manually through our platform each time the driver requests charging. Each CP might have 1 to 3 plugs, so we need to reflect which one is in use currently as well as set the time for charging.
CP performance was one of the most desired features as well. It was challenging to find a way of showing the number of charging sessions and energy spent when selecting a timeframe, as it could vary from a day to a year.
Validated MVP by usability testing
Once the wireframes were ready, I prepared 3 scenarios for the usability test: 1) onboarding; 2) adding new CP to the platform; 3) managing just added CP. There were 9 testers in total, and we split them into 3 groups. I prepared the tasks for each group to test if the flow makes sense, ease of use of the platform if the UX copy was clear enough.
After the usability test, I found out that:
- Tooltips were highly used and appreciated among the testers.
- The section title “Control Centre” was not self-explanatory.
- The duration of charging was mixed up with the CP opening hours.
- Part of the users wouldn’t like to unlock CP manually, as they wanted to share the energy for all drivers for free when the other part wanted to charge drivers when using their stations.
Interaction observations:
- Confusion when to hit the “Save” button and when the changes are saved automatically.
- When adding new CP, the testers were clicking the next step name instead of the “Next” button at the bottom of the page.
- Inability to find where to change the timeframe duration of CP performance overview.
Iterated the design and prepared the UI
I moved the calendar closer to the graph/table tabs on the “Overview” page. Also, I limit the graph view to a week due to technical constraints and visual restrictions. However, the user could set the time duration in the calendar per day, weak, month, or year.
To keep the consistency and meet users’ mental models I removed “Save” button from several pages and replaced it by auto save indicated by sticky confirmation message on top of the page.
We had two customer types – those who would like to control each charging session manually and the ones who prefer things working automatically. Also, there were some back-end hardware restrictions as well as the EV driver demands (like good internet coverage; downloading any app or online register is not required; availability of the charging price before payment). So, we decided to offer automated and manual CP control and a simple charging solution for the EV driver based on a QR-code scan.
The CP owner could set one of the options: “Fixed” or “Flexible”. With “Fixed” (manual option) it was possible to set time and price per charge and the station would unlock after the driver would pay a fee. And for those, who wanted to share their energy 24/7 we introduced a “Flexible” option, so the station would be always unlocked for free charging.
By scanning the QR code sticked to the CP the EV driver would get right directly to the charging initiation web page without any registration. He could start charging for free (if it was set to “Flexible” charging by the CP owner) or pay online (“Fixed” charging).
Additionally, I created a style guide and constantly worked with front-end engineers on QA-ing the design. The project was successfully launched for an internal MVP test in the targeted area (Grünwald, a suburb of Munich).
Key learnings
- When stakeholders are talking with users they start thinking like designers.
- When innovating, it is better to use already familiar interaction patterns.
- The sequential presentation of nondestructive hints helps users to learn the interface.
- Progressive disclosure notifications are suggestive and do not constrain users, so they do not make mistakes.
- Validated “quick and dirty” designs are better than shiny and polished assumptions.
Things I’d change
- Promote the product much earlier to increase sales and brand awareness.
- Replace CP to the one that supports “Tap-to-Pay” solution (Android users need to have an app to scan a QR code. Remote areas have weak internet coverage, so online payment still seems to be a hassle).
- Include UX Copy-Writer to the early project stage, before testing wireframes.
- Find a tool for a more efficient way of collaboration with the UX Copy-Writer.