3 years on the EV app, Nov 2023 → Nov 2026 3 years on the EV app, Nov 2023 → Nov 2026 3 brands and two design systems, one app 3 brands and two design systems, one app 2 utilities implementing the app by March 2025 2 utilities implementing the app by March 2025 3 handoffs native-ready: SwiftUI, Jetpack Compose and Lottie 3 handoffs native-ready: SwiftUI, Jetpack Compose and Lottie 11 Usage 2.0 prototype versions in 3 days, every number reconciled 11 Usage 2.0 prototype versions in 3 days, every number reconciled

Smart Energy Water · Nov 2023 → Nov 2026

EV charging, end to end

Role: Senior Product Designer
Company: Smart Energy Water
Timeline: Nov 2023 → Nov 2026
Location: Irvine, CA

Explore & Plan a trip
Usage 2.0
Hold to start
Smart home
Native-ready handoffs

The EV app sign-in screen under three brands: Smart Mobility (2023), eMobility (2024) and AI Electron (2026)

3 years on the EV app, Nov 2023 → Nov 2026

3 brands and two design systems, one app

2 utilities implementing the app by March 2025

3 handoffs native-ready: SwiftUI, Jetpack Compose and Lottie

11 Usage 2.0 prototype versions in 3 days, every number reconciled

Contents

The problem
How I worked it
The EV app, 2023 → 2026
Usage 2.0: every number derived
Testing: the scenarios, and what they found
What changed, and what it's worth
1. What I learned

Go to Top

For three years I owned the design of a white-label EV charging app that utilities give their drivers. It changed brands twice and moved to a new design system. Through all of it, the job stayed the same: help a driver find a charger, start a charge with confidence, and know what it cost. This page covers the whole app: charging, with the motion that makes it trustworthy, and the usage screen.

AI Electron · 2026 — **Three brands, one app.** AI Electron (2026), eMobility (2024) and Smart Mobility (2023): the same login, three brands and two design systems. Rendered from the Figma files.

eMobility · 2024 — **Three brands, one app.** AI Electron (2026), eMobility (2024) and Smart Mobility (2023): the same login, three brands and two design systems. Rendered from the Figma files.

Why it mattered: utilities use the EV app to serve their drivers under their own brand. Whatever the brand, the riskiest moments, starting a charge and trusting the numbers, had to work the same way everywhere.

The problem

Problem: drivers have to trust the app at the moment it matters most, at a busy public charger, starting a session that costs money. And the same app had to ship under three utility brands and two design systems. The goal: make finding, starting and paying for a charge feel certain, in one base app every brand can use.

~20 min waiting at a station the app showed as open (Oct 2024)

11 of 261 components in the app came from the EV 2.0 library (Jun 2026 audit)

36 places the swipe-to-charge button was nested

2023–2024 · One app, many brands

Every utility wanted it to look like theirs

The app changed brands twice, utilities wanted their own colors and content, and screens were split between design system 1.1 and base 2.0.

2024 · Too much to ask

An app getting heavier

Drivers most likely won't fill in every detail, and every new feature risked making the app harder to use.

Oct 2024 · At the charger

"Open" chargers that weren't

Chargers the app showed as open were taken: a line of three cars, about 20 minutes of waiting, a station that throttled its output, and no sign in the app that the charge had started.

2025 · Away from the phone

Drivers don't watch the app

While charging, drivers don't stare at their phone, and in the car they can't use it at all.

2025–2026 · One gesture, real money

A swipe that could fire by accident

A swipe started or stopped a paid session. By Jun 2026 the swipe button was nested in 36 places, and only 11 of 261 components came from the EV 2.0 library.

2026 · From EV to the whole home

One app, every kind of home

Most homes have no solar, battery or EV; connected cars each support different data; and the usage screen typed in every number, so one device used more energy than the whole account.

How I worked it

