Part 2 - Design Process

A kickoff meeting with stakeholders led to the answers to Why, Who, When and Where:

• Why are we doing this?
  Streaming video clients want to help their customers choose titles to watch. Giving them relevant and easy to digest “reasons to watch” (critical reviews, cast info, award info, etc.) can help them wade through enormous catalogs of content.
• Who are we building this for?
  The demo audience is a little bit tricky: The clients are streaming video platforms, but the proximate user is the Project Manager or a salesperson, who actually present the demo to the clients.
• When and where will the feature/demo be used?
  Demos are generally shown at trade shows, such as CES, NAB, and IBC, on large-screen hi-def TVs. Sometimes, though, they will be shown in meetings both in-person and virtual, perhaps on a laptop.

Research into what the major SVOD companies are currently doing informed the What answer:

• What is/are the solution/s to the problem?
  Modernization: Current best practices and ultimate end-user expectations pointed to some sort of large, hero-area carousel of main content as the most significant change needed to the existing app. In addition, we wanted to try to vary the size and/or shape of the cover art presented in the series of carousels on the page.
  Reasons to Watch feature: We wanted to incorporate icons along with text snippets. Where and how these would be employed would be a main consideration. I wanted to take advantage of the existing UX which relied heavily on a program modal to provide real estate for this kind of new feature:

Wireframes

I produced two initial designs for the landing page; these were presented for stakeholder review:

Implementation

After wireframe Design 2 was selected as the preferred layout, "pair programming" work with a developer began. I supplied the developer with a prototype in Figma, which they used to build the app in React. Once deployed to our gitlab environment, we each worked on designated aspects of the project in separate branches, merging when appropriate. We worked quickly to iterate and refine the design. Design reviews with stakeholders were held bi-weekly, and the primary discussion revolved around the navigation for the hero carousel. After determining that images were preferred over a dot navigation, three solutions were proposed:

Release

Ultimately, the third design was selected. Below is the before and after for this redesign. A video screen capture of the user clicking through various features in this app is available above. I would be happy to walk through this with you to provide more detail.

Part 3 - Analytics

Surveys to determine the How:

• How can we measure our success?
  Pure number analytics, e.g. pageviews or clickthroughs, are not feasible with this app. Ultimately, sales of the new feature will prove the success of the demo. But immediately after a new feature is presented in a demo such as this one at a trade show, we talk to the presenters to get a sense of “lean-in” from the clients. Also, we ask how effective the demo was in allowing them to illustrate how this metadata helps the end-user make a decision to engage with the content.