Overview
My Role
Team
Takeaway
Research
Recyclops provides sustainable lifestyle solutions to all, regardless of where people live. It is a waste management company that offers recycling pickup services to residential and commercial customers. Till now, all the operations were done either by mail or over the phone. This was slowing down the team and leading to unnecessary human errors. Recyclops needed a digital platform for customer interaction.
This case study examines the process of designing a subscription plan and billing system for the Recyclops customer portal. The goal was to create an efficient and user-friendly system that would streamline the subscription process and billing operations, enhancing the overall customer experience.
Lead Designer
Design Research & Synthesis
Needfinding
Ideation
Wireframing
Prototyping
Usability Testing
1 Manager
1 Product Manager
3 Full-stack Developer
By designing a subscription plan and billing system for the Recyclops customer portal, the company successfully improved the customer experience, streamlined operations, and optimized revenue generation. The integration of user-friendly subscription management, transparent pricing, and efficient billing processes resulted in increased customer satisfaction and a more effective waste management service overall.
Recyclops continues to evolve its system based on customer feedback and market trends to ensure the ongoing success of its subscription and billing operations.
Interviews
As these were new user flows to be added to the website, I had to first understand how the operations team was providing the information to customer over the phone and email. For this, I conducted interviews with operations team members. This allowed me to find major issues with a few important areas.
I broke this down into 3 parts : Check availaility, Select Subscription Plan and manage Billings.
I compiled a customer journey using information I gathered from understaning the current user flow and research I compiled from other products that have same feature.
Stripe Integration
I also needed to understand Stripes payment layout to build out a proper flow that seemed like it didn't look out of place. I decided to go with a full page design for the billing which would flow nicely into the payment area This is a set design and pretty standard.
Although they have the option to use the subscription plan layout, I didn't think it went with our style. It also lacked a back button and the option to toggle between monthly vs. annual plan prices.
Solution
Based on my research, I wrote down key elements I believe would improve our Billings page. From here I could decide what actions and features were crucial and beneficial and designed a sitemap based on these conclusions.
I wanted to ensure a seamless experience, especially with the Stripe integration that's provided. This particular area needed to seem like it's one product rather than simply throwing in Stripe on our website which is why I matched the "full page" design the integration uses.
Final Design
In my sitemap and user flow I broke this up into 3 flows This is where everything is housed as it makes sense to keep updating subscription plans, manage payments, and billing here.
Check availability
This feature was added to let customer check if Recyclops provide services in their area. This helped in reducing the call volume to operations workload by 63% as customers were able to check online about the services rather than calling.
If the services are available in customer's area, they will be directed to the subscription page. If not, they will be asked to provide their information so that we can contact them when the services are launched in their area.
Subscription plan
After clicking "Check availabilty", users would be brought to the page below.
I mainly worked on the cards and ensuring users can change the address to check the availability of different location, compare plans, and show which plan they're currently on with a disabled button.
I added an illustration to bring in the friendly environment, but wanted to make use of it by having a point to the cards. The illustration is functional as it helps direct users focus to the cards and also represents company's identity.
Billing
Once a user selects their subscription plan and add-on, they are directed to the billing page. As mentioned before, I needed to ensure the Stripe page following this worked seamless with the designs, which is why I decided to create a full page design.
This also helps the user solely engage and compare the subscription plans in front of them without any other distractions
Next Steps
The company aimed to develop a system that would enable customers to easily update subscription plans, manage their accounts, and receive accurate and timely billing information.