Teams Billing
Timeline
June 2020 - August 2020
Role
Product Designer, UX Writer
Team
Abe Carryl, Angie Kim, Sieh Johnson, John Adams, Lane Billings
Tools
Figma, JIRA, Bitbucket
Overview
When we launched Teams in March of 2020, we didn’t have a clear subscription plan for our users. Whether you were an enterprise customer or an everyday consumer (Pay-as-you-Go) you were offered the same set of features. Not only did this lead to confusion from our users, but it wasn’t a smart business decision for Teams as a product going forward.
With that, this project was focused around building out an in-product billing flow, as well as in-product messaging to intuitively guide users through the conversion process from a free to a paid, subscribed account.
Problem
Currently, an independent billing system does not exist in Teams. In order for users to change or update their plan, they would need to do so in the core Cloudflare dashboard or through our sales channels.
On top of that, Cloudflare ran a promotion to help small businesses in need by providing Teams for Free for up to 6 months. This left many users in a state of “purgatory,” never have chosen a Teams plan and no way for us to force them to do so. We needed to launch before August 1st to align with promo end emails.
Users need a way to make informed decisions on whether they would like to upgrade from their current plan or in some cases downgrade and provide authorized payment information. Users need to be proactively informed of their options to upgrade, downgrade, or terminate their account. This messaging needs to happen natively in-product to provide transparency with our users.
Solution
Research
Who are we designing for?
Existing teams users
Motivations for upgrading
More distinct plan that fits their business as they scale
Access to new experiences and features in Teams
This results in customers not automatically being pushed new entitlements and reciprocally, any new features and benefits. For example, these are just a few of the many features which have recently been put behind entitlements under our new subscriptions:
net-New users
Benefits of signing up
Overnight web development project, especially when collaborative: Devs log into staging and test sites protected with Access
Personal pet projects: large fileshares you want to make available only to friends and family
Protect your home wi-fi network
Monitor requests across your networks (curiosity)
Business goals
Teams Trial Adoption: Acquire new users at our free tier, and grow with them by offering them frictionless upgrades to our paid tiers wherever possible. This requires an understanding of what draws net-new users to Access and Gateway when they sign up for our Cloudflare for Free plan.
Trial Conversion: Help customers using the free trial to deepen their level of engagement to ensure greater success in conversion.
Email conversion plan
We worked with the Product Marketing team and the Brand design team to understand how users will be notified about updating/choosing a plan. From each email, we encouraged users to either A) Learn more about the new Teams plans or B) choose their plan in the product.
| Email content | Date | Email goal | User target |
|---|---|---|---|
| Top apps behind access | 7/8/20 | Adoption | Free trial users; accounts likely to adopt Access |
| Popular use cases & dev docs | 7/15/20 | Adoption | Free trial users; accounts likely to adopt Access |
| 30 day countdown | 8/4/20 | Conversion | Marketable PAYG >50 seats, Marketable contract |
| 14 day countdown | 8/18/20 | Conversion | Marketable PAYGO, All non-marketable |
| 7 day countdown | 8/25/20 | Conversion | Marketable contract |
| 1 day countdown | 8/31/20 | Conversion | Marketable contract (Remove customers who have not opened both 30-day AND 7-day) |
Upgrade flow
Explorations
Pick a plan
This was the most challenging experience to design since the Teams plans kept changing from Cloudflare’s pricing counsel. I was spinning my wheels trying to design without having the actual final content. I remembered to keep our goal in mind: users can understand which plan best works for them and make an informed decision from here. Below are a few of the many explorations done around the plan picker experience.
Where we landed
1. Pick a plan
Once the plan structure was finalized, the challenge here was presenting 5 different plan options to our users without overwhelming them.
From the email campaigns, we encouraged users to visit the Teams pricing page to learn more about our plans before arriving here to make an informed decision around which one to chose. We put our foot down that not all education should happen in product, and we should utilize our marketing pages for doing so.
2. Configure a plan
If users chose an Access, Gateway, or Teams Standard plan, they would need to input the amount of users they want to pay for. Teams Free plans come with the first 50 users for free.
3. Add a payment method 4. Review
Downgrading a plan
Lorem ipsum dolar.
Launch
Internal announcements
I’m very proud of the team that worked on this, given the challenges we faced. We had a very short turnaround time after the Teams plans were finalized from our executives, therefore my Engineer, Sieh and I worked very closely together to get the Teams Billing experience out the door.
External announcements
Emails
Conversion data
8.25 - 400+ accounts, 2000+ MUA migrated.
https://wiki.cfops.it/pages/viewpage.action?pageId=248367794