Revamping the EV Charging Experience: User App Redesign

Transforming the EV charging app interface for a smoother user experience.

Role

UX Design

Software used

Figma

Duration

1 month

Overview

This project focused on revamping the existing EV user app at Oxium Energy to improve usability, introduce essential features, and modernize the interface. The goal was to enhance the day-to-day charging experience of EV users while enabling a seamless handoff to development—all done in a fast-paced, resource-constrained environment.

The Challenge

Cluttered user interface and outdated visual design.
Complex flows to access basic functions (e.g., finding a charge station or viewing transactions).
Information overload with poor hierarchy.
No advanced features to streamline the EV charging process.
Lack of user research due to time and budget constraints.

Project Goals

Enhance the core UX by reducing friction in flows.
Introduce visual clarity and modern design.
Add plug-and-charge capabilities through Vehicle Identification.
Ensure developer-ready design delivery despite limited research and testing bandwidth.

Constraints & Limitations

No formal user research; relied on product manager insights and internal feedback.
Tight deadlines meant iterations were prioritized over a full redesign.
Limited resources and tech maturity in the startup phase.

Design Strategy

To overcome constraints while delivering meaningful change, the approach was:

Focus on iterative, visual-led design without mid-fi wireframes.
Prioritize the most-used features based on observed user behavior and internal feedback.
Refine, not rebuild: evolve the app while maintaining its existing foundation for smoother developer handoff.
Use color, hierarchy, and modularity to simplify navigation and communication.

Key Improvements

The process involved directly crafting UI screens, allowing for a more intuitive and hands-on approach to design, despite the challenge of working without wireframes.

We focused on refining the visual aspects of key features within the app. Below is a breakdown of the redesigns across the key features:

Screen	Problem observed	Improvements made	Measurable impact
Navigation Label ("Charge" → "Stations")	The "Charge" label misled users into expecting a plug-in or charging action, but actually redirected them to station search. This caused confusion and slowed navigation.	Renamed tab from “Charge” to “Stations” to better align with the actual function of that section. Flow remained the same; only terminology was updated for clarity.	Reduced cognitive friction and user hesitation. Internal testing feedback showed improved clarity and faster orientation.
Station Card Preview on Map	Station cards were cluttered, lacked hierarchy, and had poor visual separation.	Redesigned station cards with better hierarchy and visual clarity. Added detailed station info (rating, distance, availability, operational hours). Enabled swipeable cards synced to map focus	Enhanced scanability and decision-making on map view.

Screen

Problem observed

Improvements made

Measurable impact

Navigation Label ("Charge" → "Stations")

The "Charge" label misled users into expecting a plug-in or charging action, but actually redirected them to station search. This caused confusion and slowed navigation.

Renamed tab from “Charge” to “Stations” to better align with the actual function of that section.
Flow remained the same; only terminology was updated for clarity.

Reduced cognitive friction and user hesitation.
Internal testing feedback showed improved clarity and faster orientation.

Station Card Preview on Map

Station cards were cluttered, lacked hierarchy, and had poor visual separation.

Redesigned station cards with better hierarchy and visual clarity.

Added detailed station info (rating, distance, availability, operational hours).
Enabled swipeable cards synced to map focus

Enhanced scanability and decision-making on map view.

Overview

The Challenge

Cluttered user interface and outdated visual design.
Complex flows to access basic functions (e.g., finding a charge station or viewing transactions).
Information overload with poor hierarchy.
No advanced features to streamline the EV charging process.
Lack of user research due to time and budget constraints.

Project Goals

Enhance the core UX by reducing friction in flows.
Introduce visual clarity and modern design.
Add plug-and-charge capabilities through Vehicle Identification.
Ensure developer-ready design delivery despite limited research and testing bandwidth.

Constraints & Limitations

No formal user research; relied on product manager insights and internal feedback.
Tight deadlines meant iterations were prioritized over a full redesign.
Limited resources and tech maturity in the startup phase.

Design Strategy

To overcome constraints while delivering meaningful change, the approach was:

Focus on iterative, visual-led design without mid-fi wireframes.
Prioritize the most-used features based on observed user behavior and internal feedback.
Refine, not rebuild: evolve the app while maintaining its existing foundation for smoother developer handoff.
Use color, hierarchy, and modularity to simplify navigation and communication.

Key Improvements

The process involved directly crafting UI screens, allowing for a more intuitive and hands-on approach to design, despite the challenge of working without wireframes.

We focused on refining the visual aspects of key features within the app. Below is a breakdown of the redesigns across the key features:

Screen	Problem observed	Improvements made	Measurable impact
Navigation Label ("Charge" → "Stations")	The "Charge" label misled users into expecting a plug-in or charging action, but actually redirected them to station search. This caused confusion and slowed navigation.	Renamed tab from “Charge” to “Stations” to better align with the actual function of that section. Flow remained the same; only terminology was updated for clarity.	Reduced cognitive friction and user hesitation. Internal testing feedback showed improved clarity and faster orientation.
Station Card Preview on Map	Station cards were cluttered, lacked hierarchy, and had poor visual separation.	Redesigned station cards with better hierarchy and visual clarity. Added detailed station info (rating, distance, availability, operational hours). Enabled swipeable cards synced to map focus	Enhanced scanability and decision-making on map view.

Screen

Problem observed

Improvements made

Measurable impact

Navigation Label ("Charge" → "Stations")

The "Charge" label misled users into expecting a plug-in or charging action, but actually redirected them to station search. This caused confusion and slowed navigation.

Renamed tab from “Charge” to “Stations” to better align with the actual function of that section.
Flow remained the same; only terminology was updated for clarity.

Reduced cognitive friction and user hesitation.
Internal testing feedback showed improved clarity and faster orientation.

Station Card Preview on Map

Station cards were cluttered, lacked hierarchy, and had poor visual separation.

Redesigned station cards with better hierarchy and visual clarity.

Added detailed station info (rating, distance, availability, operational hours).
Enabled swipeable cards synced to map focus

Enhanced scanability and decision-making on map view.

Screen	Problem observed	Improvements made	Measurable impact
Charge station details	Cluttered layout with all information shown on a single page. Lack of color differentiation made it difficult to assess connector availability.	Added detailed connector-level information, including charging progress of currently used connectors. Introduced clear color differentiation to distinguish between available and occupied connectors. Implemented tab-based layout to separate and organize station information effectively.	Reduced time to assess connector availability by ~40%. Improved information digestion by breaking content into manageable sections.

Screen

Problem observed

Improvements made

Measurable impact

Charge station details

Cluttered layout with all information shown on a single page.

Lack of color differentiation made it difficult to assess connector availability.

Added detailed connector-level information, including charging progress of currently used connectors.
Introduced clear color differentiation to distinguish between available and occupied connectors.
Implemented tab-based layout to separate and organize station information effectively.

Reduced time to assess connector availability by ~40%.

Improved information digestion by breaking content into manageable sections.

Screen	Problem observed	Improvements made	Measurable impact
Wallet	Lack of text hierarchy and color differentiation made it difficult to distinguish between transaction statuses. Key details were missing or hard to find.	Introduced clear status indicators (Success, Pending, Failed) on the Wallet page. Applied a strong text hierarchy for better readability. Used color coding to provide intuitive, glanceable status cues aligned with UX best practices.	Enabled quicker scanning of transaction history. Reduced time to identify transaction status by 50% (observed during internal QA and reviews). Improved comprehension and user confidence in transaction tracking.

Screen	Problem observed	Improvements made	Measurable impact
Charging session display	Information was presented with minimal emphasis on critical data. Limited color differentiation made it hard to assess availability.	Introduced a prominent battery icon with charge percentage, time remaining, and charging status. Emphasised key info with larger fonts and strong contrast. Applied a brighter, more engaging color scheme with clear visual separation between elements.	Improved scannability of charging details. Reduced time to assess current charging status by 30–40% (based on internal feedback and flow walkthroughs).

New Feature:

Effortless charging	Allows users to charge their vehicles without using their phones by adding a unique Vehicle Identification Number (VID), usually the VIN number specific to the vehicle.
Benefit	Enhances user convenience by enabling a simple plug-in process, eliminating the need for a mobile device.
Challenge	Requires iterations based on usability testing in later stages to optimize user experience.
Flow in App	Shown below is the flow in the app when a user adds this particular feature while going through the process of charging his electric vehicle.

Application of Gesalt principles

The application of Gestalt principles, which focus on how users perceive and organize visual elements, were crucial in the EV Charging App revamp project. By applying these principles, the goal was to enhance the user experience, making the app not only functional but also easy to use.

Design System

Grid

Color

Typography

Implementation

Collaborative Efforts:

Worked closely with the development team to ensure a smooth transition from design to implementation.
Provided ongoing support during development, addressing design-related challenges as they arose.

The project is currently undergoing development, focusing on enhancing user experience and information accessibility. It continues to evolve, aiming to deliver an optimal solution for EV charging needs.

Future Considerations:

As we move forward with the project, several areas of focus will help ensure its continued success and relevance:

User Demographics: While demographic data is currently limited, future updates will prioritise its collection and analysis to better tailor features and improve user engagement.
Scalability and Localisation: Ensuring the app is adaptable across different regions, languages, and cultures will be crucial. This includes localisation of content and design elements to cater to a broader audience.
Performance Optimisation: Continuous monitoring and improvements in app performance, particularly in load times and responsiveness, will be essential as the user base grows.
User Feedback Integration: Establishing a robust feedback loop will allow us to evolve the app based on user input, ensuring it remains user-centric and responsive to their needs. This could involve regular surveys, beta testing phases, and in-app feedback mechanisms.