Multi-Client Mobile UX for Fuel + EV Charging
At P97 Networks, I led Android UX for a multi-client fuel and EV ecosystem serving Chevron ExtraMile, G&M Oil, Petro-Canada, Irving Oil, and Suncor EV Charging. Over three years, I designed native, glanceable, safety-minded mobile experiences that had to work outdoors, mid-task, in spotty connectivity, under time pressure — across five completely different brands without fragmenting a shared UX system. The unifying design principle: uncertainty is the enemy. Every decision was built to reduce it.
fuel/EV clients, one shared system
workstreams owned end-to-end
of users hit out-of-service chargers
Timeline:
P97 Networks · ~3 years
Role:
Interaction Designer · Lead Android UX
Fuel and EV environments are uniquely hostile to mobile UX. Users aren’t sitting comfortably at a desk — they’re outside, often in bright sunlight, distracted, mid-task, with low battery anxiety and a running clock. The constraints are baked into the context:
Parking lots and roadside environments with glare and poor lighting
Partial or unreliable connectivity at rural stations
Time-boxed charging sessions with nowhere to go
Low-battery anxiety layered on top of everything
Frequent handoffs between car, phone, and station hardware
Users are often distracted, impatient, or mid-task. Every second of hesitation adds friction. Every unclear state erodes trust. And the data confirmed it: 58% of users encountered out-of-service chargers — arriving somewhere they couldn’t use, with no warning, no alternative, and no explanation. Across research and usage data, one emotion surfaced consistently: uncertainty. This became the primary design target.
I owned Android UX end-to-end at P97 Networks, working across six parallel workstreams while maintaining a shared design system that scaled across five distinct brand identities.
EV session control: start, monitor, and stop charging from the phone
Store locator and filtering: fuel grade, connector type, availability, services
Favorite stations: persistent trip planning directly from the home screen
Loyalty feeds and promotions: brand-specific campaigns within a shared IA
Safety onboarding: “Don’t use this app while driving” as designed interaction, not fine print
Brand voice microcopy: calm, contextual, client-specific language as interaction design
I worked in close collaboration with iOS — not mirroring, but maintaining coherent UX intent across platforms. *(Yes, I was on Android at the time. I’ve since crossed over to iOS — and can confirm: ecosystem lock-in is very real.)*
Research across field sessions, usage data, and support tickets kept surfacing the same thing: the moments where users failed weren’t feature gaps — they were clarity gaps. Users couldn’t tell what state they were in, whether their charger was usable, or whether the app was working at all. The friction wasn’t in the flow. It was in the silence.
THE REFRAME: A mobile app at a fuel or EV station isn’t a marketing surface — it’s safety infrastructure.
Every unclear state, every failed load, every missing availability cue eroded trust at a moment when users had nowhere else to turn. Designing for confidence meant designing for the worst-case environment first: low signal, wet hands, bright sun, time pressure. Clarity wasn’t a polish step. It was the job.
Platform nativity over visual sameness
We optimized for platform trust, not consistency for its own sake. Android users got Material Design patterns they already knew: FAB for primary actions, bottom navigation, sheets and chips for filtering, Material spacing and iconography. iOS users got chevron navigation, safe-area respect, and card-based modals. Users trusted the app because it behaved like their OS — not like a cross-platform UI kit.
White-label branding without breaking UX
Each of our five clients brought their own color palette, loyalty campaigns, photography tone, and brand voice. We reinforced those identities through accent colors, card headers, microcopy moments, and iconography — but the core information architecture, safety surfaces, and primary flows never changed. One system, five brands. Brand drift became impossible by design.
Microcopy as interaction design
This project deepened my conviction that microcopy is not copy — it’s interaction design. In a high-anxiety, safety-critical context, the right phrase at the right moment can eliminate a user action entirely. We wrote for calm: “Charging session underway — stretch your legs.” For reassurance: “We’ll alert you when you’re ready to roll.” For pre-arrival confidence: “Good pick — this station is one of your favorites.” Language was never an afterthought.
The design system I built at P97 had two layers: tokenized surfaces that each client could brand freely, and protected surfaces that never changed regardless of brand. Within that system, five workstreams addressed the five highest-friction moments in the user journey.
EV charging session
Drivers wanted clarity, not fireworks. The charging screen centered on a radial gauge readable in direct sunlight, large numeric percentages, live kW output, starting percentage as context, and clear stalled-state messaging. When users walked away from the vehicle, the phone became a surrogate dashboard — persistent, ambient, and honest about its state.
Favorite stations and session shortcut
Trip planning needed to live on the home screen, not buried in settings. Favorite stations reduced repeat search for regular users. The session shortcut — a persistent surface regardless of where users navigated — ensured no one ever lost track of an active charge. Pre-arrival clarity, not post-arrival panic.
Store locator and filtering
Filtering supported fuel grades, EV connector types, hours, services, payment options, and promotions. Chips with an explicit Apply action gave users control; a visible Reset prevented dead ends. 58% of users had already experienced arriving at an unusable charger — this surface existed to make that impossible.
Offline resiliency
In rural Canada, connectivity isn’t guaranteed. We cached station metadata, session state, and recent favorites so users had something to work with when the network dropped. When the signal dipped, users didn’t panic. Trust equals state continuity — the UI showed what it knew, clearly, rather than failing silently.
Out-of-service messaging
Multi-brand system design
The tokenized layer included color palettes, icon sets, promotional tiles, photography, and loyalty banners — everything a client needed to feel at home in their own app. The protected layer included information architecture, safety surfaces, and core flows — the parts that had to stay consistent for the system to work at all. One mobile system. Five fuel and EV brands. Core UX intact.
One mobile system supporting multiple fuel and EV brands — without fragmenting core UX.
Client approval for brand variations
Impact at P97 was measured in system stability, brand adoption, and user trust signals — not A/B test uplift. The outcomes reflected what it means to build infrastructure that has to work across five clients, two platforms, and environments that make mobile UX genuinely difficult.
Fuel and EV charging became a particularly strong foundation for how I think about mobile UX — but the principles didn’t stay there. Designing for interruption and divided attention, supporting outdoor and industrial contexts, prioritizing glanceability and state continuity, treating language as interaction design, designing safety through clarity rather than warnings — these now inform all of my mobile work.
The most durable lesson from this project: the environment a user is in changes what “good design” means. In a fuel forecourt at midnight with low battery and patchy signal, a beautiful animation is a liability. A calm, honest status message is a lifeline. Designing for the worst-case context first isn’t pessimistic — it’s the only way to build something that earns trust.
Good mobile UX sometimes means preventing interaction.
A large, unmistakable Stop button during charging
