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.

Improvements

Old Design:

Lack of color differentiation.
Cluttered layout.
All information about the charge station in one page; which is overwhelming to a user.

New Design:

Detailed connector information; such as showing progress of current vehicle being charged for a busy connector, helping the user make an informed decision while choosing a connector.
Enhanced color differentiation for quick assessment of available and unavailable charging points.
Information hierarchy is maintained by introducing tabs to switch between required information.

Improvements

Old Design:

The absence of text hierarchy and color differentiation made it difficult for users to quickly identify successful, pending, or failed transactions.
Key information missing

New Design:

Status of Transactions: Clear and concise transaction statuses have been added to the Wallet page, providing users with immediate feedback on whether a transaction is complete, pending, or failed.
Text Hierarchy: The new Wallet page design utilises text hierarchy to enhance readability , ensuring that users can quickly scan through their history.
Color Differentiation:This application of color coding adheres to the UX principle of providing immediate, intuitive feedback to users, allowing them to quickly understand and prioritise their actions based on visual cues.

Improvements

Old Design:

Information was presented with minimal emphasis on critical data.
Limited color differentiation, making it hard to assess availability.

New Design:

A prominent battery icon with charge percentage, time remaining, and charging status.
Critical information such as the charging percentage and time remaining are emphasised with larger fonts and contrasting colors for easy readability.
Brighter, more engaging color scheme with clear differentiation between elements.

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

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.