Research Dec 2023 → Competitor apps, feedback from leadership, design reviews, and a test plan. Read more
Field visit Oct 2024 At real chargers: “open” chargers were taken, about a 20-minute wait, and no in-progress state. Read more
Design 2024–2026 Moved to base 2.0, the lock screen, hold-to-start. Read more
Test 2024–2026 Task-based test plan; Usage 2.0 math proven in a coded prototype before handoff. Read more
Ship 2025–2026 Native-ready handoffs (SwiftUI, Compose, Lottie). 2 utilities implementing. Read more
Outcome Nov 2026 Three years, three brands, one app. Read more

The EV app, 2023 → 2026

Who I worked with, and how

Leadership

Leadership Feedback on the usage screen; reviews of the app, the flows and Usage 2.0.

decisions ↓progress ↑

Me · the EV app Nov 2023 → Nov 2026, across three brands and two systems.

specs ↓feedback ↑

Partners

Product Signed off the five Usage 2.0 decisions.
Engineering iOS and Android; native-ready handoffs.
Sales and client teams Which utilities were buying, and why.

needs ↑releases ↓

Utilities and drivers

Utility brand teams Alectra's brand review; 2 utilities implementing by Mar 2025.
Drivers Field visits at public chargers.

Product

From stories and tickets to signed-off decisions

Requirements came as product stories, like the lock-screen widget. A date-picker ticket became Usage 2.0, with five decisions Product signed off. In 2026 the work ran through 15 platform tickets across Android, iOS and web.

Leadership

Reviews that changed the design

Leadership asked for usage drivers could compare, reviewed the app and Usage 2.0, and vetted flows in design reviews: ask drivers for less up front. Coded prototypes gave them something real to review and won buy-in.

Engineering

Handing off behavior, not pictures

SwiftUI and Compose reference code for hold to start, a native and Lottie splash so engineering could choose, the Anchor-Dot spec, eight invariant tests for Usage 2.0, and the requirements for the connected car.

Utilities

One base, their brand

Alectra's and SMUD's brand reviews shaped their versions of the same base app; two utilities were implementing it by Mar 2025.

From the old design system to base 2.0

I arrived during the move from design system 1.1 to base 2.0 and ported the app across, screen by screen, contributing EV components (station tiles, charger cards) to the shared system.

The idea: merge Explore and Plan a trip into one feature, on one page, instead of two.

Explore: the station map with the search sheet resting — Base 2.0, rendered from the Figma file. Sample data.

Explore in dark mode — Base 2.0, rendered from the Figma file. Sample data.

Home: upcoming booking, my devices and the rate plan — Base 2.0, rendered from the Figma files. Sample data; the account bar is cropped out.

Home with the EV device selected, showing its nickname and range — Base 2.0, rendered from the Figma files. Sample data; the account bar is cropped out.

What competitors, leadership and the team told me

Research started with competitors, leadership and the team: it shaped what the app shows, and how much it asks of drivers.

Competitors · Dec 2023

How the leaders show cost

I reviewed EVgo, ChargePoint and Electrify America and walked through their flows. One pattern stood out: they put the rate plan next to the cost of owning the car, so drivers see charging cost in context.

Competitor board and walkthrough recordings

Leadership · Jan 2024

Make usage something drivers compare

Leadership's feedback on the usage screen was to let drivers interact more with miles driven, compared with others.

Feedback I logged in Figma, Jan 2024

Design review · 2024

Don’t make drivers fill in everything

Flows were vetted by the design team and leadership. The conclusion: drivers most likely won't fill in every detail, so ask for less up front.

Review notes in the AI Electron microsite file

Test plan · Jul 2024

Is the app getting too heavy?

I wrote a task-based test to check for feature bloat: plan a trip, then measure time to complete and satisfaction for each task, with a separate test case for the More tab.

My planning notes, Jul 2024

Risk I raised · Jan 2025

Swipe to charge, and fat fingers

A swipe to start or stop a paid session can fire by accident. The answer I prototyped and handed off: hold to start.

Usage concept notes, Jan 2025

I also charged with the leading networks' apps and recorded each step, to see how they handle the same moments: is a charger free, has the session started, and what is it costing.

