Interaction Design Concept

The Transparent Jar

A physical metaphor for saving money, coded as a working prototype.

Role Product Designer
Status 2026 ยท Personal Exploration
Weak connection โ€” saves are held safely and sync when it's back.

Bike Fund

Saving for a new bicycle ๐Ÿšฒ

$27
saved of $120 goal

Recent drops

    Live prototype โ€” tap the buttons, then try the connection toggle.

    Overview

    A Canadian fintech recently added a feature to its new family accounts: parents can manually add interest to a kid's savings, just to show them how growth works. Good idea. But it got me thinking about how that growth actually shows up on screen, so I built this as a personal exploration.

    Where this idea came from

    Most banking apps show growth as a line chart. And here's the problem: kids don't read graphs. Honestly, most adults don't love them either. A red line dropping down still triggers a small flinch, even when nothing bad happened. If a bank wants a kid to actually build a saving habit, the interface can't feel like a spreadsheet. It needs to feel real.

    The Problem

    Two things kept coming up once I actually sat with this:

    Constraint 1

    Kids Don't Read Charts

    A line going up and to the right means nothing to an 8-year-old. It's an abstraction on top of an abstraction. What they understand is something getting fuller, the same way a jar of coins or a water bottle does.

    Constraint 2

    Adults Don't Love Them Either

    Red and green financial charts carry a small dose of anxiety even when nothing's wrong. If this is meant to be a calm, family-friendly product, the visual language shouldn't borrow from a trading app.

    Additional constraint: the offline moment

    If a parent tries to send an allowance while they're on the subway with no signal, the app can't just freeze or fail silently. That's exactly the moment someone panics and calls support.

    Design Solutions

    Two decisions came directly out of those constraints. Both are live in the prototype above.

    01 โ€” The Jar

    Saving You Can Watch

    Every dollar saved drops a coin into the jar. No numbers to interpret, just a jar getting fuller, which is something every kid already understands without being taught.

    Why a jar, not a progress bar

    A progress bar is still an abstraction, just a friendlier one. A jar reads as an object with weight in it. That's a small difference, but it's the difference between "data" and "something real."

    02 โ€” The Offline State

    Designing for the Subway

    Turn on "simulate bad connection" and try adding money. The button doesn't spin or fail. It tells the parent plainly that the save is held, and it'll drop in once the connection's back.

    Why it doesn't look like an error

    An app that fails quietly during a money transfer is exactly the kind of thing that generates a support call. Handling the bad-connection state calmly isn't just nicer, it's fewer people needing to phone in and ask where their money went.

    Takeaways & Open Questions

    A few things I'd want to test with real families before this went anywhere near production:

    Open Question 1

    Real Networks Are Messier

    My offline delay is a fixed 2.4 seconds for the demo. Real connections come back at random, sometimes not cleanly. The actual retry and conflict handling behind this would need real engineering input, not just a UI state.

    Open Question 2

    How Much Reward Is Too Much

    A coin dropping in feels good, that's the whole point. But a savings product for kids should probably build patience, not just reward every deposit instantly. I'd want to test whether the jar still feels good on week six, not just the first time.

    Note: This is a personal design exploration, not built for or affiliated with any company. It was sparked by a real feature I noticed in the market, banks starting to let parents manually boost a kid's savings to teach them how growth works. Everything else here, including the jar itself and the offline state, is my own concept.