Designing a subscription billing experience that drives conversion.
Canonic was launched as a free-to-use platform. After getting validation, Canonic wanted to offer more to the users with freemium subscription plans.
Company Overview
Founded in 2021, Canonic revolutionizes complex app development with its full-stack platform. With over 10,000 users globally, Canonic offers end-to-end app creation without code.
It seamlessly connects to databases and services like Mongo, Postgres, Slack, and Shopify. Users can build multi-step workflows and interactive UIs using drag-and-drop components and JavaScript. Canonic stands out by providing unlimited user access across plans and enabling vendor lock-in-free exports of projects into human-readable code.
It's a user-friendly solution for building scalable apps and automation efficiently.
The Problem
Users were eager to signup to the platform but were hesitant to upgrade to paid plans due to the lack of clarity around the billing process.
Canonic launched on ProductHunt without a billing system in place. Users were eager to sign up and explore the platform but were hesitant to upgrade to paid plans due to the lack of clarity around the billing process.
We needed to address the following challenges:
- Users were unable to track their usage limits.
- Users found it challenging to upgrade or downgrade their plans.
- Users faced difficulties in adding payment methods and managing invoices.
- Users were hesitant to upgrade due to the lack of clarity around the billing process.
- No incentive to users for opting for longer term plans.
- Increase the customer lifetime value (CLV) by driving conversions.
Goals
đē Increase the free to paid user conversion rate)
This was the main metric that we wanted to focus on. Drive conversions to increase revenue.
âī¸ Allow users to track usage.
Users should be able to monitor their usage limits, and should be notified accordingly.
đī¸ Increase visibility on plan differences.
Show plan limits and ease users into upgrading to higher value plans.
User Research
Conducted user interviews to gather user needs, challenges and emotions. leading to the following user needs:
- Free trial period for exploring the platform will allow them to test thoroughly.
- Flexible plans with monthly and annual options to be able to scale easily.
- Easy plan cancellation process to not feel locked in.
- Usage monitoring to track limits, and not get stuck in critical situations
- Option to enhance plans with additional features to use the platform in a cost effective manner
- Multiple payment modes for seamless transactions experience.
- Access to monthly payment invoices for financial records.
- Support for international transactions to accept global payments.
Stakeholder Research
I conducted stakeholder interviews with product managers, sales representatives, and customer support staff. These interviews provided valuable insights into their pain points and requirements, informing our design strategy.
I conducted stakeholder interviews with product managers, sales representatives, and customer support staff.
Sales Team Needs
- Provide data on users attempting to purchase or upgrade plans for targeted follow-ups.
- Alert sales to users nearing or hitting usage limits for proactive engagement.
- Identify users in specific segments for tailored sales pitches.
Product Team Needs
- Identify optimal moments to present upgrade options based on user usage patterns.
- Analyze feature usage by paid users to prioritize development.
- Continuously enhance the user experience to improve conversion and upselling opportunities.
Marketing Team Needs
- Identify popular plans to prioritize marketing efforts.
- Segment paid users for targeted campaigns to drive engagement and upsell opportunities.
Support Team Needs
- Alert about payment failures for proactive assistance and churn prevention.
- Provide insights on user challenges with features for timely assistance and improved retention.
Service Blueprint
A visual representation of the service delivery process.
Based on feedback from users and stakeholders, it was time to create a service blueprint! It's a visual representation of the service delivery process, highlighting the user journey, touchpoints, and opportunities for improvement.
I used it to understand the user journey, identify improvement opportunities, and facilitate cross-team collaboration in enhancing the user experience.
The Payment Plans
Freemium subscription and usage based billing.
We designed a range of subscription plans tailored to meet diverse user needs. These plans offer varying features, limits, and benefits to cater to different user segments. The plans are designed to drive conversions and increase customer lifetime value by providing users with the flexibility to choose the best fit for their requirements.
Designing the Billing Dashboard
Features such as plan overview, plan comparison, FAQ's, usage summary, modify plan, add payment methods, it became easy for user to take action
Plan Overview
Give the user a broad overview of all the plans. They should see all the top features.
Usage Summary
Users should be able to track their usage limits and see how much they have used.
FAQs
Answer common questions users might have about the billing process.
Modify Plan
Allow users to easily upgrade or downgrade their plans.
The Checkout Flow
The checkout flow, integrated with Stripe, offers a seamless payment experience with multiple payment method options. Users can easily apply coupons and discount codes to avail themselves of special offers. This streamlined process ensures a quick and efficient checkout for enhanced customer satisfaction.
Plan Selection
Give the user a broad overview of all the plans. They should see all the top features.
Discount Codes
Allow users to apply discount codes to avail special offers.
Payment Details
Users can easily add payment methods and manage invoices.
Invoice Management
Centralises all your invoices, providing an organised list for easy access. Users can view detailed information and statuses of each invoice. Additionally, it enables hassle-free downloading of invoices directly from the platform.
Adding the plans to the website
The website features a meticulously designed pricing page that clearly outlines various plans and their benefits. This ensures users can easily compare options and select the best fit for their needs.
Result
The release of the subscription billing experience had immediate impact. The team saw a 6 conversions in the first week and a surge in demo requests for higher paid plans.
6 conversions in the first week
Users were getting the value they need in higher plans.
100% successful transaction
Out user flows were allowing payments without much challenge
Users were now able to track their usage limits, upgrade or downgrade their plans, add payment methods, and manage invoices with ease. The new billing system provided clarity around the billing process, incentivizing users to opt for longer-term plans.
That's all for now folks! đ