Upgrading Kanary’s Subscription Management

As Kanary grew and modernized, we needed to upgrade our payment and subscription management flows.

Initially, we had a single payment screen when signing up for Premium, but any subscription changes had to go through customer support.

Moving this to self-service made payments and subscription changes easier for members, unlocked DIY management of additional members on their accounts, and took strain off of our support team.

Where we started

At the start, Kanary accepted payment information when a member upgraded to Premium:

screenshot of kanary's initial checkout experience

In this early version, we managed all inputs and sent the information to Stripe, catching and displaying any returned errors if there was an issue.

This got the job done for an initial signup, but was inflexible for supporting additional flows.

First step

We explored a few options, from continuing to DIY everything, to just kicking users to Stripe's hosted subscription management interface. While the latter would have a nice unified subscription & payments UX, their built-in options for browsing subscriptions were too limiting for our needs.

We instead chose to manage the subscription selection ourselves then bounce users to stripe only for the final checkout and payment input.

This gave us full control over plan selection UX, which would feel at home in our onboarding flows, but also let us take advantage of Stripe's deep experience in accepting payment and billing information.

To accomplish this, I designed and built a new subscription management component that was used for both initially subscribing, upgrading, and managing an existing subscription:

screenshot of the upgraded checkout experience. the screen is split horizontally with a list of features on the left, and toggle selectors for billing frequency and plan type on the right

For this first time, this unlocked:

Being able to choose plans and subscription frequencies in one screen.
Being able to change your plan after signing up. (The supporting text changed to reflect which flow you were in.)

Some additional details not shown above were:

For existing subscribers: the "Save x%" badge was replaced with one indicating it was current plan. (Along with the selection state and correct billing frequency toggle being set.)
For users on older plans: the plan card matching their current billing cycle and plan would reflect their grandfathered subscription price.

V2: Supporting a more flexible member model

We later wanted to make our billing model more flexible. Kanary initially offered Individual plans and Family plans with a preset number of members.

If someone wanted to support more members than what was bundled, this was negotiated via support channels. Our support team would relay pricing information, get consent, and make the updates in Stripe directly.

This wasn't scalable and added a significant barriers for members wanting to include more family members.

Moving to pay-per-member

Instead, we switched to a more flexible billing model where the only choice was between monthly and yearly billing. Each additional member was 50% of the regular subscription price and you could add as few or many as you wanted.

Since supporting various additional members would affect pricing, the screen now needed a subtotal.

desktop and mobile screenshots of the upgraded checkout experience allowing user's to add and manage additional members

In action:

video demonstrating a user choosing between a monthly and yearly billed plan, being able to add or remove a number of selected members on their account, and proceeded to a stripe checkout screen