Electrify America station: plug in first, an 85% limit, and chargers in use — Electrify America, EVgo and ChargePoint, recorded on my phone. Third-party apps shown as research, not my designs.

Electrify America: a charging card pinned over the map — Electrify America, EVgo and ChargePoint, recorded on my phone. Third-party apps shown as research, not my designs.

The real thing: one base, two utility brands

The EV app's first screen, built from the same components, in SMUD's brand and Alectra's. Each utility chose different colors and different content, on one set of components.

Mobile 9 screens

Same first screen · SMUD · scroll ↕
Same first screen · Alectra
SMUD · Light · Home, charging as a guest · scroll ↕
SMUD · Light · Ways to Save: rebates
SMUD · Light · My EV, two vehicles
SMUD · Dark · Home, charging as a guest · scroll ↕
Alectra · Light · Home
Alectra · Light · My EV · scroll ↕
Alectra · Dark · Home

SMUD's and Alectra's EV apps, from their sample-screen files. Sample data.

Alectra was the first client port (May 2024) and the longest-running: the EV app, plus a web microsite with a savings calculator, rate plans, incentives and a charger guide.

Alectra EV microsite landing page — The microsite was built “flexible enough to accommodate branding” so other utilities could reuse it; ready for development Jun 26, 2024.

Alectra EV microsite rate plans page — The microsite was built “flexible enough to accommodate branding” so other utilities could reuse it; ready for development Jun 26, 2024.

The riskiest moments happen at the charger, not in the app

Then I went where the riskiest moments happen: I drove to public chargers and recorded what happened (Oct 2024). The app said chargers were open, but "by the time you get to said location a charging spot is mostly taken". There was a line of three cars and about 20 minutes of waiting, the station throttled its output, and the app's in-progress state didn't show. I stopped at 80%.

Charging app before leaving: 2 of 6 chargers available — Screenshots from my phone and car, Oct 23, 2024. Third-party charging and vehicle apps shown as research, not my designs.

App showing all chargers in use — Screenshots from my phone and car, Oct 23, 2024. Third-party charging and vehicle apps shown as research, not my designs.

The parking garage entrance at the charging station — Arriving at the garage

Waiting in line behind another EV in the garage — In line for a charger (plates blurred)

The charger screen while the session starts — The charger, finally: "Initiating charging"

The charger screen: 31 minutes left until 80% — The charger knew: 31 minutes to 80%

The car's dashboard showing charging time remaining — So did the car

The charger's session summary: Thank you, Driver — The session summary, on the charger

The charger and the car both showed the session; the app didn't. From my FigJam walkthrough of the visit.

Charging status on the lock screen

At the charger, the app never showed that the session had started. And drivers don't stare at their phone while charging anyway. The requirement, from the product story: "As a user, I want to see a home widget of the app on my lock screen… for any ongoing charging". I designed a Live Activity and Dynamic Island states (charging, charged, idle), plus CarPlay and Android Auto views.

Before: the charging session as an in-app sheet, in every state from charging to charged and idle — **Before:** the session lived only in a sheet inside the app, so drivers had to open the app to check it. Rendered from Figma.

Charging, on the lock screen — After: the same session on the lock screen and in the Dynamic Island. From the Live Activity design file.

Dynamic Island: charging — After: the same session on the lock screen and in the Dynamic Island. From the Live Activity design file.

Live Activity, smallest — The Live Activity at every size, then the same session in CarPlay and Android Auto. From the Live Activity design file.

Live Activity, with the car — The Live Activity at every size, then the same session in CarPlay and Android Auto. From the Live Activity design file.

Try it: the charging session on the lock screen and in the Dynamic Island, from charging to charged and idle. Sample data. Open larger ⤢

In the car, I made 41 of the 43 sessions in the CarPlay and Android Auto file, between Apr 7 and 16, 2025: find a station on the map, pick a charger, and watch the session without touching the phone. Figma has no record of it shipping, so it stays a design here.

Starting and stopping a charge, without accidents

