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 credit card form.

Old credit card form.

Old voucher form.

Old voucher form.

Old bank payment form.

Old bank payment form.

 
 
 

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.

 
 
icon_price.png
 

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.

 
 
 
icon_survey.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.  

 
 
 
iconv2_heatmap.png
 

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. 

 
 
 
icon_voucher.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.

 
 
 
 

Define

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

 
 
define1.png

1. Navigation & Steps

Redesign the subscription flow, incorporating a select plan step, and adding consistent messaging and navigation.

define1.png

2. Pricing & Plans

Better communicate checkout pricing and incorporate the new tiered plan structure into the UI .

 
 
 
define3.png

3. Auto Renewal

Clarify auto-renewal language in the UI, to more clearly message the user was signing up for a recurring subscription.

define3.png

4. Voucher Payments

Clean up the voucher payment option and better contextualize it within the overall subscription flow.

 
 
 
 

Design

We sketched out rough ideas on paper before moving to Figma for final mockups and prototyping.

 
DSC_0022.jpg
 
 

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.

 
 
nav1.png
nav2.png
nav3.png
 
 

Sign Up

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

 
 
signup.png
mobile_signup.png
 
 

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.

 
 
plans.png
mobile_plans.png
 
 

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.

 
 
mobile_voucher.png
 
 

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.

 
 
checkout.png
mobile_checkout.png
 
 

Nigerian Payments

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.

 
 
bank.png
mobile_bank.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.