Skip to main content
Nicolas Ménard
ProjectsAbout meExperiments
ResumeOpen ↗

UX/UI · Prototyping

Electricity App Design

4 weeks from prototype to production for EV charging planning

Role
UX Designer
Scope
Prototyping · User testing in France and Denmark · EV charging planning
Outcome
Beta shipped a month after the pivot; the Upcoming prices component reached 57% engagement.
Status
Shipped
Company
Barry Energy
Duration
1 month
Tools
Figma · InVision · Miro
Links
Live Project

The Challenge

After we launched the product in France, the startup made a strategic pivot: we'd help people plan their EV charging around hourly prices and CO2, fast, and in a way anyone could understand. This raised the value of clear planning UX. I led the user research and partnered closely in ideation and Figma prototyping, then synthesized findings with backend and engagement stakeholders so decisions could ship quickly.

Why This Mattered

People wanted a single place to answer two questions: when is it cheapest, and when is it cleanest. The older today-only price view made that hard because cheaper night hours and tomorrow's windows were out of sight, while past hours were visually prominent but irrelevant for planning. In tests and community feedback, non-technical users told us they needed a longer view, clearer color coding, and fewer hidden controls to make confident choices.

Framing the Problem

We started with significant unknowns. We didn't know how users were currently planning their EV charging sessions—were they checking prices multiple times a day, setting recurring schedules, or just plugging in and hoping for the best? We also didn't know how they pictured an ideal planning system that wasn't fully automatic. While some competitors were pushing "set and forget" solutions where the car would charge whenever prices dropped, our users wanted to maintain control and understand the logic. But how much information was too much? How should we present 24 hourly prices plus CO2 data without overwhelming people who just wanted to know when to plug in their car?

Through initial research sessions, we defined the core job to be done as: see the next 24–35 hours, spot cheap and expensive intervals at a glance, and schedule charging against that context. That meant reducing cognitive load, front-loading key information, and keeping the interaction model predictable for a broad audience. It also meant deprioritizing dense multi-metric screens in favor of clarity and scan-ability. The research revealed that users wanted transparency over automation—they needed to see and understand their options, not just receive a black-box recommendation.

Exploring Solutions

We explored three paths in parallel prototypes:

  • A combined graph that layered price, CO2, and charge
  • A single "best window" CTA that auto-suggested a schedule
  • A simpler, tabbed approach with a sortable "Upcoming prices" list

The combined graph proved powerful but too heavy for quick scanning, especially for people focused on cost over optimization nuance. The single CTA was appealingly fast but felt opaque and reduced trust for planners who wanted to see their options. We chose the tabbed approach because it was easier to read, kept choices transparent, and matched how non-technical users made decisions.

Design Moves That Changed Outcomes

First, we extended the planning horizon to 24–35 hours so night and next-day hours were visible, which aligned with how people actually plan charging in France and Denmark. This directly addressed feedback that today-only views hid the cheapest windows and blocked next-day planning.

Second, we made "Upcoming prices" the primary scan path: intervals were highlighted, sorted, and labeled as cheap or expensive, with icons to speed recognition. In production, 57% of users tapped this component, a strong signal that the design met the need to scan quickly and act.

Third, we kept separate tabs for Price, CO2, and Charge to reduce noise and give each metric a simple, focused view. This was especially important for a non-technical audience that cared most about cost, then cleanliness.

Finally, we overlaid the EV charging schedule on the price context so people could see, immediately, whether their plan aligned with cheaper hours and adjust without hunting.

Moving Fast Through Constraints

A month after the pivot toward EV owners, we shipped a viable beta by limiting integrations to Tesla for the first iteration. Dropping other EV APIs freed the team to focus on the planning experience, the interval model, and comprehension of the new UI. This constraint kept the loop short from prototype to real-world feedback.

Key Design Decisions

We rejected a today-only view because participants consistently noted cheaper night prices and wanted to plan a day in advance, which the short horizon obscured. We prioritized CO2 over a renewable percentage when surfacing environmental impact because people in France found CO2 more tangible and aligned with low-CO2 nuclear hours. We chose tabs over a combined multi-metric chart because tests showed tabs were easier to parse and better for a broad audience that mostly optimizes for cost savings. We deferred the single "best 3-hour window" button to avoid hiding the reasoning behind recommendations during the EV pivot, preserving control and transparency.

How Collaboration Shaped Speed

Product design partners Alex and Gosia focused the UI on clarity and scan-ability while I drove research planning, moderation, and synthesis across teams. Lucas led frontend implementation with Filip, while Kristian and Konstantin partnered on feasibility and handoff; this tight loop meant research findings could translate into shipped changes within weeks. A Slack community in France and Denmark gave us fast recruiting, steady feedback on prototypes, and practical input on color coding, interval density, and the extended view.

Impact

People could now see a full day ahead, instantly spot the cheapest and most expensive windows, and align EV charging without digging. In live usage, the "Upcoming prices" list became a primary entry point, with 57% tapping it, which matched what we heard in tests about wanting a simple, sortable overview. Moving CO2 into its own tab and using clear labels reduced confusion and made it easier to reason about cleaner charging times.

What I Learned

Clarity beat density every time we tested it. Tabs, plain labels, and a longer planning horizon gave people more confidence than a single, complex super-view. The combined graph looked impressive in mockups. Participants just couldn't scan it fast enough when they actually needed to make a decision.

The Slack community changed our pace. Testing in France and Denmark gave us feedback grounded in real planning habits, and it made research faster and cheaper. Without that loop, insights like the 35-hour horizon would have taken much longer to validate.

What I'm most proud of: we turned raw hourly price data into something a non-technical person could act on in seconds. The contextual overlay wasn't flashy. It was the difference between data and a decision.

← Back to all workNext projectRedesigning the EV Charging Experience →