Designing a Seamless Billing and Payment Experience for a Low-Code Platform
Overview
Company
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.
Problem
Canonic was launched as a free-to-use platform. After getting validation, Canonic wanted to offer more to the users with freemium subscription plans.
There was a need to define the pricing strategy for the paid plans along with a holistic experience for users to select/modify/cancel plans in a self-serve manner with complete customer support.
Solution
Entire experience around billing and payments for the user.
My Role
Lead Product Designer
Duration
1 month
Team
Simranjot Singh (PM)
Pratham Agrawal (Dev)
Karthik Grewal (Dev)
Research & Define
User
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
To drive revenue growth and enhance user satisfaction, offering a seamless billing and payment experience is crucial. 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.
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.
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.
Product Team Needs
Gain insights into user behavior to optimize the user journey and encourage conversions.
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.
Define
Service
Blueprint
A visual representation of the service delivery process.
Solution
User's 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
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.
Invoice Management
Dashboard
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.
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.