The new subscriber flow for African Nollywood streaming service IROKOTV was an MVP in need of simplification and a UX cleanup.
Not long after joining the company,
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 set out to uncover where the existing interface wasn’t working for our users, design solutions to solve these issues, and incorporate the new tiered plans.
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.
Users were confused about the price they were charged at checkout.
~40% of LiveChat chats pertained to subscription and/or payment, with closer analysis revealing users expected to pay the more prominently featured monthly price at checkout.
Users weren’t aware they were signing up for automatic subscription renewal.
~12% of cancellation survey respondents (the largest cohort) reported frustration with auto-renewal as the reason they cancelled.
Users were getting lost in the checkout flow.
FullStory observation showed users attempting to interact with un-clickable elements, and demonstrating confusion around required steps to complete checkout.
Users were confused over voucher payments.
We observed users click the voucher payment option, get pulled out of the payment flow, have no clear path back to the checkout step, and abandon.
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.