Hopscotch

I directed twelve specialized AI agents — scoped like a real org — reviewing, steering, and sharpening rather than writing every line. Where needed, I jumped in to design a specific screen (watch, widgets, wallet) and used my Claude Code agent team to bring the designs to life with pixel-perfect accuracy.

I designed Hopscotch for myself first. I already had the plastic key cards — what I wanted was a loyalty wallet that behaves like a smart device instead: the right card showing up the moment I need it, then getting out of the way. The best version is the one you never consciously open.

Once I'd shipped that first version, it was clear other people wanted the same thing. So I designed it out across every surface someone actually reaches for — the lock screen, a widget, the watch — each native to that surface, never shrunk down from the phone. That constraint is the whole story of the build.

This is the one thing nothing else in the category does well, and the reason Hopscotch exists. You set a store's location once, and then you never open the app again. Cross into the geofence and the phone wakes Hopscotch in the background: the right card surfaces itself — a notification, the barcode on your lock screen, the card already on your wrist.

Every other surface is in service of this one moment — your phone intelligently surfacing the right card the instant you arrive, before you've even thought to look for it. You glance down and scan.

I'd used Stocard for years, and when it went away I got curious — could I just build the thing I missed? So I started small and specific: one card (my gym), a geofence around it, and a light brand guideline to give it some spunk. With Claude Code as a collaborator, going from my imagination straight to a working app on my phone felt like magic.

Then I put it in my pocket and used it — and two early learnings set the tone for everything after:

From there the app grew one surface at a time, and each addition was intentionally crafted for the surface it lived on: the lock screen, the widget, the wallet pass, and the watch each answer a different question, in a different amount of space, under different rendering rules.

What stayed constant was the learning that even within a unified design system like iOS, each surface has its own mental model to design around.

A personal tool only has to run on my phone. A loyalty network has to run on everyone's. The moment the gym conversation got real, so did the requirement: a sign on the counter shows one QR code, and whoever scans it — iPhone or Android — has to land on an app that feels native and just works. Anything less re-introduces the exact friction the product exists to delete: "I can't put my card on my phone."

So Android isn't a port. It's a clean rebuild in Kotlin and Compose, native to Material the way the iOS app is native to the Human Interface Guidelines. The discipline was to diverge only where the platform forces it — and to name the reason every time.

Setup happens once, on the phone. After that, three surfaces work together so the right card is always already there — without ever opening the app: a barcode on your lock screen, a card on your wrist, and the right card a glance from your home screen. Same promise, sized to three different moments.

Putting the barcode on the lock screen meant issuing a Wallet pass — and that was a non-trivial decision, not a task. Neither platform lets an app sign its own passes, so it takes a small server: each pass is built and cryptographically signed off-device, then added through a secured handshake before the OS will place it on your lock screen. Real infrastructure for what looks like a simple card.

But the harder problem wasn't the signing — it was the lock screen itself: prime, contested real estate where a fleeting notification and a persistent pass compete for the same glance. Which should surface, and when? That tension is the real design problem — and it turns out both answers are right, for different moments.

The watch unapologetically forced the deepest thinking of the project: every element, affordance, and interaction had to prove itself necessary and be immediately intuitive.

Every value in the layout was measured twice — once in Figma, once on device — because at 40mm a 2-pt error is a visible mistake. This was the one screen I fully rebuilt after testing.

The widget is the principle at its smallest: the right card, on the home or lock screen, before you open anything. iOS gives you a few fixed sizes; Android's adaptive grid reflows from 2×2 up to 4×4. Same job, two rule sets — and the same non-negotiable, that a barcode is only useful if a scanner can read it, so it forces light regardless of your wallpaper.

Hopscotch has no account and no onboarding, so the settings screen is the one place it explains itself — and I treated it as a design artifact, not a junk drawer of toggles. It answers the three quiet questions a careful person actually asks: what is this app doing, how much of it can I shape, and where do I go when something breaks.

The row that earns the most trust is the one people dismiss fastest — always-on location. So it's the one that says, in plain language, that your location is matched on-device and never leaves the phone. Every switch below it is a real decision the user gets to make, and there's a clear path to help — because products fail, and an honest one tells you where to turn when it does.

The geofence fired, "you're at the gym," I opened the app, and the Nearby tab was empty. A notification that says you arrived, followed by a blank screen when you expect a card — that's the product's entire purpose, failed.

The cause was two systems using the same word differently. Apple's geofence engine is generous — Wi-Fi, cell, hysteresis — and fires when you're roughly there. My Nearby check was unknowingly strict: it used a different method that re-derived your position from a single GPS reading — and indoors that reading can be 60–165m off, far enough to fall outside the location's circle and surface nothing. This wasn't just a bug fix; it was a decision about the cost of being wrong.

That was the loudest lesson, not the only one. Every surface taught me something the plan got wrong — a handful of moments where I set out to do one thing and the real world insisted on another:

It started with the paper punch card, the one a shop hands you, that the person at the register punches or marks with a Sharpie every time you order, and that you lose long before it's full.

The ritual works; the card doesn't. Shops end up reprinting them constantly, handing the same regular their third or fourth. Many small businesses are stuck right there: not for lack of wanting something digital, but because every real option costs too much — the price, a modern POS, trained staff, and the budget and brain space to run it.

Hopscotch is already built for exactly this. The wallet I made for myself is the supply side; a business platform is the demand side. A shop sets up its rewards in a simple portal, and the rest reuses what the app already does best: you walk in with Hopscotch, it confirms you're actually there, and you scan the shop's QR code at the counter to collect a punch.

Holding all of this together is a single recognizable object: the white barcode card, forced-white on every surface because a scanner needs it that way, consistent enough that it becomes the thing people recognize as Hopscotch. Around it sits a cross-platform system — a teal owned in a category of generic blue wallets, one shape language, and tokens that map across iOS, Android, and the web.

Inside the apps, the brand gets out of the way. Hopscotch wears each platform's own typeface — SF Pro on iOS, Google Sans Flex on Android — because a utility should feel like it belongs to the phone, not like a brand performing for you. The expressive voice, Fraunces and Outfit, is saved for the web, where we're meeting someone for the first time and personality earns its place.