Real-world project

Redesigning the video streaming experience on TV

1. THE CHALLENGE

People are spending more and more hours on streaming services. myVideo’s team noticed a rising percentage of streams on TVs. However, despite business and marketing teams' hard work, TV app’s user acquisition and retention rates weren’t growing. Therefore, myVideo invited us to redesign their TV app.

Project Objectives

Build stickiness to retain users and improve brand loyalty by enhancing user experience.

The Team

My Responsibilities

  • Plan, design and conduct research

  • Turn research into product insights and design decisions

  • Communicate research results to stakeholders

  • Execute IA definition, wireframing and prototyping with designers

Project manager, UX designer, UI designer, UX researcher (me)

2. RESEARCH PROCESS

Phase 1: Concept Generation

To conduct user research quickly and effectively, I planned to test exploratory design concepts with users during interview sessions to gain early feedback. First of all, we conducted expert review to generate hypotheses on user pain points. Based on our understanding of the product, we brainstormed design concepts through wireframes and built rapid prototypes. On the other hand, we conducted competitive analysis to gain a broader understanding in the market landscape.

Expert Review

We generated assumptions of user pain points and needs on existing design. For example, the way videos were presented in the browsing view hardly sparks users’ interests. 

Competitive Analysis

We examined user flow, IA and UI of the products of global competitors (e.g. Netflix, iTunes, iQIYI) and local competitors (e.g. KKTV, CATCHPLAY, friDay).

Phase 2: User Interviews

We interviewed 10 users (from age 23 to 56) to understand their streaming behaviors. I mixed a number of research activities into the studies, including card sorts, paper and hi-fi prototypes. Each study lasted for 1.5 to 2 hours.

Screener surveys

I designed two screener surveys to recruit existing and potential users. Sent via myVideo app notifications and text messages, and posted on video streaming forums and communities.

Interviews

I asked users to capture pictures of their streaming environment and objects they interact with before interviews. Equipped with open-ended questions, I learned about their streaming contexts, behaviors, pain points and needs.

Card sorts

To understand what information matters to users when browsing videos, I designed “video information” cards (e.g. the duration, rating, price, trailer). Also “feature” cards to help us organize and prioritize features.

Paper prototypes

We printed out A3 color copies of each screen to gain user feedbacks on our initial design concepts. The red blocks are used to indicate where user is focusing on the screen.

Hi-fi prototypes

After the first round of user research, we refined user flows and wireframes, and built a TV prototype with Marvel to test interaction and visual design details.

3. RESEARCH FINDINGS & ACTIONS

I communicated research results to myVideo's teams through presentations and reports. At the same time, we redesigned the entire TV app experience based on research through several iterations of wireframes, user flows and prototypes. Here are some examples:

Opportunity 1 : How might we help users find content they love?

Research finding

Key information users need when browsing

Trailers and categories help users get a better sense of what the video is about. Duration and price determine whether they should watch it now or not. However, in the original design, none of these information were shown on the browsing view. Users had to click into each video to see more details. This made discovering content a time consuming experience.

Duration is really important because I don't have that much time. I have to either choose a shorter movie, or wait until my children fall asleep. 

Only poster and title were shown in the original design.

Design solution

Immersive browsing experience

The most important information are shown upfront, including price, duration and category. When user hovers on a video over a few seconds, the trailer starts playing automatically. 

Opportunity 2 : How might we create a seamless experience from content discovery to consumption?

Research finding

Discover on mobile devices. Watch on TV

Users discover and save content to watch later on TV under
contexts like taking the bus to work in the morning, or using phones or pads before bed. However, in the original design, users couldn't find the content that they saved because of poorly designed information architecture and naming. 
This was a key barrier for users to stay active on the platform.

It's too hard. I just keep forgetting. One day I saved a movie on my phone. But when my friends came to my house, I just couldn't find it anymore. It's not even my favorite item, it's just a movie that I want to watch later. 

In the original design, it took users 7 clicks from the homepage to the section. The saved content was named "My favorite items" under "Membership". 

Design solution

Seamless and personalized streaming experience

We rephrased "My favorite items" and "Viewing history" into "Saved for later" and "Continue watching". Also, we redesigned the information architecture to highlight these two sections on top of the browsing view. It's just one click for users to start watching without thinking.

4. WHAT'S NEXT

This was just one of the projects that we worked with myVideo. After seeing the exact value of product experience enhancement in their business growth, we worked on another project together to redesign their website experiences.