EV Charging Management Platform
UX/UI Design for EroEV

- EroEV
- Electric Mobility
- SaaS Platform Design & Development
- 1 UI/UX Designer 2 Full Stack Developer
- 2024 - Ongoing

About EroEV
EroEV is a CleanTech SaaS platform built to manage and grow EV charging networks. The platform brings together four groups that need to work in sync: charging providers who own and operate the infrastructure, station administrators who configure and monitor it, and EV drivers who need to locate a charger, plug in, and pay without friction.
The technical backbone is OCPP 1.6, the industry-standard protocol for communication between EV chargers and the management software running them. Through this, EroEV gives drivers real-time session monitoring, remote charging control, and Razorpay-powered digital wallet payments. On the other side, administrators and providers get complete visibility over their stations, connectors, sessions, and revenue through a centralised web platform.
When EroEV came to us in 2024, they had the infrastructure vision and the hardware. What they needed was the software: a full-stack platform designed and developed from scratch, built for a market where EV adoption was accelerating faster than the tools to support it.
Goal of the Design
EroEV is a scalable EV Charging Management Platform that connects drivers, charging providers, and administrators through a unified ecosystem.
The solution includes a React Native mobile app for locating and booking chargers, monitoring charging sessions, and making seamless payments, along with dedicated web dashboards for providers and administrators to manage stations, users, transactions, and network operations. Built on OCPP 1.6 with a real-time WebSocket backend, the platform ensures reliable communication and seamless charging experiences across the network.
- Locate available chargers within a 5 km radius, select a connector, set a charging goal by kWh or target spend amount, initiate the session remotely, track live progress, and complete payment through a Razorpay digital wallet automatically on session close.
- Charging providers register their business and station locations, then configure and manage OCPP 1.6-compatible chargers under their accounts through a dedicated web dashboard.
- Platform administrators provision chargers, monitor all providers and stations, manage users and transactions, and track revenue and operational performance across the entire network.
- Websocket infrastructure that handles multiple simultaneous charging sessions, live meter values, and real-time command processing without connection drops or session failures.
Challenges
Building a platform that connects physical charging hardware to software users through a real-time communication protocol is not a straightforward design problem. These were the challenges that shaped every decision:
Scaling OCPP 1.6 When Every Second Counts:
- OCPP 1.6 websocket connections between the platform and chargers need to stay live through the entire charging session. Every few seconds, the charger sends live meter values back to the platform. When a session hits its target, the platform sends a stop command. If the connection drops at any point, the session breaks and the driver is left mid-charge. Scaling this to handle dozens of concurrent sessions required backend database optimisation and server scaling before the UX could work as designed.
Three Distinct User Types, One Unified Platform:
- A charging provider logging in wants to see their stations, sessions, and revenue. An administrator needs visibility across every provider and every transaction on the network. An EV driver on their phone wants the nearest available charger and a way to start charging in under a minute. Designing for all three without any one interface bleeding into another required strict role-based architecture from the start.
Making Goal-Based Charging Feel Obvious, Not Complicated:
- Setting a charging target by kWh or by spend amount is a feature most EV apps do not offer. For drivers used to plugging in and unplugging manually, this is a new mental model. The UX had to introduce and explain this option at the right moment in the flow without adding steps, without requiring a tutorial, and without creating doubt about whether the session would actually stop at the right point.
Designing for a Market Still Finding Its Shape:
- India’s EV charging infrastructure in 2024 was early. Standards were being adopted. User habits around public charging were forming in real time. The platform had to be designed for how things work today while being built in a way that can absorb new charger types, new payment methods, and new providers without needing a fundamental rebuild every 18 months.
Our Approach
Discover
Before designing any screen, we mapped the three user groups and the journeys they each take through the platform. These groups do not overlap. Their goals, their information needs, and their definition of success are all different.
We approached this in the same way we approached our mobile app UX design for Snap-E Cabs, another electric mobility product where distinct user roles and real-time infrastructure data had to be made simple for people who just want to get moving:
- EV drivers: goal is to find a working charger, start a session, and pay without confusion. Anxiety points are availability uncertainty, payment failures, and not knowing if the session is running correctly.
- Charging providers: goal is to onboard their stations quickly and monitor performance and revenue without needing platform support for every action. Pain point is complexity in OCPP station configuration.
- Platform administrators: goal is full network visibility and control. They need to see everything, act on anything, and trust that the data they see reflects what is actually happening at the physical charger.
This mapping decided the entire information architecture before wireframing started. Getting the mental models right first meant the design never had to fight the user.
Define: Platform Architecture and UX System
The structural decision was to build three separate interfaces connected through one data layer, not one interface with role filters. Each user type gets its own navigation logic, its own dashboard structure, and its own information hierarchy. The shared components sit underneath.
For the mobile app, we defined the full UX flow from registration through first charge: Razorpay wallet setup was built into the onboarding sequence so payment was never a blocker during a live session. Station discovery was built around a 5 km radius default with connector type and availability visible at the map level. Charging initiation was scoped to three to four taps from the map to an active session.
For the web platform, we structured the provider dashboard around what a charging station operator actually checks daily: station status, active sessions, revenue summary, and any charger requiring attention. The admin console was layered above this with full network scope: all providers, all transactions, all charger configurations.
The OCPP 1.6 architecture diagram mapping provider to station to charger was built into the provider onboarding design as a reference, so new providers understood the hierarchy before they started configuring their first charger.
Design Highlights

