EV Charging App
A public EV charging app designed from early product definition to a developer-ready mobile system.
At CODEBASE Ar-Ge, I led the design of an EV charging product from early exploration to a developer-ready system. Before the first design pass, I had already worked as a software tester inside a major Turkish charging operator, which gave me direct exposure to the business rules, backend dependencies, and recurring failure points behind competing apps.
Context & Problem
The product had to support the full charging journey: station discovery, charger and power filtering, live socket availability, station status, and charge initiation. That complexity sat on top of real operational constraints I already knew from earlier testing work in the sector. I had seen where charging apps broke in practice, where backend assumptions leaked into the interface, and where users lost trust.
The product owner wanted something clearly distinct from operator apps already on the market, but it still had to stay realistic for analysts and developers to ship. The design challenge was to make the experience clearer without pretending away the system complexity underneath it.
Map exploration in light and dark modes, built around live station pins, search, and power filters.
Station selection view that surfaces connector state, pricing, live occupancy, and session actions before charging begins.
Approach
I started by auditing competing charging apps and separating patterns that genuinely helped users from ones that only added friction. Some early directions were dropped because they were visually different without improving the product, or too expensive to build for too little user value.
The work moved forward once the system narrowed around decisions that improved clarity and could be implemented reliably. In Figma, that became a full component library built with auto-layout, variants, and variables, plus wireflows and high-fidelity prototypes covering the core charging journey. I worked closely with the product owner, analyst team, frontend developers, and backend developers on how the experience, logic, and implementation details should meet.
A key screen was the station detail view. It used a real-data busyness histogram: the current hour is marked in white, dark gray bars show average usage by hour across the last 30 days, and interaction reveals average AC and DC socket usage for that location. The goal was to help people judge when to charge, not only whether a station was technically available.
Location detail view with live socket counts and an interactive histogram showing average AC and DC usage by hour.
Figma system file organizing screens, components, and usage states into a handoff-ready library.
Outcome
The result was a full mobile product definition with production-level screens, resolved charging flows, and a design system developers could implement without guesswork. Reviews with the product owner, testers, and engineers kept the work aligned with real platform constraints, and the final Figma file stayed ready for handoff through the end of the project.
The app was later discontinued because of a business decision unrelated to the design or technical work, leaving a finished system that was still ready to build.
Core charging flow covering station selection, payment setup, active session tracking, and station search in one production-ready prototype.