Paul TinkerProduct designer · Design systems Back to portfolio

AI-native products & design systems

A working log of designing and building digital products with AI

A renewals app for families: design system, iPhone and Android apps, docs, Storybook and a live site. I made the decisions; AI did the building.

Kavvi's first onboarding screen: the kavvi wordmark above three fanned renewal cards, with Every renewal, one calm place and a Get started button.
WelcomeThe first onboarding screen. Each step after it can be skipped, and the aim is to reach your own renewals in about a minute.
Kavvi home screen: renewal cards sorted by due date, each in its own colour.
Every renewal, one listMOT, insurance, subscriptions and passports in one list, sorted by what's due next. Each card keeps its own colour.
Importing renewals from a spreadsheet, with a tick beside each one.
Bring your spreadsheetAn existing list in Excel or Google Sheets comes across in one go. You untick anything you don't want.
Quick fill reading a pasted renewal email into the new renewal form.
Paste the emailQuick fill picks out the provider, date and price from a renewal email. It runs on the phone.
One card holding the family's passports, due in 23 days.
One card for the familyEveryone's passports sit on a single card, with a date and a price for each person.
Syncing two phones by scanning a QR code.
Sync by scanningTwo phones scan each other's code once and stay in step. There's no account and no server in between.
The privacy settings: stays on your phone, locked with Face ID, backups to your own account.
Stays on your phoneNo account and no tracking. Backups go to your own iCloud or Google account, and Face ID locks the app.
The Kavvi app icon above the kavvi wordmark.
Logo and app iconThe kavvi wordmark, with ticks for v's, and the app icon that shipped.
1 / 8

The question: can one designer, directing AI, take a product the whole way, from the design system to the app stores? Kavvi, a renewals app for families, was the test.

Dates, not documents. Kavvi tracks the dates every household forgets (MOT, insurance, passports, subscriptions) and reminds you before they're due. The first design scanned passports and masked the numbers. Then I asked whether we needed the documents at all. We didn't. A list of names and dates is no use to a fraudster, so there's no scanning, no account and no server. Removing a feature did more for security than any encryption would have, and it took a lot of complexity out with it.

When building is this fast, what you leave out is the design.

What's in it. Import the spreadsheet you already keep, whatever the columns are called, or paste a renewal email to fill in the details. One passport card covers the whole family, with children's five-year dates worked out. Reminders are scheduled on the phone, so they arrive without signal. Two phones sync by being held together. There's a widget, and Siri on iPhone.

One system, start to finish. Polished visual design wasn't the point. The goal was to test production end to end, from the design system all the way to the app stores, and to get real feedback on the functionality. I started on Chakra UI for speed and built my own design system on top, themed light and dark. The components live in Storybook and a docs site, and the phone and tablet apps, the marketing site, and even the store images and listings are all built from them.

Approach

Chakra and native librariesI started on Chakra UI for speed, so layout, theming and accessibility were there from day one. Capacitor's native libraries do the phone work: reminders, the QR scanner, files and sharing.
Storybook and docsThe components live in Storybook and a docs site, so the design system can be shared and everyone works from the same thing.
Apps and marketing siteThe phone and tablet apps and the website are all built from those same components.
On the app storesLive on Google Play and in review for the App Store, with the store images and listings made in the same system.
Taste and judgement, throughoutEvery step came down to what to leave out, how it should feel, and when it was ready.

One token file feeds the lot. Changing the card palette changed everything at once, the build fails if any colour pair drops below AA, and choosing Arabic turns the whole thing right-to-left.

App launcher iterations

First Kavvi icon: three renewal cards stacked on a slate tile.
01 · Stacked cardsThree renewal cards stacked on a slate tile, in the same colours as the cards in the app.
The shipped Kavvi icon: bigger, equal-height bars with more space around them.
02 · ShippedBigger, equal-height bars with more space around them. On iOS from build 4.
1 / 2

Directed, not hand-coded. My hands-on code work is recent and AI-directed, not years of production front-end. The build was prompted; every decision about what stayed was mine. What I bring is twenty years of knowing what a product that works and a production design system need, and checking that Kavvi got both.

Also

  • No AI in the product, deliberately. Sending people's insurance emails to an AI service would have broken the privacy promise in one feature, so Quick fill reads a pasted email with pattern matching on the phone, then asks you to check it
  • Under version control from the start: full history and backups, numbered builds, and a changelog in the docs

What I left out. Most of the decisions that mattered were things I took out or kept out: the passport scans, the account, the server, the AI in the product. When building is this fast, what you leave out is the design.

Get it on Google Play