The other finding: a single gesture starts or stops a paid session. The control evolved over three years: slide to stop → a Stop Charging button → swipe to start → hold to start, hold to stop (Jul 2026). "A short, deliberate hold prevents an accidental tap from starting or interrupting a session. While the user holds, a progress indicator fills; releasing early cancels and rewinds."

The charging visual while the session starts — Base 2.0, rendered from the Charge Now Figma file. Sample data. These screens use the earlier swipe control; hold to start replaced it in Jul 2026.

Charging at 60%, with duration, speed and cost — Base 2.0, rendered from the Charge Now Figma file. Sample data. These screens use the earlier swipe control; hold to start replaced it in Jul 2026.

The hold-to-start prototype: two variants (a card wipe and a ring), handed off with SwiftUI and Compose reference code, with tokens as the source of truth. "A GIF can only look like the interaction; it can't be it."

Beyond the phone: the car

My EV, from the car itself (Jul 2026). I wrote the requirements for connecting the app to a connected-vehicle service: 16 vehicle signals (battery, charge rate, location, tire pressure and more) and 7 remote commands (start and stop charging, charge limit, lock, climate) mapped to app sections. Each has its own consent and a pending → confirmed state. The rule: support varies by car, so treat every data point as optional and degrade gracefully.

My EV: a Hyundai Ioniq 6 card with range, battery and plug in to start charging — Rendered from the Figma file, then the coded prototype. Sample data; the account bar is cropped out and an address is blurred.

Vehicle overview: battery and range, an off-peak charging insight, location and recommendations — Rendered from the Figma file, then the coded prototype. Sample data; the account bar is cropped out and an address is blurred.

Add EV prompt on the home screen — Rendered from the Figma file. Sample data, including the VIN.

From an EV app to the whole home

AI Electron kept growing as a product over the years. It started as an app for charging an EV; by 2026 it covered the whole home, and the EV became one device among several.

Smart Mobility 2023 An EV charging app: find a station, charge, and see what it cost.
eMobility 2024 A new brand on base 2.0, with My EV, rate plans and utility brands like SMUD and Alectra.
AI Electron 2026 The whole home: My Devices, the thermostat, solar and battery, AI insights, and usage split by EV, solar, battery, HVAC and pool pump.

As the product grew, so did my work: I designed the AI Electron home, with smart-home devices like the thermostat, home solar, and a home insights page.

A home scene that fits the home. "A single hero image would have been wrong for most customers, who do not have solar, a battery and an EV." So the scene is layered, with 10 device combinations rendered.

Try it: the home scene styles I explored, from studio to rendered to flat, each in its energy states. Sample data. Open larger ⤢

Try it: tap the anchor dots on the home scene to open each device's card. The prototype I handed off with the spec below. Open larger ⤢ · Motion study ⤢

My Devices with the living room thermostat card — Early concepts, rendered from the Figma file. Some copy is still placeholder.

Thermostat concept: off — Early concepts, rendered from the Figma file. Some copy is still placeholder.

AI insight under the controls, with a link and pager — Six placements for the same AI insight on the thermostat, rendered from the Figma file.

AI insight under the controls, with a pager — Six placements for the same AI insight on the thermostat, rendered from the Figma file.

Scale of the 2026 EV work: 17 interactive HTML prototypes and 15 platform tickets across Android, iOS and web. The SwiftUI and Compose code was handed over labeled as "a starting point, not drop-in production code", and the splash came with a Lottie version so engineering could choose.

AI Electron splash · 2026 — **The splash, three brands.** Smart Mobility and eMobility on design system 1.1; AI Electron on base 2.0, as the app grew into smart-home features. Rendered from Figma.

eMobility splash · 2024 — **The splash, three brands.** Smart Mobility and eMobility on design system 1.1; AI Electron on base 2.0, as the app grew into smart-home features. Rendered from Figma.

Browsing as a guest — The 2026 base app, rendered from Figma. Sample data.

Account required — The 2026 base app, rendered from Figma. Sample data.

