Reducing clicks/scrolling for Station Management

Optimizing EV Charging CMS by streamlining Station Management UX to minimize clicks and scrolling, ensuring users remain focused and productive.

Product Design


Project Overview

Client:
Zeon Electric is driving India's EV revolution by building a reliable, accessible charging network operating over 500 charge points and have electrified 15,000+ kms of highways.

My Role:
UI/UX Design Intern
Collaborated with the design team to enhance the ZWIZ CMS Dashboard user experience. Key contributions included reducing clicks and scrolling for Station Management.

Timeline:
April-May (2024)

Tools:
Figma

Team Members:
Mohammed Hayas (Senior Designer), Madan S (Team Head Network Operations).


What is Station Management?

In an EV Charging CMS (Charging Management System), the section where users or operators manage charger settings is most commonly called the "Station Management" section. Zeon Electric manages thousands of charge points for franchises across India, providing fast, secure, and seamless operations with comprehensive configuration tools.


How did user/operators previously manage charger settings within the Station Management section?


Problems Identified

High Interaction Cost & Buried Content
The initial interface requires significant effort to navigate. Essential charger details and action buttons are placed far from the primary data table, forcing users to perform repetitive, precise movements to manage a single charger.

Lack of Localized Control
The control panel features "global" buttons (like Soft Reset or Hard Reset) that do not specify which connector (CCS, Type 2, etc.) they are affecting. This creates ambiguity and potential for operational errors.

Double Scroll (Nested Scrolling)
The data table is confined within a small container that triggers both vertical and horizontal scrollbars simultaneously. This "scroll-within-a-scroll" forces the user to move in two directions just to view a few basic rows of data.

Redundant Tables
The interface displays two identical tables for "Recent" and "Active" sessions at the same time. This layout wastes significant screen real estate and increases the user's cognitive load as they must determine which table is relevant to their current task.


Solution

Consolidating the Interface (Reducing Interaction Cost), introduced a Unified Management Pane. Now, selecting a charger in the list immediately populates a comprehensive control dashboard on the same screen, keeping all actions within a single focal point.

Localized Connector Control, Buttons are now contextually grouped under specific connector tabs (e.g., "Connector-1"). This ensures that actions like "Soft Reset" or "Remote Start" are localized to the specific hardware being serviced, eliminating operational errors.

Eliminating Double Scrolling, optimized the Information Density. By using a responsive grid and better scaled columns, eliminated the horizontal overflow. Users can now see more rows at a glance without "scroll" friction.

Removing Redundancy, merged these into a single Dynamic Tab Component. Operators can now toggle between "Active" and "Recent" views instantly.



Usability and Testing

User testing was outside the initial project scope due to the internship timeline, but the designs were internally reviewed by the team.


Challenges and Learnings
  • It was difficult to fit technical data, charger status, and control buttons onto one screen without it looking cluttered.

  • I learned that a Unified Management Pane is better than multiple pop-ups because it keeps the user’s attention in one place.

  • I discovered that removing "Double Scrolling" significantly speeds up how fast an operator can finish their task.


I transformed a slow, cluttered legacy system into a unified, high-density dashboard that eliminates unnecessary scrolling, consolidates redundant data, and provides localized connector controls to make station management faster and error-free.

Create a free website with Framer, the website builder loved by startups, designers and agencies.