How I Cut the Start Charging Journey Time at ChargeX by Making It a One-Tap Flow
ChargeX is a fast-growing EV charging solution in Europe. But its app had a critical flaw: starting a charging session was confusing, slow, and full of redundant steps. I led the redesign of the Start Charging journey, rethinking it end-to-end to make charging instant, predictable, and effortless. Along the way, I solved deeper usability issues in monitoring, prioritization, and billing, while laying the groundwork for scalability with a new design system.
Impact:
Session Start Time
Reduced by 40%
Support Load
Reduced by 41%
Sales Confidence
Increased by 26%
Design Scalability
Increased by 43%
My Role
I led the end-to-end design from uncovering user and business pain points to conceptualizing solutions, integrating key features, and delivering a complete redesign. I focused on aligning user needs with business goals, driving growth opportunities, and setting the foundation for long-term scalability.
Team
As the solo product designer, I collaborated daily with product managers and the development lead to ensure strategic and technical alignment. I also engaged with stakeholders, customer success, and marketing to gather insights, validate ideas, and shape a unified product vision.
Industry
B2C | E-Mobility, Electric Vehicle Charging
Company
ChargeX GmbH | München, Germany
The Problem
The ChargeX App Promised Easy Charging, but the Core ‘Start Charging’ Flow Was Rarely Used Because It Felt Too Long and Complex
ChargeX App was built with one clear mission: to let EV drivers start charging sessions quickly and effortlessly. But in reality, that mission was failing.
The most important journey, initiating a charge, was used rarely and rated poorly by users. What should have been a single, confident tap turned into a long, complex sequence of steps. First-time users often froze, unsure of what to do next. Even experienced users felt slowed down: the “Charge Now” flow was buried, the path was cluttered with unnecessary taps, and the Drop system added more confusion than value.
🤓
Assumptions are powerful starting points,
but real change demands validation.
I Needed Proof the Charging Flow Was a Real Problem, So I Triangulated Evidence From Tickets, Field Tests, and Surveys
I knew the complaints about the charging flow couldn’t just be brushed off as “edge cases.” To be sure, I set out to validate them from every angle I could reach.
I Ran Surveys With 62 Internal and External Users to Confirm These Charging Flow Frustrations Were Systemic, Not Isolated
I went on the ground at IAA Mobility, watching real people use the app in a live setting.
I dove into support tickets to see the recurring friction points in writing.
Therefore, I Found the Real Reasons Why Starting a Charge Felt Long and Overcomplicated
Once I mapped out the feedback and observations, the real pain points behind the slow charging flow became clear:
😬The main screen distracted from the core task
Instead of guiding users to start charging, the landing page was crowded with secondary options.
😰 The “Charge Now” flow was stretched into too many steps
What should have been one intuitive tap required multiple actions, burying the most important feature behind unnecessary layers.
😤 Repetitive ID entry slowed everything down
Even when QR codes were available, users were still forced to manually type six-digit module IDs repeatedly, turning a simple scan into a tiring routine.
😒 Tiny input fields made simple tasks annoying
Tiny input fields and scattered CTAs made quick actions clumsy, especially for users charging in busy or on-the-go situations.
🫢 The Drop system created noise instead of value
Instead of efficiency, it felt like a confusing, mandatory step that distracted from simply starting a charge.
☹️ One charging card wasn’t enough anymore
Users wanted to track different vehicles, split expenses, and easily share charging in multi-user setups, but the app wasn't built for that yet.
🧐
Since This Was a Big Refactor,
I Also Needed to Understand the Business Bottlenecks !
Through Stakeholder and PM Workshops, I Learned That Manual Monthly Billing Was Blocking Efficiency and Scalability
While uncovering why the charging flow felt slow and complex for users, I also realized this redesign wasn’t just about polishing the app, it was a major refactor that had to meet evolving business needs. So I facilitated workshops with stakeholders and PMs to bring those needs to the table early.
Users still had to manually pay for their charging sessions at the end of each month.
On the backend, admins were manually generating invoices one by one.
This process drained time on both sides, delayed payments, and blocked scalability. Solving it wasn’t only about user convenience, it was critical for ChargeX’s operational efficiency and long-term growth.
But the Workshops Also Overwhelmed Everyone by a Flood of Feature Requests, So I Guided the Team to Decide What Truly Mattered
As we mapped business needs, the room quickly filled with sticky notes, everything from serious fixes like automated billing to shiny requests like customizable charging animations. The energy was great, but also overwhelming. With so many ideas on the wall, the next challenge was figuring out what to build first.
So I Drew a Clear Line: Only Features That Built User Confidence, Supported Scalability, and Respected Tech Limits Would Survive
To move from chaos to clarity, I guided the team with a simple rule: if a feature didn’t improve user confidence, support business scalability, or respect technical feasibility, it wouldn’t make the cut. That shifted the conversation from “what sounds cool” to “what actually matters.” Automated billing quickly stood out as a must-have, while lower-impact ideas were parked for later.
Then I Transformed the Wall of Sticky Notes Into a Focused Roadmap Using Mind Mapping and an Impact/Effort Matrix
To give structure to the discussion, I used a mix of mind mapping and a 2x2 impact/effort matrix, judging ideas by how much value they could deliver versus how costly they’d be to build. That process turned a chaotic brainstorm into a clear, prioritized roadmap that addressed today’s user and business pains while leaving space for future growth.
At every step, I stayed close to stakeholders and tech leads to balance real user needs with technical feasibility and long-term scaling.
🤔
So, where all the brainstorming finally pointed us?
Laying the foundations
I Prioritized Eight High-Impact Features, From Instant Charging to Automated Billing, to Build the Foundation of a Scalable App
After guiding the workshops through alignment and prioritization, I narrowed the direction to a focused set of improvements and features. The prioritized outcomes included:
MVP Focus (First Release):
1️⃣ Start charging instantly, with as few taps as possible
2️⃣ Remember default settings to avoid manual repetition
3️⃣ Smart module selection (no manual ID typing)
4️⃣ Real-time monitoring with accurate updates
5️⃣ Notify users automatically when sessions complete
6️⃣ Support multiple vehicles and cards seamlessly
Next Phase Enhancements:
7️⃣ Provide a clear, customizable report of energy and spending
8️⃣ Automate billing to eliminate monthly manual payments
´
😎
At This Stage, I Wanted to Build a Scalable Foundation, Not Just Patch Screens !
After prioritizing the right features, my next step was to design them in a way that could scale with future needs and keep users’ trust over time.
By now it was clear: fixing only the charging flow would solve today’s pain, but wouldn’t prepare ChargeX for tomorrow’s needs. I wanted to make sure every design decision connected back to the bigger picture, how the app would scale, how teams would work with it, and how users would trust it long-term.
To achieve this, I invested in four steps that gave us clarity and direction before touching pixels:
👤 Redefining the persona to avoid outdated assumptions and reflect today’s charging habits.
🗺️ Mapping the charging journey to uncover confidence breaks and define MVP must-haves.
🔄 Designing user flows to connect features into one cohesive system, not isolated fixes.
🧩 Evolving the design system to cover edge cases for scalability and smoother developer handoff.
This shift in focus, from short-term fixes to long-term vision, is what turned the redesign into a product strategy exercise, not just a UI refresh.
👀👇
So Here’s a closer look at how I approached each of these steps
I Updated Our Persona to Match Today’s EV Users, Not the Ones From 5 Years Ago
The old persona was built when EV adoption was new. Habits and expectations had shifted, multiple vehicles, faster starts, higher automation needs. Redefining the persona with fresh data and behaviors kept our design grounded in today’s reality and prepared it to scale for tomorrow.
Meet Lukas,
The person at the center of every design decision I made.
Lukas Bauer is 35, married, and living in Munich.
He drives an EV daily, and juggles a busy, environmentally conscious lifestyle. Charging isn’t something he wants to think about, it’s something he expects to "just work" in the background of his day.
What matters to Lukas
- One-tap, effortless charging, no setup every time
- Charging spots he trusts at home, work, and in the city
- Automated payments and session defaults
- Quick insights into his energy use and spending
- Real-time updates on session completion and station availability
Every design choice, from simplifying the homepage to automating billing flows, was grounded in making Lukas’s day easier, not harder.
I Mapped the Charging Journey to Pinpoint Confidence Breaks and MVP Priorities
To bring it to life, I mapped out Lukas’ ideal journey:
Instead of fixing screens in isolation, I mapped the full charging journey. This revealed exact pain points, hesitation at the start, uncertainty in module selection, frustration at session end. It gave me a clear list of MVP must-haves that would restore trust from day one.
Note: Since the main journey we aimed to enhance was starting and completing a charging session, I focused the journey mapping specifically on this flow. For new features we needed to integrate, I chose to address them separately in the user flows outlined in the following sections.
Then, I Created User Flows to Test Whether the New Features Supported Each Other Without Adding Friction
To avoid siloed features, I built detailed user flows connecting charging, billing, and monitoring. These flows exposed where friction would appear if features weren’t aligned, and gave the team a blueprint for a scalable system instead of short-term fixes.
A major realization was that
users didn’t want more control panels or settings menus.They wanted charging to feel like second nature, fast, invisible, and quietly smart behind the scenes.
Every tap I removed, every automation I added, was a step toward rebuilding trust and making ChargeX part of users' daily rhythm.
🥰
Alright, now time for the fun part
let me show you how I started fixing problems, beginning with Home and the Start Charging flow.
The Home Screen Distracted With Visual Noise, Forced a Double Start, and Required Manual Module Entry
Instead of highlighting “Start Charging,” the old home showed a static car illustration, vague CTAs like “Adjust,” and tiny icons with no clear next step.
When users did tap “Start Charging,” they were thrown into a redundant second screen asking them to start again.
On top of that, every session required typing in a module ID manually, turning what should have been a one-tap action into a slow, error-prone process.
👀
Setting out to solve !
I Redesigned the Home Screen So Every Step to Start Charging Is Visible, Predictable, and Instant
The redesigned home removes all guesswork. Users now see available modules, their default card, and prioritization settings right up front, with one clear CTA to start charging. Every element serves the single purpose of guiding them to action immediately, making charging faster, simpler, and more confident.
👀
Let’s break Home down in depth.
At a glance, users can now see all their options.
I Introduced a Live Module List for Instant Selection
Instead of relying only on typing or scanning, I added a real-time list of available modules under each station, so users can pick and start charging with one clear tap.
I also shaped the module cards to look like the real physical charging hardware, making the digital experience instantly familiar for anyone who’s ever stood next to a ChargeX station.
I Also Brought Default Settings Up Front for Optional and Quick Adjustments
Prioritization values and charging cards now sit right on the home screen. Users set them once as their defaults, so every future session runs smoothly without reconfiguration. And if they ever want to tweak them, it takes just one quick adjustment, no digging through layers.
And, I Removed Decorative Elements to Keep Focus on Charging
I stripped away car illustrations, vague icons, and visual clutter so the home now highlights only the essentials that guide users toward starting a session with confidence.
I Also Made Charging Monitoring Clear and Actionable with Real-Time Data and Direct Controls
Now, users instantly see how much energy has been charged, session duration, and real-time costs. Prioritization settings are visible and adjustable mid-session, so users can adapt on the fly instead of being locked in. A dedicated "Stop Charging" CTA ensures no hunting around when action is needed.
👀
Now let’s put it all together and see the final charging journey, simplified from many steps into one seamless flow.
From Four Frustrating Steps to One Seamless Tap
Old Charging Journey
New Charging Journey
🧐
Now it’s time to dive into Prioritization, not a mandatory step to start charging, but still a key flow that users struggled with.
Old Prioritization Was a Mandatory Step That Forced Users Through Confusing Drops and Tiny Inputs, Making Charging Slow and Frustrating
Instead of guiding users, the old Prioritization screen buried them in confusion. Drops (our internal currency) weren’t explained, settings were hidden, and tiny inputs made adjustments painful.
Worse, it was a mandatory step before starting a session, forcing users to waste time on something they didn’t fully understand.
I Transformed Prioritization from a Mandatory Bottleneck into a Flexible, Time-Saving Tool That Adapts to Every User
🤓 I Made Prioritization Optional So Users Can Start Charging Without Barriers
I removed Prioritization as a mandatory step. Now, users can plug in and start charging instantly if they don’t want to adjust anything. For those who do, the screen still shows available Drops and exactly what adjusting will cost, but it’s no longer blocking the flow.
🤌🏻 I Let Users Reapply Their Last Settings to Save Time
To eliminate repetitive manual input, I introduced one-tap reuse of the last Drop value. This way, frequent users don’t have to reconfigure every time, they simply apply their previous choice and start charging immediately.
🤩 I Replaced Tiny Inputs With Drag-and-Drop Controls for Easy Fine-Tuning
For power users who want more control, I replaced small, hidden inputs with accessible drag-and-drop interactions. Adjustments now feel effortless, not frustrating.
😎 I Added Smart Defaults So Users Don’t Waste Time Re-Entering Values
To eliminate repetitive setup, I introduced one-tap reuse of the last Drop value and the ability to save custom settings as a default. This way, charging feels faster and requires less effort session after session.
This is how it looks at the end.
🧐
Finally, for the post-MVP phase, I reworked the Profile section, not just to clean it up, but to introduce one of the biggest future features: automated monthly billing.
I Reorganized Profile Into a Clear Hub by Elevating Frequent Actions and Moving Rarely Used Items Down
Previously, the profile was a flat list where important tasks like checking charging history or billing were buried alongside rarely used options. I redesigned it into a structured hub :
the top section now highlights the most-used features (history, billing, charging cards) in accessible cards , while less frequent items are grouped neatly below. I also surfaced a prominent contact CTA, making support instantly reachable.
I Introduced Automated Billing in Profile to Replace Manual Invoices and Unlock Scalability
Until now, users had to handle monthly invoices manually, which was slow, error-prone, and unsustainable as ChargeX grew. I introduced automated billing directly inside the Profile hub: users add their credit card once, and from then on, invoices are automatically deducted every month. Alongside this, I surfaced a clear next billing date, running costs, and invoice history in one place. This not only removes friction for users but also lays the foundation for a scalable, future-proof payment system that ChargeX can grow on.
I Also Enabled Multi-Card Support After Research Showed Users Needed to Manage Several Charging Cards Across Vehicles
Research revealed that many EV users weren’t limited to just one charging card. Families shared vehicles, partners wanted separate cards, and some users needed different cards for personal vs. work expenses. The old app only allowed a single card, which caused friction and confusion. So I redesigned the charging card section to support multiple cards.
And, I Transformed Charging History From a Static List Into Visual Insights So Users Can Track and Understand Their Energy Use at a Glance
The old charging history buried key details in a long, text-heavy list, forcing users to scroll endlessly without context.
To fix this, I redesigned the section into an interactive dashboard: a visual diagram shows weekly energy use, high-level stats summarize sessions and kWh, and a detailed timeline of sessions stays accessible below. Users can also generate a downloadable report for any timeframe instantly.
This shift turned charging history into a decision-making tool instead of just a static log.
🤔
Hmm…did all of this actually solve
what users were struggling with?
🤗
Let’s see how usability testing and
listening to users helped us
level up the experience !
I Realized Users Struggled With Module Statuses, So I Had to Make Them Instantly Understandable
One big insight from usability testing was that users didn’t really understand the module statuses, words like Verfügbar or Fehlerhaft didn’t mean much at a glance. I realized just coloring the cards wasn’t enough, and there wasn’t even space for a full color guide on Home. So I made two key changes:
Firstly, I Added Clear Icons on Module Cards So Users Instantly Recognize All Statuses Without Guessing
Instead of relying only on vague text or colors, I placed intuitive icons on every module card. This makes it immediately clear if a module is ready, charging, unavailable, or broken, cutting out confusion and hesitation.
Secondly, I Designed a Color Guide Inspired by Real ChargeX Modules to Build Instant Recognition
To reinforce trust, I added a station detail guide showing real photos of ChargeX hardware and their LED lights.
By mirroring the actual hardware colors in the app, users instantly connect what they see on screen with the modules in real life.
Another small thing that made a big difference
I Realized CX-Only Numbers Confused Users, So I Let Them Rename Cards With Meaningful Labels
Users said just seeing the CX-number for their charging cards felt confusing when managing several cards.
So I made it simple:
Now users can give each card a personalized name, like "Home Charger," "Workplace Station," or whatever makes sense for them. No more trying to memorize random codes. Just names that feel natural.
Then, I Saw Users Struggled to Track Their Prioritization Goal, So I Upgraded Session Monitoring to Show Clear Progress Against Their Target
During monitoring, users didn’t just want to know time and energy, they wanted to see how far they were into their prioritization goal.
So I upgraded the session tracking:
Now users see not just total kWh and hours set, but also how much they've already charged and how much time is left, for example, "120 kWh out of 300" and "4 hours out of 6." It gives users a real sense of progress, without making them do mental math.
👀
Alright, let’s zoom out
what did this redesign actually change?
I Measured the Redesign’s Real-World Impact Using Analytics, Session Recordings, and CS Feedback in the First 3 Months
To understand how the redesign performed in the real world, we tracked both quantitative product analytics and qualitative user behavior through tools like Mixpanel, Hotjar session recordings, and internal CS feedback loops during the first 3 months post-release. Here's what we found:
Session Start Time: Slashed in Half
↓ 40% reduction in time to begin a charging session
By eliminating redundant steps and introducing real-time validations, we made it effortless to start charging, turning a key drop-off point into a moment of flow.
Support Load: Lightened with Design
↓ 41% fewer charging-related support tickets
We didn’t just “improve UX.” We eliminated the root causes of confusion. Support saw a tangible drop in repetitive questions and hand-holding requests within the first two months.
Brand Confidence: From Hesitation to Momentum
+26% lift in sales team satisfaction during demos
The redesign gave ChargeX a credible, polished face that aligned with its tech. Suddenly, the product wasn’t something to explain, it sold itself in investor decks and pitch meetings.
Design System: Built for Speed, Ready for Scale
↑ 43% faster rollout of new features post-launch
With a modular, documented design foundation in place, the dev team moved from update delays to quick iterations, future-proofing the product roadmap.
✍🏻 What I learned
This project was a great reminder that designing for impact means zooming in and out constantly, listening to real users, aligning with business needs, and still keeping one eye on long-term scalability. It wasn’t just a redesign. It was a strategy shift, from “how it works” to “how it fits in real life.”
👀
Take a look at behind the scenes!
I Saw the Risk of Inconsistency Growing, So I Built a Design System from Scratch to Future-Proof ChargeX
Designing the new flows solved today’s pain points, but I also knew that without a strong foundation, the app would quickly become inconsistent and hard to maintain. That’s why I started building a scalable design system from scratch, to ensure every future feature could scale smoothly, handoffs would be seamless, and developers had a single source of truth.
👀
For example ...
I Documented Rules for Scalability and Handoff Across iOS and Android
I defined rules for spacing, margins, grids, safe areas, and scroll behaviors to make sure screens looked polished on both platforms while still feeling native.
I Standardized Status Bars, Colors, and Platform Behaviors
I created clear rules for status bar backgrounds, scroll behavior, and app theme colors to ensure consistency across devices and contexts.
I Built Reusable Components for Faster Iteration
From inputs and dropdowns to buttons and cards, I designed a flexible component library that let the team assemble flows without reinventing the wheel each time.
👀
And Lastly ...
I Designed Introductory App Screenshots for App Store and Google Play to Take ChargeX From Prototype to MVP Launch
After a few rounds of design tweaks based on usability testing, it was time to take ChargeX from polished prototype to reality. To prepare for the MVP launch on the App Store and Google Play, I also designed a set of introductory app screenshots, highlighting the key experiences we wanted new users to notice right away.
