The Problem

The onboarding experience for DramaFever, a niche content-streaming service, had not been significantly updated in some time, and an audit of the product revealed a number of user & business pain points:

1. Unnecessarily bloated & clunky flows for users who are at the registration step, but are trying to view content immediately.

2. Inconsistent UI, branding visuals, and language, across all of the different platforms that the service was available on.

3. A lack of incentive for users to register, or upgrade to a paid subscription plan.

4. A lack of incentive for users to verify their emails after registering.

These discoveries were borne out by the numbers: proportionally low levels of new user sign-ups, new user email verifications, and existing user subscription upgrades, despite high overall daily streaming rates and a constant flow of new content.

The Research

With the goals of improving the UX and raising design-driven KPIs to fall in line with business expectations, I, as part of a team of three designers and a product manager, performed a competitive analysis over a range of digital products within the content-streaming space, and beyond, to identify best practices that could be applied to DramaFever, as well as shine a light on problematic UX that could be minimized or avoided.

We began by classifying the range of user types (anonymous, registered, premium), then mapped out specific user flows for each type (registering, signing in, upgrading). During this process, we also needed to take into account whether users had previously verified their emails, which would determine whether and where to nudge them to do so. Each of these combinations would need its own onboarding user flow.

Next, we needed to create a consistent design language, as well as consistent value proposition language to describe DramaFever’s various user levels and subscription plans.

After iterating on these onboarding flows as a team (informed by rounds of stakeholder feedback), we split up to each tackle a specific platform to redesign, using those general user flows as reference.

Insights into The Roku Platform

For my part, I led the UX redesign for the Roku platform, which offered a unique experience compared to other mobile, desktop, or OTT devices, like Apple TV or Amazon Fire TV.

A key discovery was that the user’s personal information on file with Roku could be accessed by any app on the device, if the user allowed it—a feature that could be leveraged to facilitate steps in certain user flows.

In addition, while Roku’s mode of interaction was cumbersome, a pain point common to all OTT devices, its remote control UI featured a unique button (the asterisk) that could potentially be used as a convenient context-sensitive shortcut in a variety of use cases.

My first step in addressing these, and other, issues, was to conduct meetings with the development team to determine what was or wasn’t possible on the platform, and whether certain design implementations would be worth developer resources, even if possible.

Those meetings confirmed that:

1. The user’s email information on file with Roku was shareable (with the user’s permission), and would not be a significant development lift to prefill the information into any email address fields, if the user desired.

2. The user’s credit card information on file was also shareable (with permission), meaning subscriptions and upgrades could be purchased with a single click, if the user desired.

3. The Roku remote control’s asterisk button could be customized to perform different actions based on context.

ReDesign Highlights

Referencing the onboarding flows arranged in collaboration with the team, I redesigned the user flows to work specifically with the Roku platform, taking advantage of its native feature set.

The registration step was streamlined to a single click by borrowing the existing email address from the user’s Roku profile.

Subscription payments were facilitated by accessing the user’s existing payment information through Roku’s native UI, which would take over during the checkout flow.

To remove barriers to entry, DramaFever had been allowing users to view an enormous library of ad-supported content without paying for a premium subscription, or even signing into their accounts, assuming they had one at all.

To nudge users, and remind them of ad-free streaming, my redesigned UI would show a clear value proposition to becoming a premium member in the call to action.

The Roku remote control’s asterisk button was assigned to control several context-dependent actions in my redesign, most notably allowing it to toggle highlighted content in and out of the user’s watchlist.

Watchlist functionality was one of the incentives leveraged to sway users to register and verify their emails.

The Results

Just weeks after my final designs were handed off to development, DramaFever would cease operations.

Although some of the visual updates would be successfully implemented, the core UX improvements would not be developed enough to be pushed live.

As a result, the team was never able to gauge a true audience response to the changes, but we would close the book on the project knowing both our collective and individual design work was based on solid research and methodology.