UX Case Study: Implementing a self-service SaaS model (Part 2)
Billing and account management can be done through the self-service portal, where customers can choose their own payment methods and gateways.
In the first phase of implementing the self-service SaaS model, two major points need to be addressed:
1. The information about the different pricing plans available for the product and how they differ is crucial to converting visitors into customers.
2. Frictionless form registration.
There are two types of plans, Essential and Enterprise. Essential is designed for startups, small businesses, and medium businesses, whereas Enterprise is designed for large businesses. The free trial plan comes with 30 credits each and is valid for 14 days after the registration is validated.
Following the establishment of those two major points, our team continued to integrate payment options. Midtrans and Stripe are two payment gateways provided by Astronaut. Users whose billing country is Indonesia will be redirected to Midtrans’ payment gateway to complete their payment. Due to the fact that Midtrans supports a variety of merchant payment methods and since IDR is the currency, our team uses a tool to facilitate the conversion from USD to IDR. Tax regulations in Indonesia are calculated based on the conversion, and users are required to provide their tax ID numbers.
Listed below are the payment methods that the team has implemented.
Stripe: Credit card (Visa, Master Card, American Express, Diners, JCB, China Union Pay, Cartes Bancaires, Discover, Interac).
Midtrans: Credit Card (Visa, Master Card, JCB, Amex), ATM/Bank transfer (BCA, Mandiri, BNI, Permata, ATM Network, BRI), Klik BCA, BCA KlikPay, OCTO Clicks, and e-Pay BRI.
Payment integration is available on the public homepage, recruiter dashboard, and support dashboard.
Subscription flows
It was first necessary for me to read the documentation created by the Product Manager and discuss the flowchart she designed for the subscription flow until the checkout.
In that conversation, she explained how both Essential and Enterprise plans would be upgraded. I appreciate the Product Manager’s flowcharts, as they have been very helpful for me in determining what is needed in the design. Following the gathering of all the information I need for the design, I then set up a call with my coworker who is a UI/UX designer to go over the whole flow and assign our tasks. I was in charge of the Essential plan and its top-up credits, while he was in charge of the Enterprise plan.
High-fidelity mockups
To ensure my coworker follows the expected design for the Enterprise plan, I led the design of the Essential plan.
Free trial expiry reminder
The following banner will appear when the free trial expires; (a) 1 week reminder, (b) 3 days reminder, (c) 1 day reminder.
Subscription plans
Users will be taken to the following subscription plans once they click on the ‘See Subscription Plans’ button. Users can select the Essential Yearly or Essential Monthly plan depending on their needs. This design allows them to scan information thoroughly.
Free trial expiration reminder after 14 days (Essential plan)
The following is the design of the free trial expiration reminder. Users receive a reminder after 14 days of trial where they cannot access the Astronaut dashboard, candidates, jobs, and question data. Users can choose between two action buttons: Talk With Us First and Continue, Subscribe Now.
Talk With Us First : It will redirect users to the schedule page. This page is intended by the Growth team to better understand the needs of users.
Continue, Subscribe Now : It will redirect users to the checkout page.
The schedule page
The following is the design of the schedule page. It is the Growth team’s priority to emphasize that last field where users can write down their concerns and hopes so Astronaut can work with them in order to accomplish their goals.
Credits reminder
We also display a reminder when the remaining credit left on the free trial reaches 10.
Users who have 0 credit left are shown the following modal and have the option of talking to the Growth team or subscribing.
Subscribe to Essential Yearly (Indonesia is set as the billing country)
The following is the design of Essential Yearly Subscription form. The left side banner contains a testimonial from a trusted customer, which adds value to the subscription. In addition, I added the number of teams using Astronaut and the ISO 27001 certification as credibility points.
On the right side, the information is structured as follows:
1. The switch toggles between monthly and yearly.
2. The price should be clearly stated as well as what features are included.
3. Drop-down menu for billing country.
4. If users opt for the Essential Yearly, they receive 360 credits by default — they can add more credits if they wish to do so.
5. An overview of the purchase.
6. A mandatory field for the NPWP (tax ID numbers).
Subscribe to Essential Yearly (Indonesia is not set as the billing country)
Tax ID numbers and VAT-Indonesia (10%) are not available in the billing set for countries other than Indonesia.
The checkout flows
The Product Manager created the flowchart below to depict the checkout flows.
Upon clicking the checkout button, users will see details of their purchase along with the necessary payment information. Since Indonesia is not the billing country, users are directed to Stripe payment gateway.
If the billing country is set as Indonesia, users are directed to Midtrans payment gateway.
Since Midtrans has their own user interface for displaying the order summary, we do not have to reinvent the wheel, as we can only change the logo and brand colour.
After clicking the payment button, Stripe users receive a success message and can view their subscription by clicking ‘View Credit Balance’.
Once a payment is successful, both Stripe and Midtrans redirect users to the organization details.
The banner shows the remaining credits and we also have a ‘Top up credits’ button if users wish to add more.
The entire flow and design
This is the entire process from the reminder about the free trial until the final checkout step. During the design process, there were a couple of obstacles which really sapped my energy, but I overcame them successfully. After closing this project, I was pleased with the final outcome and the teamwork.
Takeaways
A positive impact has been achieved through the creation of the self-service portal. We learned from the CEO and team that our customers have begun using self-service for subscription renewals. Through the implementation, Astronaut has been able to accelerate their business and concentrate on target market audiences more effectively.
Moreover, I conducted a Google Analytics analysis which found that 82% of visitors come and go to the pricing page with a short duration of time spent there (~5 seconds). Accordingly, I assumed the pricing page did not provide the information visitors were looking for. In comparison to our previous pricing page, the new pricing page has a much lower bounce rate since we changed the flow and design.
I enjoyed the intense communication with our product team and engineering team during this project. Members of the team who participated in this project provided useful and effective feedback through the commenting feature in Figma.
I also mentioned a couple of obstacles which really sapped my energy, such as:
- Due to the fact that design and implementation must be completed within a month, the timeline of completing this project does not make sense. The engineering team and I worked parallel; once a few designs were completed, the engineering team began implementing them.
- Since the CEO initiated a few changes in flow and design, the process took longer than expected, whereas he insisted that the implementation take place in a month.
- The engineers needed to change the implementation since the flow and design were changed.
- Intense discussions with the CEO (Head of Product) about how to improve the current workflow, which creates chaos for the design and engineering teams. We agreed that requirements and feedback had been locked after a couple of product meetings, but suddenly the flow and design changed in the middle of creating high-fidelity mockups and implementing them.
However, this project taught me valuable lessons about teamwork, communication, the art of design compromise, and human behaviour. In the end, nothing is perfect, and there is always room for improvement 🌱
Thank you for reading! 😊
