NETGURU
Category
Sustainable Energy
A mobile app that guides EV drivers from finding a charging point to completing a session — covering discovery, smart and simple charging flows, payment, and real-time charging status.
Overview
An energy company operating a public EV charging network needed a mobile app that could take a driver from "I need to charge" to "I am charged and gone" without friction, while also giving their internal teams a design system to build on as the product grew. I worked side by side with another product designer to design the app end-to-end and establish the design system behind it, from early workshops through handover to engineering.
Goal
The goal of this project is to build a scalable approach by improving the SimpleSocket (Direct Access) product and build the design system.
My Role
Co-designed the full application: onboarding, charge discovery, the charging flow, and error/edge-case states
Partnered on building out the design system from scratch — components, patterns, and a Figma styleguide — alongside the UI work, so the system and the product matured together rather than one waiting on the other
Ran design work in close collaboration with a second designer, splitting and reviewing flows together to keep the product consistent end to end
Handed off finished designs and component documentation directly to the development team.
Approach
The project was scoped in phases, which shaped how the design work unfolded:
Direct design support: early-stage workshops and hands-on design work to get functional requirements defined, tighten up the design language, and start spotting repeating patterns worth systematising.
Ecosystem analysis & design system setup: workshops to understand the client's broader product landscape, then a components library built for the highest-priority app first (so development could start without waiting for the entire system to be finished), followed by deeper analysis across the rest of the product suite to extract shared patterns and requirements.
Further design work: expanding and refining flows as requirements solidified.
Ongoing design system work: transitioning the system into a maintained, living resource rather than a one-off deliverable.
This phased structure meant design decisions were never made in a vacuum. Each phase's findings fed directly into scoping the next, which kept the system grounded in real product needs instead of a top-down spec.
User Journey Mapping
Before screens were finalized, the end-to-end journey was mapped out to make sure every path — not just the "happy path" — was accounted for.
This covered:
Entry & onboarding — from QR code scan through platform access, privacy consent, and onboarding, branching out to language settings, destination search, and a customer support chat bot
Charge point discovery — searching for a destination, viewing a map of nearby charging points, selecting a preferred location, and getting directions
Two charging entry points — a "smart charging" path and a "simple socket" path, both converging into a shared personal information, consent, and payment flow
Payment & session setup — consent, charging type selection (immediate vs. smart charging), payment method (credit card or Apple Pay), and charging level display
Completion & feedback — charging information display, a success page, feedback rating and modal, and confirmation sent by email, with a separate flow for the invoice being emailed once charging completes
Mapping this out end-to-end surfaced shared steps (like consent and payment) that could be designed once and reused across multiple entry points, rather than being redesigned for each flow individually — directly feeding the component decisions in the design system.
Key Flows Designed
Onboarding & tutorial: introducing the app and setting preferences (language, plug type) before first use.
Home / status screen: a clear "plugged in" state showing charge status at a glance.
Charging point search: a map-based experience for finding nearby charging locations, with results surfaced as a scannable list.
Charge setup: entering payment and charging details with minimal steps.
Charging in progress & summary: real-time progress feedback, followed by a clear summary and feedback prompt once charging completes.
Error states: handling out-of-service points, connection issues, and other failure modes without dead-ending the user.
Landscape / horizontal mode: ensuring the core experience held up when the device was rotated, not just designed as portrait-only.
Design System Thinking
Rather than treating the UI and the system as separate tracks, components were extracted as they emerged from real screens, thus, every component in the library was already proven in a live flow before being formalised. This kept the system practical rather than speculative, and gave the development team a component library they could build from with confidence on day one, instead of waiting for a "perfect" system to ship first.
Outcome
The project delivered a complete app design, a documented component library and styleguide in Figma, defined user journeys, and a direct handover to the development team.
Shipped on schedule: the app launched within the timeline set out in the original project scope.
Adopted by the client's team: the component library wasn't just handed off, it was actively taken up and built on by the client's own team going forward.
Live product: the app shipped, taking the design system from a proposed structure to something proven in production.
This laid the foundation for the client's broader design system work to continue as an ongoing, maintained practice rather than a one-time engagement.
