Before anyone plugged in, I mapped every way to charge.
For oncharge's mobile app and station kiosk I was the Junior UX Designer on the team. I built the user flow and the low-fidelity wireframes on my own, working them through with the client step by step, and drew some of the kiosk illustrations.
A charging network, and the app that runs it
oncharge is Kalyon Group's electric-vehicle charging network in Turkey, with AC and DC fast chargers across the country. The app is how a driver finds a free station, reserves it, starts a charge and pays; the kiosk on the charger has to tell the same story to someone standing right next to it.
The whole journey on one map
Before any screen, I mapped the product as a single flow: onboarding, membership with individual or company billing, the station map, reservations, profile, charge history. Two paths are colour-coded through it, green to start a charge and orange to finish one, from scanning the QR code to the payment check and the summary screen.
Every screen, button and decision point, including the error branches.
Open questions written onto the map, answered with the client as we went.
The app and the kiosk, drawn straight from the agreed flow.
// full user flow · open at full size ↗
Low fidelity, on purpose
I drew the low-fidelity wireframes for the app and the kiosk directly from the flow, so the client could react to structure before style: the station map, station details, reservations with a dial for charge time, vehicles and connector types, charge history. The high-fidelity screens were then designed on top of that layer.
// the wireframe board, notes and all
// reservation · low-fi above, high-fi below
The same gesture on the charger
A driver can start a charge with an oncharge card or with a QR code from the app, so the kiosk had to feel like part of the app rather than a separate machine. It carries the same language and the same charging animation. I drew some of the illustrations for the kiosk screens.
// kiosk · welcome screen
The flow came first, and everything else was built on it.
Owning the flow and the wireframes as a junior meant carrying the client conversations myself and keeping every decision written down where the whole team could see it. The app and the kiosk screens are on Dribbble (app, kiosk), and the network itself lives at oncharge.com.tr.
View the app on Dribbble ↗