Revamping birth control subscription page
I redesigned Kin’s Pill subscription page for a CRO experiment. Kin was established in 2020, offering fertility care to women, with over 50,000 subscribers to their contraceptive pill subscription service.
The Challenge
This webpage has been running for few years now and hasn’t been updated in a while. Kin’s pill subscription page is the brand's top revenue generator and I find this one very challenging. The biggest question I keep asking myself is “How are we going to increase the conversion rate of this page? How would this work?”
As my very first CRO experiment project, I didn’t know what to do in the beginning. Should I just copy the layout of a local competitor? Make it just aesthetic? No no no.
With the guidance of my colleagues and team, I began by conducting a thorough analysis of the existing webpage, identifying potential pain points and areas for improvement. This involved studying user engagement metrics, such as scroll depth, most clicked areas and engagement time on page.
The Goal
Our primary goal is to increase conversion rates (consult paid), which translates to increasing membership numbers for the brand.
Hypothesis
Combining multiple section information into a single section will decrease scroll time, thereby streamlining the user experience and driving increased revenue.
Highlighting subscription benefits in the hero section will increase conversion rates.
Introducing annual membership pricing in the hero section will incentivize users to commit to long-term subscriptions.
User research
Key insights from user research based on heatmap:
Most of the users clicks the navigation bar to login indicating that they are often returning users.
The "Pill brands list" button in the hero section is frequently clicked by users.
The users also want to see the inclusions of Kin’s pill subscription as well as the FAQs
Competitor analysis
Key insights/takeaways from competitor analysis:
Highlighting the key ingredients and dosage of each pill brand that they offer
The initial three sections of their landing page provide clear details on accessing the pill, what's included, and more.
Comparison table showing the differences between in-person consultations and online pill subscriptions
Designs
For the design, I created several low-fidelity wireframes and worked through different concepts. I considered feedback from the team and designers from other team, and made adjustments based on what we learned from user research.
I went hard on the lo-fi stage to make sure that everything else will be seamless on the hi-fi stage! I went through three rounds of design feedback with product and digital designers from across the company.
Emphasis on the comparison table section
The previous design didn’t have comparison table between clinic visits and Kin. It highlights key advantages, such as cost savings and convenience, making it a powerful tool for increasing conversions
We included and highlighted "50,000 Australian Women" in the design. This phrase performed well in one of our Meta ads and adds credibility to the brand, so the team decided to use the exact wording.
Results
Initially, the old layout outperformed the new design because one of the new buttons had a broken link. However, after fixing the issue and giving it another chance, the new design led to a 20% higher conversion rate than the original!
Learnings
One important lesson I learned is that sometimes a design needs time to show its full potential. As our head of creative said, “It needs to fail first before it can perform well.”
The hero section of each landing page is the most important part, so it’s essential to include key information there.
Continuous testing, refining, and revisiting designs, even after initial setbacks, can unlock greater performance gains and lead to a more effective final product.