The design process for Vudu Movies on Us

Vudu Movies On Us landing page

Role & Tools

  • Project : Vudu Movies on Us
  • My role: Lead UX architect
  • Design kickoff: Mar 2016
  • Release date: Oct 2016
  • Methodologies: Design thinking, User flow, User statement, Wireframing, Prototyping, Animation, Project Planning
  • Tools: Sketch, Framer JS, InVision
  • Case studies on UX challenges:

The problem space

Video streaming business models

In the market of streaming videos services, there are in generally 3 types of business models

  • SVOD: Subscription model like Netflix
  • TVOD: Transaction model like Google Play — Movies & TV
  • AVOD: Ad-supported free content model

It could be single model or a combination of two. For example, Amazon has prime videos (SVOD) while none-prime users can purchase a la carte content (TVOD); Hulu used to offer both free TV shows (AVOD) and subscription-based content (now SVOD is their only focus)

Vudu’s goals and challenges

Vudu had always been in the TVOD (transactional video on demand) business, and grown rapidly with it. But we kept feeling we could grow much faster if Vudu could come up with a better and more sustainable solution on

  • User acquisition
  • User retention
  • ARPU (average revenue per user)

The reason is simple. We are a small organization looking for revenue, while Revenue = Unique Users multiplies ARPU minus Cost. The formula clearly tells us in order to grow our revenue faster, we need acquire & keep enough users and get more dollar spends from them. Vudu has always focused on ARPU thru Merchandising and Marketing, and we already have several features and projects to support this mission.

So now the question is, how do we get and keep more users ?

AVOD as a new business model

The higher management started having this idea of bringing in AVOD as an additional business model for Vudu. Given the reasons that

  1. Vudu is not a well-known brand name. We need stimulation to attract new users. AVOD is expected to be a short/mid-term solution to change this situation.
  2. Existing users left Vudu for various reasons. It’s hard to retain users with our current model and campaigns. Vudu needs to create incentives and build trust with existing users. AVOD users are expected to bring higher conversion rate
  3. On the OS platforms, Vudu disables the purchase functionality to avoid “Apple tax”. In other words users cannot rent or buy titles thru their iphones, ipads or Apple TV. We’ve been getting bad reviews on this in the App Store, and it’s really hard to educate users. AVOD is expected to play an important role as the “start point” for OS users to start interacting with Vudu on their OS devices.

The design process

This is not a linear process and never will be

I was assigned as the lead UX architect on this project. Understanding this is a large-scale product that will affect Vudu’s future business direction, I took the 5-stage design process along with my own modifications to accommodate my work style.

Stage 1: to empathize

After the kick-off meeting, I spent a week preparing myself for this new domain knowledge.

  1. Understand the business logics: I was assigned to work on this project, without anyone really fully explained why Vudu had to bring in AVOD. So I grabbed all the chances I had to corner the product manager (who is an extremely busy person) to get information and requirements piece by piece.
  2. Get to know our existing users: I wanted know what our current users say about us, their likes and don’t likes, and why they left/keep staying with us. I immersed myself in
  • Vudu’s Forum (forum.vudu.com)
  • iOS/Android app reviews
  • Chatted with Customer Support: We talked to our Support team who deal with our customers on daily basis to understand the most common issues and questions they get thru phone calls and emails
  • Omniture trackers: For a few areas that we wanted to focus on, we asked for Omniture stats and reports

3. Study our competitors: I downloaded all the apps and visited all the sites I could think of that have ads-supported videos, including YouTube, to see the role of AVOD in their business, how they designed the interface, and how they handled the edge cases etc.

Stage 2: to define

Once I had the domain knowledge, I sat down with the product manager to define our user stories/user statements, along with their importance.

A user story looks like this:

  • As a user, I want to __________ so that I can_________.
  • Importance: Must Have

These user stories are extremely important to me, as a way to scope down, to envision user behaviors on different use cases, as well as to fully understand our business requirements. We documented all the user stories on Confluence.

Stage 3: to ideate

In the ideation phase, our main goal was to translate the business requirements and user stories into UX requirements. We asked a lot of hows & whys & whats to ensure a delightful and intuitive experience for users.

