case story

42 minutes
of waiting.

An EV car-UI to help find activities near charging stations. Walking directions + charge status sent straight to your phone.

10%
Role
Concept · UI · interaction
Tools
Figma · Figma MCP · Web Speech API
Scope
One designer · end-to-end
◆ the problem

42 minutes

EV drivers spend an average of 42 minutes at a public DC fast charger.

Apps optimize how fast the car charges. Nobody designs for the wait itself.

U.S. Dept. of Energy + Energetics, 2.4M sessions through June 2023.

❋ research

Three drivers,
three flows.

1:1 interviews with EV-owning professionals 35--55 + a question I kept hearing back: what do I do for the next forty minutes?

The wait isn't the problem. The boredom is.

So I built a co-pilot for the in-between.

❀ what I designed

A car-UI + a text-message handoff.
Not another app.

  1. 01

    One mascot to break the silence.

    Tūī is a sidekick, not a chatbot. Greets you by name + breathes + blinks + naps when you're idle too long. Picks up the weight of the activity prompt so the car doesn't feel cold.

  2. 02

    Five activity categories. Touchscreen-sized, finger-perfect.

    Listen + Focus + Connect + Outside + Nourish. The grid is the same across every persona. Press, drill in, confirm. Three taps, you're committed.

  3. 03

    A storybook moment between every step.

    When you press Nourish, the card lifts + Tūī peeks up from behind it with bright yellow eyes. Tiny, deliberate. The kind of detail you don't notice until it's gone.

  4. 04

    A handoff to the phone, in emojis.

    Tūī never sends paragraphs. Just ⚡️🔌 when charging starts, 🍞 + a location pin when the bakery's three blocks away, 🔋🔌 when the car's full. Voice: best friend who doesn't overshare.

❖ the show-stopper

The slider is the screen
I'm still proudest of.

Drag the knob + the gradient fills the track + the percentage tumbles in a vertical stack + the cabin halos in real time as your finger pulls.

I was told this was too ambitious for a UX class. I built it anyway, in 2024, with a Figma slot-machine column inside a clipped frame. Now it's real, in code. One <input type="range">, one CSS gradient, one translateY tied to the value.

Craft over process. -- final reflection in my Fall 2024 deck

✢ reflection

What I'd build differently.

Tūī finished as a static Figma prototype. Linked frames, animated transitions, lots of mascot iteration. None of it translated to engineers. The handoff was dead.

If I were starting today I'd build it in Rive + ship it in code from week one. The mascot would breathe in production, not just in Smart Animate. The slider would behave, not just demo. A prototype isn't a screenshot. It's a thing that runs.

This page is that retake. Same design, alive.

🪶 the through-line

I named it after a New Zealand bird.

Tūī (the bird) is known for mimicking sounds + filling quiet spaces with melody. The iridescent green-blue plumage is exactly the gradient I picked for the mascot, before I knew the connection was there.

The Birdsong flow plays my own field recording from a 2024 New Zealand trip. That same recording is what made me want to build Lost & Endangered the next semester.

Past-me didn't know she was planting a seed.