The splash handoff, frame by frame in light and dark, with the native code and Lottie package: open the splash handoff ⤢

Handoffs engineers can run

SwiftUI and Compose reference code for the hold-to-start button, a native + Lottie splash package, invariant tests for Usage 2.0.

The Anchor-Dot hotspots handoff, with a motion spec, reduced-motion behavior and accessibility notes

Usage 2.0: every number derived

The same app's usage screen, rebuilt so that no figure is typed in by hand.

When a design problem is really a math problem

A ticket asked me to tweak the date selector and the Compare feature on the EV app's usage screen. When I traced every number, the screen contradicted itself. I rebuilt it on one data model where every figure is derived, proved it with a working prototype, and gave Product five decisions and Engineering a set of tests to keep it true (Jul–Aug 2026: 11 prototype versions in 3 days).

The old usage screen: Total Energy Used 300 kWh, 20 charging sessions, an average of 300 kWh per session and $500 estimated cost — Rendered from Figma and the prototype. Sample data; the address is blurred.

An early Usage 2.0 iteration with a date range, compare toggle, totals and a monthly chart — Rendered from Figma and the prototype. Sample data; the address is blurred.

Usage with the filter in the header: totals, the usage chart compared with last year, highest and lowest month, top and bottom device and weekly charging behavior — Rendered from the Figma file. Sample data.

The same screen showing seasons: winter and summer usage — Rendered from the Figma file. Sample data.

Every number had been typed in separately, so nothing had to agree

A device bigger than the home

One device appeared to use more energy than the whole account.

A rate that drifted

The $/kWh rate changed from tile to tile.

A placeholder that shipped

