✺ case story

A car-UI for what happens between charges.

Tūī is an EV charging companion. Walks you to a bakery, a dog park. A quiet bench while your car charges.

Role
Concept · UI · interaction
Tools
Figma · Figma MCP
Scope
One designer · end-to-end

42 min avg DC fast-charge. U.S. DOE · 2.4M sessions · 2023.

plug in
◆ the problem

Plug in. Sit around. Wait.

A driver sitting in his EV at a public DC fast charger, killing time on a phone.

Most EV apps optimize how fast the car charges.
The wait itself, a phone in your hand
+ a dozen apps to scroll through.

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

❋ research
✤ findings

I asked.
Three patterns came back.

1:1 interviews with EV-owning professionals, ages 35 to 55. The same idea: make the wait intentional with food, movement, or relaxation.

Gas stations have convenience stores. Charging stations are dropped in random parking lots.

Rivian gets it right at parks, trailheads + coastlines. The station is the destination. Everywhere else, you are scrolling Google Maps + dodging the idle fee.

I designed for what should be.

✷ the flows

In motion.

Three end-to-end flows from the original Figma prototype. Hover to play.

❀ 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.

    “I'm Tūī, your EV Charging Companion. I enjoy birds, napping on the job, and living rent-free in your car.” Tūī, introducing himself
    Tūī mascot in his normal state, with tail
    Awake. Tail out and alert.
    Tūī mascot napping, with z's floating above
    Idle too long? He naps.
  2. 02

    Five activities. Touchscreen-sized, finger-perfect.

    Listen, Focus, Connect, Outside, Nourish. Five paths into the wait. Each card is a different reason to step out of the car or stay with intention.

    The five activity-category cards: Listen, Focus, Connect, Outside, Nourish
    Drawn in Figma w/ the pen tool.
  3. 03

    One micro detail, hidden in plain sight.

    When you finish picking an activity, getting directions, and choosing a charge level, confetti showers down the screen. One piece sticks to Tūī. Tiny but deliberate.

    Tūī mascot with confetti pieces stuck to his face after a successful charge-set
    One piece always sticks.
  4. 04

    A handoff to the phone, in simple communication.

    Tūī never sends paragraphs. Charging started ⚡️🔌. Walking directions for the dog park 🐕. Charge almost done, head back 🔋🔌.

    iOS lock screen: charging started, Tūī asks about a dog park
    charging started ⚡️🔌
    iOS lock screen: walking directions to a dog park near the charger
    dog park, 4 blocks away 🐕
    iOS lock screen: charge almost done, head back to the car
    charge almost done, head back 🔋🔌
❖ glow-in-the-dark

For night.

The dashboard defaults to glow-in-the-dark, after dark. Easier on your eyes, easier to find what you’re after when the cabin’s dim.

Calm comes from removing, not adding.

Glow-in-the-dark mode of the activity selection screen: black background, lichen-yellow outlines, icons reduced to silhouettes
✢ model context protocol

I tried to rebuild it
through the Figma MCP.

I pulled my Figma frames + components into code, wired click hotspots, drove a sprite-based confetti shower.

It runs but it lacks soul.

The mascot doesn't animate. The slider doesn't behave. The Figma prototype is what stayed as the showcase.

Go ahead and test it out.

✢ reflection

What I'd build
differently.

Tūī finished as a Figma prototype. Linked frames, animated transitions, lots of mascot iteration. None of the product’s soul translated to working code.

If I were starting today I'd build the UI in Rive and 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 shouldn't be a screen recording. It needs to be a thing that runs.

✷ the backstory

I named it after a New Zealand bird.

Tūī (the bird) is known for mimicking sounds and filling quiet spaces with melody. The blue-green iridescence is the exact palette I used for the mascot.

Tūī also stands for Transport User Interface. The car transports you, the app transports the wait, the bird signals movement.

A real Tūī bird, blue-green iridescent feathers, white throat tuft
A real Tūī I photographed in NZ. The brand colors come from him.
The Birdsong flow plays my field recording from the same trip.
The full field recording. Fantail birds in the foreground, Tūīs in the back.

This recording is what made me want to build Lost & Endangered my next case story.