blacktangle.png

The new subscriber flow for African Nollywood streaming service IROKOTV was an MVP in need of simplification and a UX cleanup.

 
 
 

Introduction

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.

 
old_checkout.png
old_voucher.png
old_bank1.png
 
 
 

My Process

We followed a 4-step process to ensure we understood user pains, and could validate our solutions worked at scale.

 
You can read more about my process  here .

You can read more about my process here.

 
 
 

Empathize

Analysis of 500+ LiveChat transcripts, 1,000+ cancellation survey responses, 14 phone interviews, and FullStory observation revealed key insights.

 
 
define2.png
 

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.

 
 
define1.png
 

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.

 
 
define3.png
 

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.

 
 
define1.png
 

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. 

 
 
define4.png
 

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.

 
 
 
 

Define

After taking a step back to analyze our findings, we set out to solve the following problems with the redesign.

 
icon_heatmap.png
icon_price.png

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.

 
 
 
 

Design

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.

 
nav1.png
 
nav2.png
 
nav3.png
 

The signup UI required limited modification, we simply fit the components into the new structures for testing.

 
signup.png
 

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.

 
plans.png
 

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.

 
checkout.png
 

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.

 
bank.png
 

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.

 
voucher.png
 

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.

 
subscribes_email.png
 
mobile_signup.png
mobile_plans.png
mobile_checkout.png
mobile_bank.png
mobile_voucher.png
 
 
 
 

Measure

We A/B tested the new variants for 4 weeks, monitoring conversion rates, user feedback, and usage via FullStory.

 
 

5% increase

in our subscription conversion rate over the old UI.


60% reduction

in the volume of customers cancelling their subscriptions over frustration with auto-renewal.


40% fewer

“rage clicks” generated throughout the subscribe UI as reported by FullStory.