A "$8,888" placeholder (SEW's standard dummy number) and a "12.3 Kwh" unit typo made it into the design.

Two comparisons

Compare appeared on the chart and in the tiles, with different baselines.

A control with an unclear scope

The date selector looked global, but only some things moved.

And because this screen ships under every utility's brand, wrong math is wrong for every utility's customers, and a usage screen that disagrees with the bill erodes trust in the utility, not just the app.

Nothing on the screen is typed in by hand

"Nothing on this screen is an independently-typed number. Every value is derived from a single base series and a single rate."

4,500 kWh 12-month total, the one base series

$945.00 = 4,500 × one rate ($0.21/kWh)

375 / 12.3 kWh per month / per day, both derived

42% top device (HVAC, 1,890 kWh): a share, never more than the whole

Make the logic explicit, then get it signed off

Two control scopes Range and Device change the whole page; View-by, Units and chart type change only their own chart, and sit in that chart's header.
In progress vs complete "This month" shows "so far" plus a Projected tile; "Last month" shows actuals only.
One comparison, ramp-up gated Year-over-year appears only after 12 months of history; before that, it compares what exists and says so.
One rate, one model It's now impossible for a device to exceed the account, or for two tiles to disagree.
Devices partition the account Pick EV and the whole page rescales to EV's share; shares always sum to 100%.

A working prototype and tests for engineering

A prototype where every control works and every number reconciles, plus a review tool that shows it at phone, tablet and desktop side by side with synced clicks and scroll. For Engineering: tests that keep the rule true against live data, such as cost = kWh × rate everywhere, device ≤ account, parts sum to the whole, and "Projected" only on in-progress ranges.

The responsive review tool showing the usage prototype at phone, tablet and desktop — The responsive review tool: one prototype at every size.

Usage 2.0 on desktop: totals, a monthly usage chart, time of use, highest and lowest month, top device and weekly charging behavior — Usage 2.0 on desktop and on a phone: the same model, every figure reconciling. From the coded prototype.

Usage 2.0 on a phone: the same figures stacked in one column — Usage 2.0 on desktop and on a phone: the same model, every figure reconciling. From the coded prototype.

Try it: change the range, the device and the view, and every number still adds up. Sample data. Open larger ⤢

I used AI (Claude Code) to build the prototype so the math could be tested, not argued. A ±1 kWh rounding artifact remained and was flagged for exact-sum rounding before ship.

I mostly used prototyping to make sure the math was logical and to see how the filters would really work. The coded prototype also won buy-in: it set the general look and feel, and gave Product and Engineering something real to review. AI helped me explore chart types; I designed the mobile and web variants myself, around the smart-home devices the app had added: EV, solar, battery, HVAC and pool pump. It was also the first project where I used the prototyping tools I built.

Testing: the scenarios, and what they found

Each risky moment got its own test, from a real charger to the math behind the usage screen.

Field test · Oct 2024

Charge at a real public station

Find an open charger, wait, start a session and watch it. Found: "open" chargers were taken, about a 20-minute wait, and no in-progress state.

Field research photos and notes

Task-based test plan · Jul 2024

Is the app getting too heavy?

Plan a trip, then measure time to complete and satisfaction for each task, with a separate test case for the More tab.

My planning notes, Jul 2024

Prototype · Jul 2026

Can a paid session start by accident?

Hold to start, two ways: a card wipe and a ring. Releasing early cancels and rewinds, so an accidental tap does nothing.

Hold-to-start prototype and handoff

Coded prototype · Aug 2026

Does every number on the usage screen agree?

Change the range, the device and the view, and check every figure. Found: "View by" looked like a page control but only re-grouped one chart, "which is why it felt broken". Each control now says what it changes.

GitHub record, captured Nov 7, 2026

Responsive review · Aug 2026

Does it hold at every size?

The same prototype at phone, tablet and desktop side by side, with synced clicks and scroll.

The responsive review tool

Eight rules the numbers must always obey, handed to Engineering as tests: cost = kWh × rate everywhere; a device never exceeds the account; parts sum to the whole; "Projected" only on in-progress ranges; the base series adds up to the total; the monthly average is the total ÷ 12; time-of-use parts add up to each bucket; and re-grouping by day, week or month never changes the sum.

What changed, and what it's worth

3 years on the EV app, Nov 2023 → Nov 2026

3 brands and two design systems, one app

2 utilities implementing the app by March 2025

3 handoffs native-ready: SwiftUI, Jetpack Compose and Lottie

11 Usage 2.0 prototype versions in 3 days, every number reconciled

2023–2024 · One base app

Ported to base 2.0

I owned the EV app's design across three brands and two design systems, ported it to base 2.0 screen by screen, and added EV components (station tiles, charger cards) to the shared system.

2024–2025 · Utilities on board

From no clients to about five

Alectra was the first client port (May 2024), with a reusable microsite ready for development on Jun 26, 2024. Two utilities were implementing the app by Mar 2025, and one publicly says it adopted SEW's eMobility platform. When I started, the EV app had no utility clients; after the redesign it had about five.

2024–2025 · Out of the app

Charging you can see without opening it

A Live Activity and Dynamic Island states for charging, charged and idle, plus CarPlay and Android Auto views: I made 41 of the 43 sessions in that file in Apr 2025.

2026 · A safer control

Hold to start, handed off as code

Hold to start and stop replaced the swipe, handed off with SwiftUI and Compose reference code; the splash was handed off as a native and Lottie package.

2026 · The whole home

From an EV app to AI Electron

Requirements for the connected car (16 signals, 7 commands), a home scene with 10 device combinations, thermostat concepts, 17 interactive HTML prototypes and 15 platform tickets.

Jul–Aug 2026 · Usage 2.0

Every number derived

One data model, five decisions signed off by Product, eight invariant tests for Engineering, and 11 prototype versions in 3 days.

What I learned

Trace it before you draw it. Usage 2.0 started as a date-picker ticket and turned out to be a math problem.
Prototype the logic, not just the pixels. Working prototypes end arguments faster than mockups.
Research the moment, not just the screen. Standing at a real charger showed that the riskiest interaction is a single gesture.
The control is the brand. The look changed three times; starting a charge is what drivers remember.
Hand off behavior, not pictures. Reference code made the hold interaction buildable exactly as designed.