Product
A SaaS company that manages product information and monetise their E-Commerce GraphQL APIs, allowing end users to build shops using any front end framework. The company offers three types of subscription plans to its customers(enterprises and consumers). Each plan has different limits on the number of orders, products, API calls and amount of resources such as bandwidth. Company wants to build a billing, payments and invoicing platform that can allow them to charge their customers based on the chosen subscription plan.
Technology Stack
- Node.js
- React
- TypeScript
- Next.js
- MongoDB
- GraphQL
- API Design & Security
Goals
With the goal of launching the billing, payments and invoicing platform for customers, I identified and broke down the following requirements into clear and concise user stories in the project management tool.
- Create a working prototype with the basic user journey with most edge cases covered, get team review and feedback.
- A new user should be able to sign up for the product without a credit card. The company offers a FREE plan which users should be allowed to experiment with until their usage exceeds the FREE limits.
- Existing users should be able to add credit card and activate their existing subscription.
- New users should be able to sign up for subscription plan of their choice and set up their credit card for automatic monthly recurring payments.
- Allow users to upgrade and downgrade their monthly subscription plans and create rules around plan downgrades to prevent system abuse.
- Allow users to add, remove and update their credit card information on file.
- Collect the payment for the monthly subscription plan via payment processor.
- Every subscription should be automatically renewed and customer credit card should be charged for the usage.
- Allow the company to collect taxes (VAT) based on the country of the customer.
- Failed monthly payments should be reported on the company's customer success slack channel. Additionally, have a mechanism in place to inform the customer about a failed transaction.
- Every customer should receive the invoice on their registered emails.
- Have a reporting mechanism in place to track monthly new signups, subscription activations and the usage. This report should be shared with a dedicated team for review at the beginning of the month.
The Approach
- Worked with cross functional teams to collect the usage data and prioritized the product features for the release.
- Translated the notebook ideas into prototypes and developed the initial workflows on Figma and Sketch independently.
- Organized the product requirements into actionable epics and user stories.
- Created videos and documentation to federate and communicate the workflows. It kept the different teams in sync and on the same page.
- Worked with the UX team to convert the user journeys into final UI screens using the custom theme and design system principles.
- Worked closely with the backend engineering team to define the API contracts, roadmap, deadlines and release goals.
- Implemented the product UI layer, designed and developed middleware APIs, and hooked up integrations with Stripe, Slack webhooks, and emails.
- Performed QA to test the platform readiness in dev and production environments.
- Defined a metric to measure progress and manage the pipeline of post-launch marketing campaigns and tasks.
- Collaborated with marketing to team to help and prepare for the billing launch.
Resources
Figma Design | Initial Prototype
Here is the Figma prototype of a hypothetical billing, payment and invoicing system. I design simple prototypes to identify the user journey and then collaborate with the design and engineering teams.
A few Figma workflows:
Mindmap using XMind
I document workflows to develop a mental model. They are usually created beforehand to avoid remembering and memorizing edge cases. Every time a new use case or feature is added, this mind map is updated and shared with the team. It helps tackle the problems of miscalculating engineering and UX effort.
Click on this Mindmap to view more details
Note: These resources are not the original copies of my work done with the client. As per the NDA signed, I am unable to disclose the company information, their intellectual property and their data. These resources have been created from scratch to represent how I approach the problem at hand to manage and ship products.
The Results
The platform was successfully launched and the company now has paying customers with a recurring renewal model.