IROKOTV’s Growth Team introduced an initiative to add tiered subscription plans to the service, a convention the existing Subscribe UI was not designed to support. Additionally, user feedback provided by the Customer Support team suggested potential friction around a few key areas of the subscribe experience, namely pricing and renewals.
We followed a 4-step process to ensure we understood user pains, and could validate our solutions worked at scale.
Analysis of 500+ LiveChat transcripts, 1,000+ cancellation survey responses, 14 phone interviews, and FullStory observation revealed key insights.
After taking a step back to analyze our findings, we set out to solve the following problems with the redesign.
1. NAVIGATION & STEPS
Redesign the subscription flow, incorporating a select plan step, and adding consistent messaging and navigation.
2. PRICING & PLANS
Better communicate checkout pricing and incorporate the new tiered plan structure into the UI .
3. Auto Renewal
Clarify auto-renewal language in the UI, to more clearly message the user was signing up for a recurring subscription.
4. Voucher Payments
Clean up the voucher payment option and better contextualize it within the overall subscription flow.
We sketched out rough ideas on paper before moving to Figma for final mockups and prototyping.
Navigation & Steps
We designed three variants inspired by commonly used checkout conventions. Our goals were to clearly display the steps to complete checkout, while providing brief guiding text for the user at each step.
The signup UI required limited modification, we simply fit the components into the new structures for testing.
Plans & Vouchers (part 1)
We designed selectors that clearly messaged auto-renewal and displayed the correct pricing per-term. We moved the voucher prompt forward, and made it less prominent in the UI, as vouchers weren’t distributed to the majority of users.
Vouchers (part 2)
Users who clicked the redeem voucher option are taken to a unique voucher Checkout state. For those customers simply exploring the option, there was clear navigation back to Select Plan.
Plan and Payment Details
We redesigned the Checkout UI to clearly delineate Plan Details vs Payment Details, with Plan Details more clearly messaging pricing and auto-renewal.
Nigerian customers can pay via credit card or bank transfer, we re-designed a clearer, more compact payment method selector optimized for African users, primarily on mobile devices.
We A/B tested the new variants for 4 weeks, monitoring conversion rates, user feedback, and usage via FullStory.
in our subscription conversion rate over the old UI.
in the volume of customers cancelling their subscriptions over frustration with auto-renewal.
“rage clicks” generated throughout the subscribe UI as reported by FullStory.