Streaming content discovery on the web

LikewiseTV was a project aimed at improving our streaming discovery process for the responsive web.

Problem

Users were discovering TV and Movie content on our mobile app, but would then leave our ecosystem to launch that content. This included a large, underserved cohort of ‘laptop streamers’.

Outcome

We rapidly built a streaming-dedicated version of our web experience, built to focus on discovery and consumption. As a result we saw:

  • 50% increase in active users over previous quarter.

  • 66% increase in registrations over previous quarter.

My Role

I served as a Designer on this project, collaborating with a small team in an agile format.

  • Another Designer, Israel Lemus

  • 2-3 Engineers

  • Project manager

Exploration

Problem definition and goals

Usage data and interviews with active customers had revealed a few important pain points:

  1. Users were discovering content on our existing mobile app, but not consuming it there.

  2. Laptops were a common place for users to stream content at home, but few people were using Likewise on these devices.

  3. The broad nature of our primary mobile app diluted the common use case of ‘I want to watch something now’.

Our primary goals were:

  1. Create a streaming-focused web app to help complete the loop from discovering to launching content.

  2. Cater to underserved cohorts like laptop and desktop streamers.

  3. Focus on the high-impact use cases of discovering and consuming streaming content, targeting acquisition and retention as KPIs.

Core user flows

In collaboration with BizDev and Marketing, we focused down onto two core user cases to target with our designs:

  • New registrations, unfamiliar with Likewise but heavily invested in streaming. “Riya”

  • Influencers, who can draw in their audiences and create compelling content. “Hanna”

We built out primary flows based on these cases with a focus on low friction conversion and high value on first run:

  • Minimize signup steps, especially compared to our existing products, to improve conversions.

  • Make sure the user is shown relevant and visually engaging recommendations immediately, and encourage them to take action on those recommendations. A user with an enriched account is more likely to return.

UI research

The requirement to make the app closely resemble a smart TV streaming app allowed us to narrowly focus our competitor research. We surveyed a wide range of streaming apps for smart TVs and the web, including our own smart TV app, and defined a few core principles to drive the final designs.

  • Utilitize our large library of backdrops and cover art to create a colorful and visually exciting experience.

  • Prominent placement of streaming launch options, to ensure users complete the ‘watch’ action through our app.

  • Leverage our existing Likewise features to empower content discovery: filtered searching, user scores and reviews, user generated lists, etc.

Example screen from our CTV app.

Common CTV app patterns we drew upon.

Schemas and inventory

Dev was starting work in earnest simultaneously with design kickoff, so design worked quickly with our project lead provide a rough design framework and inventory:

  • Core feature and view schemas.

  • Fast-tracked best guess wireframes in advance of more final work.

  • Detailed component inventory.

These efforts allowed dev to start building foundations while final designs were settled, and set expectations for what was likely to change during the process.

Onboarding

Compared to our mainline app, the narrow focus of the .TV project allowed us to simplify the onboarding process:

  • Remove setup steps involving Books and Podcasts. This got the user through faster and reduced dropoff.

  • Focus entirely on the streaming value proposition when priming the user. Clarify of the value prop also improved conversion.

  • Simplify app orientation tutorials during the FTUE thanks to a narrower offering.

Overall these changes helped improve signup completion rates versus our mainline app.

Mobile onboarding flow example

Iteration

Navigation

Navigation took a bit of iteration as we negotiated design recommendations against requirements from leadership:

  1. Initial recommendation was a more common web topbar common on most streaming sites. Leadership feedback that we closely imitate CTV sidebar navigation.

  2. Our compromise candidate followed web dashboard patterns, but again leadership was adamant that we directly imitate our CTV interface on the web.

  3. Our eventual V1 navigation is seen

The navbar evolves from a more traditional top bar, to a dashboard sidebar…

…to the final approved v1 iteration, icon focused and minimal as on CTVs.

Other elements came together more smoothly, with search flows, details views for indidual items, menus, etc. coming together rapidly.

Hover states

Hover states had to accomplish a few tasks:

  • Display metadata most relevant to decision making, like title and synopsis.

  • Include ‘social proof’ data like total recommendations, recommendations from friends.

  • Prominently display core actions: save, recommend, etc.

  • Provide access to trailers.

Final versions of this component are visible in the Final Designs below.

Sub screens, on mobile.

Iteration 1

Iteration 2, overlay separate from artwork

v3, content loaded on expanded cover artwork.

Final Designs

Final designs were approved for handoff to dev, and rapid iteration continued over the ensuing months. Here are some examples of the post-launch look of the site (may not reflect current live site)

Results

+50%

+66%

Active users

Registrations

Total views outperforming main site by 5-6x within a few months

After launching the product in the beginning of Q2, we saw an increase of 50% in active users and increased registrations 66% to the Likewise overall from the previous quarter.

More projects

Whitepages

Likewise