Way2Charge : EV Charging & Parking App UI/UX Case Study

Way2Charge Electric vehicle charging station locator and reserve spot app thumbnail The official Way to Charge logo featuring the w2c icon in a blue rounded square with a red location pin accent next to the brand name in bold black text.

Problem Statement

Design a user-centric mobile application interface for electric vehicle (EV) charging and parking, aiming to enhance the user experience in a sustainable and efficient manner. The challenge is to create an innovative solution that seamlessly integrates charging station location services, a smooth charging experience, and smart parking functionalities.

Device: Android

Research

Competitor Analysis

EV Charging and Parking application market is crowded. So, I conducted a competitive analysis of leading finance assistant applications like PlugShare, Tata Power EX Charge, Ather Grid. By examining their features and functionalities, I identified key strengths and weaknesses. The review section in the play store helped me understand a wide range of problems users faced.

Competitor analysis of the Plugshare app highlighting strengths such as filtering for different plugs and weaknesses like the inability to copy addresses or make in-app payments. Competitor analysis of Tata Power EZ Charge app showcasing strengths like built-in payment options and weaknesses like the lack of a route planner and charging speed information

User Journey Map

By using user journey map I visualized the experience a user has when interacting with the app. This helped me know their goals, feelings, Pain points and opportunities to help the user.

A comprehensive user journey map table documenting user steps from low battery to charging completion, including feelings, pain points, and design opportunities.

User Flows

By leveraging user flows, I created a detailed roadmap guiding users from onboarding to app mastery. I created multiple flows, conditions, alternative solutions for the conditions to solve their challenges.

Route planner

A detailed user flow diagram showing the logic for a route planner, including decision points for using current location, searching by name, or selecting a start point from a map.

Pay for EV Charging

A flowchart illustrating the payment process for EV charging, including QR code scanning, wallet balance checks, and password verification steps.

Reserve a Charging Station

A user flow mapping the process of reserving a charging station, including Set Alert logic if a charger is currently unavailable.

User Interface

Problem and Solutions

EV charging station app landing page showing map view with green charger pins and search filters. Route planner interface showing a blue travel path with available EV charging stations along the way. Advanced filter page for EV charging stations with options for kilowatt range, distance, and connector types. EV station detail view showing charger types, distance, availability, and a reserve button. Vehicle status dashboard displaying Tesla Model 3 battery percentage, charging speed, and remaining range. In-app digital wallet interface showing account balance, transaction history, and add/withdraw money options. App settings menu with options for notifications, bookmarks, charging sessions, and accessibility features.

Design Solutions

UI solution showing how users can display bookmarked saved locations directly on the map via a filter. Comparison showing the solution for in-app payments and the ability to withdraw remaining wallet funds. Visual explanation of the route planning feature that filters charging stations specifically along a chosen travel route. A slide explaining the reservation feature; the problem is chargers being occupied upon arrival, and the solution is a Reserve button on the mobile app interface. A slide highlighting the notification feature; the problem is not knowing when a nearby port becomes free, and the solution is a bell icon to set availability alerts. A slide showing real-time status alerts; the problem is arriving at a station during a power cut, and the solution is a Closed due to Powercut warning tag on the station profile. A slide showing a high-impact error screen; the problem is an unplugged charger interrupting a session, and the solution is a full-screen Charger Removed flashing alert.

Design Decisions

UX design principles for the map screen: Simplicity through minimal text, clarity with recognizable icons, and brand identity using a blue primary color. Navigation route interface showing consistency in location icons, a thick stroke for better route clarity, and isolation of the locator icon with a circle. EV station detail popup using a stroke for container prominence and green color psychology to indicate connector availability. Filter screen layout using an F-pattern for scannability, consistent iconography for charger types, and clear labels for user understanding. Vehicle status screen demonstrating grouping of related data, a visual hierarchy that prioritizes battery percentage, and grey colors to indicate a disabled charging state. Charging feedback screen using a dropdown icon for interactive elements and dynamic feedback where the battery icon changes appearance based on the charge state. Wallet and transaction history screen utilizing bold text for visual contrast, generous whitespace to prevent clutter, and distinct button designs for withdrawal and adding money Settings menu design focusing on accessibility by combining text with icons and a clear hierarchy to guide user attention to important elements.