Building paid subscriptions for multi-user teams on Contra

Quick demo

Introduction

Contra is built to grow, manage and pay your flexible talent network, all in one place. A core piece of this is the ability for clients to manage freelancers and contractors. We wanted to build a feature that would allow companies to upgrade to a paid subscription plan, unlocking premium features and functionality for their team members. This feature would be a key part of our monetization strategy and would help us to grow our revenue and user base.

Challenges

Building a paid subscription feature for multi-user teams was a complex and challenging task. We needed to design and build a scalable permissions system that would allow team owners to manage their team members and control access to premium features. We also needed to integrate with Stripe to handle payments and subscriptions, and deliver a seamless user experience that would make it easy for team owners to upgrade and manage their subscription.

Some key considerations:

  • Integrating subscription tiers with our existing team and user models + permissions systems
  • Integration with Stripe for payment processing and subscription management
  • Gating premium features behind a subscription wall that have typically always been free
  • Contextualizing CTAs and messaging to encourage users to upgrade from specific feature entry points
  • Enabling the sales and product teams to manage and create customized subscription plans for customers working with the sales team

Architecting a solution

During the product definition and design phase, I worked closely with the team to incorporate engineering requirements into the plans and designed UX for the feature. I created a detailed technical design document that outlined the architecture, data models and relationships, GraphQL schemas, all of which were documented as a series of UX actions that would be taken to complete the upgrade process.

We had decided early on to leverage Stripe Checkout to take on the bulk of the subscription UI and payment collection complexity—having integrated heavily with Stripe for many product features previously, I was keenly aware of the challenges and complexity involved for accepting global payments with our own UI. Fortunately, Stripe had recently released embedded mode for Checkout, and I built a proof of concept that showed how this would work for our use case. This allowed us to move away from hosted checkout pages UX, keep the user on the page, and massively reduce friction for upgrading—all with the added benefits of reduced routing complexity. My proposal to use embedded checkout UI was met with enthusiasm from the team and we moved forward with this approach.

Implementation

After the RFC and design phase, I broke down the project using Linear into a series of milestones to enable iterative delivery and testing of the feature. We started with the baseline permissions changes, integration with Stripe webhooks, built some foundational UI components that would be integral to the subscription flows, then moved on to gating features and UI polish work.

All of the features that we were putting behind a paywall had always been free and selling the value of these features to users was a key part of the project. I worked closely with the product and design teams to create messaging and CTAs that would encourage users to upgrade, and we ran a series of A/B tests to optimize the messaging and conversion rates. This process involved a signficant number of iterations and feedback loops, but we were able to find a solution that worked well for our users and helped to drive conversions.

Resolution

The implementation and engineering work on paid team subscriptions was a huge success. We were able to deliver a feature that was well received by our users and that helped to drive revenue growth for the company. The feature was shipped on schedule, in time for our Contra for Companies launch (view on product hunt), and we were able to iterate quickly on the feature post-launch to optimize the user experience and drive conversions due in large part to the solid foundation we had built.

UI screenshots

Here are some screenshots of the paid team subscriptions feature in action:

code snippet screenshotcode snippet screenshotcode snippet screenshotcode snippet screenshot