We firstly listed out areas to tackle from different perspectives —

  • Main elements: the Movies on Us section in Spotlight, the promo tag in the grid view, the promo tag and the watch button in the details view, ads info and the control buttons in the player, loading experience
  • Logics to handle: purchase to watch v.s. watch free with ads, when to play/replay the ads
  • Platforms affected: Smart TV, web/mweb/tweb, iOS mobile, iOS tablet, Android mobile, Android tablet

Then I hosted endless brainstorming sessions (some were big and some were small) to define and clarify the requirements. We drew our ideas on whiteboards, on a piece of paper, and simply just talked and printed in my head. I created hundreds of wireframes to record, refine, re-iterate and finalize the UX requirements.

Stage 4: to design

When I was confident enough that I got most of the UX requirements settled, I decided to come up with a design timeline.

In my design timeline:

  1. Each week I planned to create flow charts, wireframes, and prototypes for 2–5 features
  2. In the following week, those features would get reviewed and criticized by my peers, the design manager and/or the product VP
  3. Immediately I would do iterations based on feedback I got from the crit sessions before collaborating with visual designers on the UIs
  4. Once the UX and UI were approved internally, I would showcase and explain the UX requirements in a weekly review meeting to the engineering team to get their feedback from different perspectives
  5. Finally I would document the design requirements on InVision and the Confluence page then released to engineering for development
I called this the life cycle of design

This design model helped me go thru the iterations rapidly, and kept me in good shape and speed for this large scale project. I got to work with 3 product managers (1 feature-based, 2 platform-based), 3 visual designers and 10+ developers very closely, and learn from them every single day in this journey.

Here are some examples on iOS to showcase the outcome of our hard work.

We have a dedicated section for Vudu Movies on Us on the Spotlight page. Here are two different treatments for the promo tag
Left: a grid view for Movies on Us — We introduced the promo tag system to the iOS platform; Right: an AVOD details view — Users can play directly from the details view by clicking the Watch button
Playback view while ads are playing. The progress bar is temporarily removed and the Ads Component is displayed in the bottom-right corner
After 3 secs of inactivity, the bars dismiss but the Ads Component stays
We introduced a new color palette to associate with different genres for Movies on Us titles
We also introduced a new loading animation to make the watching experience more smoothly

If you’re interested, you can also read more about the UX challenges I had during this design process.

Stage 5: to validate

In order to get quick feedback, we released the feature for internal testing to hear what “pro” Vudu users have to say. Surprisingly we got tons of great feedback on the usability. For example, one common user feedback was they didn’t know “how to watch free” on the web platform, with the fact we still display purchase options for AVOD title. The design team acted very quickly on this issue by associating the color of the Watch button to the promo tag color, which stands out from the rest of the CTAs.

On web, we used color to associate the Watch button with the Free with Ads promo tag

I’d like to specifically point out that up to this point, the UX team didn’t have access to any usability platforms, nor any testing device (except 2 legacy android tablets). We were designing and working with budget controls and serious time pressure. This project once again proved ourselves to the product team and the company that we needed more resources. After filing multiple requests the UX team finally got 5 testing devices (I was assigned as the device manager, of course) and access to TryMyUI as the usability testing platform; but this will be another story to tell.


Release and beyond

After endless hard work in the “post implementation” phase, like signing contracts with studios and finalizing the trademark, we finally launched AVOD as “Vudu Movies on Us” in Oct 2016. It was mentioned in Walmart’s newsletter and on multiple media reports.

Vudu Movies on Us was mentioned in Walmart’s newsletter
Media mention on Engadget

A week after it was launched, the company hosted a party to give out free T-shirts, free pizza and free ice cream. It might not sound like anything to you, but it was BIG to us since we barely had ever gotten anything free like those before at Vudu.

Vudu Movies on Us has been growing bigger and bigger ever since, and now has become one of the most important service that Vudu provides, especially on the OS platforms where users cannot make purchase. I’m very proud to be part of this project, and felt very lucky to lead and initiate the design journey with all talents around me.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.