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 concerned subscription and/or payment, with closer analysis revealing users expected to pay the more prominently featured monthly price.
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 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.
Users were getting lost in the checkout flow.
Observation showed users attempting to interact with un-clickable elements, and demonstrating confusion around required steps to complete checkout.
Users expected to be notified of a subscription renewal before it occurred.
Many users discovered the renewal charge in their bank statement, and perceived it as fraudulent.
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 and Plans
Clarify the presentation of pricing and subscription information in the UI to clarify subscription purchase price and automatic renewal.
3. Voucher Payments
Clean up the voucher payment option and better contextualize it within the overall subscription flow.
4. Subscription Messaging
Revamp our approach to subscription-related messaging to clear up confusion on renewals.
We sketched out rough ideas on paper before moving to Figma for final mockups and prototyping.
To solve for navigation and orientation, we designed three variants inspired by commonly used checkout conventions. All subsequent mocks are displayed in the tabbed variant.
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.
To incorporate tiered plans, we designed selectors that clearly messaged auto-renewal and displayed the correct pricing per-term.
We moved the voucher prompt to the select plan step, and made it less prominent in the UI, as vouchers weren’t distributed to the majority of users.
We redesigned the Checkout UI to clearly delineate Plan Details vs Payment Details, and more clearly message automatic subscription renewal.
Payment Details vary by user region. Outside Nigeria, where credit card is the only payment option, customers see an AVS input, and/or a billing email address if they signed up with their mobile number.
In Nigeria, where customers have the option to pay via credit card or bank transfer, we re-designed a clearer, more compact payment method selector optimized for African users, primarily using mobile devices.
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.
Outside the UI, we re-designed the billing notification email to further aid with confusion surrounding automatic renewals.
The Design team proposed a solution to notify the user prior to the subscription renewal occurring, but the business side felt this could motivate some customers to cancel prior to renewal, so it got scrapped from the final cut.
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.