Cadence

Context

Small charges, spread across a month, add up quietly.

Streaming, music, cloud storage, a gym, a design tool: each one is a few dollars, each one renews on its own date, and most of them are billed in a currency the person paying does not earn. Nobody decides to spend a hundred and forty dollars a month on subscriptions; it happens one renewal at a time. Cadence is a full prototype of a tracker built around the moment that matters, the few days before a charge, when there is still time to cancel.

Problems

The hurdles, named plainly.

Four things stop people from keeping track of what they pay for.

• Renewals arrive unannounced. The first sign of a charge is usually the bank alert after it has gone through, which is exactly one day too late to do anything about it.
• Adding one is data entry. Trackers ask for a logo, a colour and a category on top of the price and the date, so people add three subscriptions and give up on the rest.
• The price is in the wrong currency. A $15.49 plan means little to someone paid in cedis until the conversion is in front of them, and the exchange rate is the part everyone forgets.
• A total says how much, never when. One monthly figure hides the fact that most of it lands in the same week.

Approach

Design principles

Adding

Three fields, and the rest fills itself in.

Typing "Netflix" is enough for Cadence to attach the real logo, Netflix's red and the streaming category; a service it does not know gets a colour generated from its name and a best guess at the category. The country chosen at sign-up sets a second currency, so the price field answers the question people actually have, how much that is in cedis, as they type. Every dropdown is a scroll wheel, and the value under the centre line lights up while the wheel is still moving, not only when it stops. A missing field turns red, shakes once and says what it needs, in place of the browser's own pop-up.

The subscription

Everything about one charge, on one screen.

Opening a subscription leads with the price, highlighted in the brand's gold, and says when the next charge lands in words rather than a date to decode: "Next billing in 6 days". The latest receipt opens as a sheet with its own reference number, and the billing history lists every charge of the past year with a running total, each one opening the same receipt. Cancelling sits at the bottom of the page in red, and its confirmation reads "Keep it" or "Cancel it", never "Cancel" and "Cancel subscription" side by side.

Introducing

Reminders that arrive when you asked for them.

Every notification has a delivery time: its notice day at the reminder time set in Settings. Until then it does not exist; when the time comes, a banner slides in, the bell picks up a dot, and tapping either opens the full message, with the amount, the date and the card it will be charged to. A payment that was due and not updated turns into an overdue notice the next morning. The explanation of how it all works lives behind a small ⓘ beside the reminder time, instead of as a paragraph under it.

• Three days' notice, or thirty for a yearly plan, because a bigger charge deserves a longer runway.
• Delivered on the minute while the app is open, and as a system notification when it is in the background.
• Read stays read. Switching reminders off and on again does not resurface anything already seen.

Around the edges

Where the money goes, and a switch that means it.

Analytics answers "when" as well as "how much": a bar per month, past months in ink, this month in coral and the coming months as a grey forecast, so a heavy October is visible in September. Turning renewal reminders off really does silence them. The inbox says so, keeps showing overdue payments, which are not reminders, and offers the way back to Settings.

Alternatives

The routes not taken.

The subscription screen began with editable category chips and two large cards side by side, "Cancel subscription" and "Edit details". The chips asked the user to maintain something the app had already worked out, so categories went back to being detected silently. The two cards gave cancelling the same weight as editing; cancelling became a quiet red button at the foot of the page and editing a pencil in the header. The reminder settings went the same way: a line of explanation under the time became an ⓘ beside it, because the explanation is needed once and the setting every time.

Reflection

Project takeaways.

• Every field you can infer is a field you should remove. Matching the name to a brand took away three pickers, and adding a subscription went from a form to a sentence.
• A setting has to change something visible. The reminder time only earned its place once notifications really arrived at it, and the switch only once turning it off emptied the inbox and said why.
• One clock for the whole app. The bell, the inbox, "renews in 3 days" and the banner all read the same schedule, so none of them can disagree about what has arrived.