The visual direction had to serve a technically complex SaaS platform without making it feel like an engineering console. A charging provider checking their network at 9am needs to read session status and revenue in under 30 seconds. An EV driver opening the app in a car park needs to get to an active charging session in under a minute. Every design decision was measured against those two tests.
The full UI was designed in Figma across both the React Native mobile app and the web platform. The provider onboarding flow, the three-tab driver journey (discover, charge, pay), the real-time session screen with live kWh counter, and the admin and provider dashboards were all prototyped and iterated before development handoff.
The completed design and development build delivered:
- A complete Figma UI design system covering all components, states, and flows for the mobile app and web platform, built for handoff to the React Native and web development teams
- React Native mobile app UI covering station discovery on a map, connector selection, goal-based charging setup (kWh or spend amount), live session monitoring, Razorpay wallet management, and charging history
- Web dashboard UI for providers covering station onboarding, charger configuration, session monitoring, and revenue reporting, plus a separate admin console for full network oversight and OCPP provisioning
- Full OCPP 1.6 backend integration: real-time websocket connections, remote start and stop commands, live meter value handling, connector status updates, and concurrent session management built to scale
From onboarding the first charging station to managing thousands of charging sessions, the delivered platform enables EroEV to:
- Built for Drivers: Drivers can easily locate nearby charging stations, select compatible connectors, define charging goals, start sessions remotely, and complete secure Razorpay payments—all through a seamless mobile experience.
- Built for Charging Providers: Providers can independently onboard, configure, and manage charging stations, monitor charging sessions, and track revenue through a centralized dashboard without relying on the platform team.
- Built for Network Visibility: Administrators gain complete operational oversight with real-time visibility into providers, charging stations, transactions, and charger health from a single unified dashboard.
- Built for Scale: A robust OCPP 1.6-powered backend supports concurrent charging sessions reliably and provides the flexibility to expand across new providers, stations, and cities as the charging network grows.

Final Product Showcase
Three interfaces, one platform. A mobile app that makes finding and starting a charge as simple as four taps. A provider dashboard that gives station owners the operational control they need without requiring a support ticket for every configuration change. An admin console that keeps the whole network accountable.
EroEV is one of the more technically involved products we have built. The platform spans physical hardware, OCPP protocol communication, real-time data handling, digital wallet payments, and multi-role access, all in one product. None of that complexity should be visible to the person opening the app in a car park. Good CleanTech SaaS design hides the machinery and shows people what they need.
If you are building an EV charging platform, a CleanTech app, or any SaaS product that serves multiple user types with different needs, the approach we took for EroEV applies directly. You can also see similar multi-role product thinking in our fintech app dashboard design work and in our broader UI/UX development projects.
See more of our work:
→ View All Case Studies












































