Revamping the EV Charging Experience: User App Redesign

Transforming the mobile app interface used by EV owners to manage their vehicle charging process.

Role

UX Design

Software used

Figma

Duration

1 month

Overview

The project aimed to revamp the existing EV charging app to improve user experience, modernize the visual design, and introduce new functionalities.

Identifying the Challenges

Original Issues:

Cluttered user interface
Lack of information and visual hierarchy
Lacked advance features to streamline the charging experience for EV vehicle users

Objective:

Enhance the user experience
Update the visual design
Add functionalities to support evolving user needs

Limitations:

No User Research done due to time constraints.
Analysis based on verbal feedback from the team.
Focused on iterations rather than a full redesign.

Design Strategy

The approach was to balance the need for gradual improvement while maintaining consistency in the user experience.

Modernise the color scheme and typography.
Update the visual language to align with current design trends.
Introduce new features for functionality enhancement.

Visual Redesign

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:

Based on user behavior insights, the "Stations" section was identified as the most frequently used, prompting its replacement of the "Charge" section in the old app's navigation.
In the previous design, users who clicked on "Charge" were still required to search for a charging station, which introduced unnecessary steps and redundancy in the user flow. To streamline the experience and eliminate confusion, this adjustment in the navigation bar was implemented, making it more intuitive and efficient for users to access charging stations directly.
Another example is the 'Card preview' of a particular charge station.The below image shows the card detail provided on the maps page; showing information of Charge stations ; with respect to the focus point on the map. The cards can be swiped through and the map gets updated accordingly.

Improvements

Old Design:

Cluttered information.
Lack of visual hierarchy.
Limited color differentiation.

New Design:

Larger, more organised layout with clear separation of information.
Enhanced cards with detailed information including rating, distance, availability, and operational hours.
Improved visual hierarchy and color differentiation for better readability and user decision-making.

Overview

The project aimed to revamp the existing EV charging app to improve user experience, modernize the visual design, and introduce new functionalities.

Identifying the Challenges

Original Issues:

Cluttered user interface
Lack of information and visual hierarchy
Lacked advance features to streamline the charging experience for EV vehicle users

Objective:

Enhance the user experience
Update the visual design
Add functionalities to support evolving user needs

Limitations:

No User Research done due to time constraints.
Analysis based on verbal feedback from the team.
Focused on iterations rather than a full redesign.

Design Strategy

The approach was to balance the need for gradual improvement while maintaining consistency in the user experience.

Modernise the color scheme and typography.
Update the visual language to align with current design trends.
Introduce new features for functionality enhancement.

Visual Redesign

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:

Based on user behavior insights, the "Stations" section was identified as the most frequently used, prompting its replacement of the "Charge" section in the old app's navigation.
In the previous design, users who clicked on "Charge" were still required to search for a charging station, which introduced unnecessary steps and redundancy in the user flow. To streamline the experience and eliminate confusion, this adjustment in the navigation bar was implemented, making it more intuitive and efficient for users to access charging stations directly.
Another example is the 'Card preview' of a particular charge station.The below image shows the card detail provided on the maps page; showing information of Charge stations ; with respect to the focus point on the map. The cards can be swiped through and the map gets updated accordingly.

Improvements

Old Design:

Cluttered information.
Lack of visual hierarchy.
Limited color differentiation.

New Design:

Larger, more organised layout with clear separation of information.
Enhanced cards with detailed information including rating, distance, availability, and operational hours.
Improved visual hierarchy and color differentiation for better readability and user decision-making.

New Interface

Old Interface

New Features:

Effortless Charging:

Feature

Allows users to charge their vehicles without using their phones by adding a unique Vehicle Identification number(VID),which is usually the VIN number specific for a particular vehicle.

Benefit

Enhances user convenience by enabling a simple plug-in process, eliminating the need for a mobile device.

Challenge

This new feature will require iterations based on Usability testing in the later stages.

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

Stage 5. 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.

a black cellphone with a white letter on it

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.