birds.png

The primary content discovery interface for African Nollywood streaming service IROKOTV was in need of a UX overhaul.

 
 
 

Introduction

 

After joining IROKOTV as the website Product Manager,

 

an early priority was to learn where the product wasn’t serving user’s needs. We launched a survey asking customers about their biggest frustrations, which received over 4,000 responses.

~30% of respondents mentioned difficulty finding new movies and series to watch. Events data suggested that the majority of customers began the discovery process on the website’s Dashboard.

 

We set out to understand how the tool was being used, and turn it into a more efficient discovery mechanism.

 
IROKOTV’s old Dashboard.

IROKOTV’s old Dashboard.

 
 
 

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

Data from customer surveys, phone interviews, and user observation via FullStory revealed inefficiencies with the structure and data of the existing dashboard.

 
 
icon_rating.png
 

Critical evaluation data was missing.

Cover art, community rating, and plot synopsis were reported as the top 3 factors when evaluating content. The latter two were missing from the dashboard, meaning users had to constantly click back and forth between pages while searching for something to watch.

 
 
 
icon_scale.png
 

The dashboard wasn’t scaling effectively.

Cover image size wasn’t optimized for the user’s device, covers were frequently cut off at the browser’s edge, and in some cases, never fully visible depending on the carousel position.

 
 
 
icon_highlyrated.png
 

High quality older content was de-prioritized.

We learned users might be interested in watching older content if the ratings were good, also that our users were in general looking for a more tailored content experience.

 
 
 
 

Define

We used the above data to prioritize solving the most critical problems with this redesign.

 
 
define1.png

1. Scaling to Device

Optimize the cover image size and carousel placement to the user’s device.

define2.png

2. Browsing Efficiency

Eliminate friction during the browse process by displaying key evaluation criteria in the dashboard.

 
 
 
define3.png

3. Consistent Conventions

Create consistent call-to-action conventions across Movie, TV Series, TV Episode, Actor, and Collection cover images.

4. Tailored over Static Content

Validate if users will engage with highly rated older content, or content based on their favorite actors and genres.

 
 
 
 

Design

We spent a week analyzing additional data in Google Analytics, and prototyping design solutions with Figma.

 
 

Scaling to Device

Using Screen Resolution and Browser Size data, we developed a system to scale the number of covers and their size to the user’s screen size, primarily focusing on our largest cohort - laptop users (~60%). The system also ensured consistent page margins, solving the issue of partially obscured covers.

 
 
scaling.png
 
 

Browsing Efficiency

We designed an expanded state for Movie covers featuring the full synopsis, community rating, and option to auto-play. We extended the same design to episode covers, featured on TV Series parent pages.

 
 
video_movie.png
video_episode.png
 
 

Consistent Conventions

We applied the expanded state to feature relevant content and a clear call to action for TV Series, Actors and curated Collections.

 
 
bucket_series.png
bucket_actor.png
bucket_series.png
 
 
 

Measure (part 1)

We rolled updates out as an opt-in beta, allowing customers to try the new Dashboard experience with the option to switch back if they preferred. After two months of testing…

 

30,000+

users interacted with the beta experiment.


> 80%

of those users made the switch to the new Dashboard.


90% stayed

with the new Dashboard permanently.

 
 
 

Measure (part 2)

Once confident in the new designs, we migrated everyone to the new Dashboard, and A/B tested a new version with two new collections to validate if users would engage with older, but relevant content.

 
 

Highly Rated

A collection of movies with a community rating above 85%, and not displayed in our new releases “Featured” collection.

ab2.png

Recommended For You

A collection of movies and series with a community rating above 85%, categorized under genres and starring actors favorited by the user.

 
 
ab_test.png
 

10% higher

total average clicks per user were generated by the variant with the new collections.


11% of total clicks

in the new variant were generated by Highly Rated alone, the highest ever level of engagement for any collection below “Featured” and “TV Series”.


Up to 63% higher

total weekly clicks were generated by Recommended For You over a collection in the same position in the old content variant.