Organize my Movies and TV with “Lists”

PRINCIPAL Product Designer - VUDU Movies & TV | Native mobile, Web, Living Room

I was the Lead on the most requested feature by Vudu customers - “Lists”. With the goal to empower users to allow them to organize and reorder their Movie and TV collection any way they choose. Giving users more control over their content and viewing experience.

Across all Vudu app platforms including TV app, the feature successfully launched on time with over 740,000 lists being created in the first month.

list-familyTV.png

Promo Reel

Overview

Target Customers

Vudu is a streaming transactional video (TVOD) service with over 1,000,000 visits per platform per month. Vudu users (who have more than 100 titles within their library and constitute towards a large portion of the revenue) have no easy way to find and organize their content within My Vudu. There have been numerous requests on social forums to have the ability to organize personal content.

Customer Problem

I am a Vudu Customer who has more than 100 titles in my library, I am trying to find a movie within my library content but its not easy to find it quickly because I need to scroll thru a lot of titles before I find it which makes me frustrated. I am a Vudu Customer with varied titles in my library, I am trying to create playlists and have custom groups of titles but there is no way to organize the content in my library because Vudu groups everything under few broad categories.

Goals Primary

  • Grow engagement - Increase in the amount of time spent on viewing TVOD and AVOD content.

  • Retention of high value Vudu users who may be frustrated with how to manage large content. 

Goals Secondary

  • Grow revenue -  Increase in the number of purchased TVOD titles. By allowing users to create List, we foresee more buying to complete their Lists.

  • Other high quantity collectors from other services introduced/moving to Vudu.

My Role

  • I led the product design experience of the list feature, driving foundational design at a system level.

  • Responsible for prototyping core concepts to be used as north star for all other platforms.

  • Piloted the first time testing of TV app experiences using Adobe XD.

  • Adaptable project plan scoping with engineering.

  • Lead and assist across 4 device platforms for storyboards, mockups and prototyping, user testing asset creation and final UI deliverables.

Team

  • 3 to 4 Product Designers and 1 to 2 Researchers. Partnering with 1 Product Manager and 2 to 3 engineers per platform.

  • Project duration 4 months.

Patent Pending: Drafts for Design Patent Application for the Lists Card.

 

Native Apps and Web

Examples of the list creation and manage/edit UI.

web3.png

TV App

Example UI of viewing, adding and moving a title to a list in the TV app.

list LUA1.png

Tablet iOS

Example UI of the list view and delete titles screens.

tablet copy.png
 

Problem Definition

Vudu users struggle to find owned titles and titles they want to favorite, and need organization tools. We will differentiate from competitors by allowing them to organize, name and reorder their Movie and TV collection any way they choose. Giving users more control over their content and viewing experience.

Survey Research

  • Survey Goals: Understand why and how Vudu users want to organize titles. Is there a preference for owned or unowned?

  • Method: Online survey via SurveyMonkey. NPS scores, forums and social.

  • Participants:

    • Vudu users with 100+ EST titles.

    • Survey sent to ~11K participants.

    • Received 661 responses in ~2 days.

UX Research to understand desired behavior

  • Many users have a specific title in mind when about to watch.

  • Users want to easily find titles in their library: recently purchased, favorites, unwatched titles.

  • Reduce clutter appear more organized.

  • Allow ability to select titles that will go into a collection and to custom organize them.

  • Top ways users want to organize library: by genre, series.

Mapping & Concepting

  • Collaborate on writing and refining requirements/use cases, managing priority and backlog items.

  • Competitive analysis for lists and playlists.

  • Create user flow sketches and wireframe core screen UI. Main component and IA explorations, navigation and label explorations.

  • Use feedback cycle critique sessions with UX, engineering and senior leadership to hypothesize and prove out concepts and UI models.

  • Flag any potential changes to existing platforms and look for areas of alignment with other other products in roadmap.

  • Conducted hallway ad hoc paper prototyping sessions with team and non-team members.

Protoyping

User Stories

  • Started with high level hypothesis of two main user tasks and mapped them to screen flows using low fidelity thumbnails to promote discussion and paper prototyping which in turn was an input to the user testing moderation guide.

  • During this exploration I uncovered some technical constraints to resolve in which we had to pivot the MVP plan to a phased approach. These findings were mostly regarding first time empty states, owned versus unowned title adding, search results and associated messaging at these experience points.


Design Principles

  • Existing styleguides for all platforms. Design parity across platforms. Use onboard native UI when possible.

  • Solve fundamental UI in mWeb and desktop with fast follow of native mobile and finally TV app.

  • Design MVP as single add to list but build a scalable UI to allow for multiple add to lists feature in next push.

  • Known diminished user control on TV app, with less shortcut options than other platforms.

 

Design Challenges

Challenge #1 - Bulk Add (Web)

User needs an efficient way to add titles to a list in bulk, not simply one at a time.


lists_exp1.png

Option A: Movie poster scroller: A title selection auto-appears in scrolling carousel.

Pros: Visually attractive, persistent on screen, and clearly shows the poster feedback.

Cons: The vertical hide/show and horizontal scrollbar is awkward and the tray takes up a lot of real estate.

lists_exp2.png

Option B: Left-hand List sidebar: Select title from grid, title appears in sidebar.

Pros: Simple, clean and persistent on screen

Cons: Text may truncate and does not telegraph as well as a movie poster. The image version requires a lot of vertical scroll.

lists_exp3.png

Final Solution

Option C: Counter + text confirmation, no image feedback.

Pros: Testing proved the additional visual verification of poster/text was not necessary. Overkill.

Cons: Not all users notice the counter increase. Micro-animation could be implemented and tested to see any improvement.

User Testing

  • Prototype: Web, native, remote testing. TV app in person prototype.

  • Use Cases:

    • First time user onboarding and education.

    • Create list(s), view a list, rename list, delete list.

    • Add a show to a list.

    • (2nd phase) Reorder list, add multiple shows to list at once, autoplay list.

  • Participants:

    • Vudu users with 100+ titles.

    • 24 participants over project duration.

Findings Summary

  • Users cannot tell which they can add, owned or unowned titles.

  • It is not clear when bulk adding that I can only do that from my library.

  • TV search keyboard issues.

 

Example Screens


Early design explorations and competitive analysis

lists_stats.png
 
all.png
list mobile 2.png

We found in later live user testing that users did not clearly understand if a title had been instantly added (dynamically) on tap/click. I conceived a timed message adjacent to the hit state that clearly indicated to a user when a movie was added or deleted to a list.

 
 
 

Week 1 additional user feedback:

  • Missing ability to sort the order of created Lists (Lists get buried when you have created multiple).

  • Missing ability to add individual TV episodes to a List.

  • The ability to play all titles within a single list.

  • 200 item limit for a single list is non optimal for power users.

  • How to visually differentiate owned versus unowned content inside a list.