The Criterion Channel

The Redesigned Criterion Channel Mockup

Project title: The Redesigned Criterion Channel

Type of work: Improvement of mobile app design

When: 2019 - 7 weeks

Concept: Improve the branding and navigation of the existing app to simplify the customer journey.

About the app:

  • Demographic: Predominantly men, over 35, upper & upper middle class incomes
  • Uses: Stream movies and behind-the-scenes featurettes, interviews, etc.
  • Release: April 8, 2019 (7 months old at the time of this project)

Starting Point / Original App

What works:

  • Content is organized in a curated fashion. Hence, nothing feels random or as if it's been compiled by an algorithm, as is sometimes the case with competitors such as Netflix and Amazon's Prime Video.
  • Minimal navigation options help streamline use.
  • Strong, yet reserved, branding helps the content pop.

What doesn't work:

  • On iOS, the tab bar is confusing, i.e. "Library" takes you to your saved content rather than the app's full catalogue.
  • The profile page is stripped of the company's branding and, instead, relies on default OS settings, such as the default gray/blue pill switches for iOS.
  • Multiple redundancies, i.e. pressing "Watch Now" on a "featured" banner takes you to the movie's page, where you have to press a second "Play" button.

Bottom line: The customer journey is confusing.

Storyboarding Problems

Problem Storyboard
Problem Storyboard

Wireframes & User Flows

I singled out 3 specific tasks before starting on wireframes. This way, all wireframing and prototyping will be purposeful instead of directionless. These tasks can also be used during the high fidelity prototyping phase during user testing and iteration.

Visual User Flow 1

Task: Learn about the making of a recently watched movie.

Visual User Flow 2

Task: Find a movie from a specific time period that you can't remember the name of.

Visual User Flow 3

Task: Watch a movie that you'd saved for later.


Prototyping Phase 1

The first pass at a high fidelity prototype took the medium grays of the original and increased the contrast so the text and movie imagery pops more. Additionally, the information architecture has been restructured to fall more in line with competitors. The previously useless top bar now houses the Search function, allowing the buttons on the tab bar to play a more central role in user navigation, and can also contain page headers should it become necessary. The "Library" button and contents (the watchlist and downloaded titles) have moved to the "Profile." Although one of the highlights of the app is the catered feeling of content, in order to help users find content easier a "Browse" button takes the place of the "Library" in order to take users to a catalogue of all content on the app, complete with a pop-up menu of filters.

Home Page
Profile Page
Browsing
Example Content Page
Example Content Page
Example Content Page
Example Content Page
Browsing Filters
Viewing Content

User Testing

Choice Quotes

Netflix shows your [watch]list as a category on the home page. I assumed it would be on there somewhere.

Edward

It was kind of weird that I couldn’t just search. I almost always search.

Edward

I just got confused. I was looking for, like, a Behind the Scenes category.

Chris

I just couldn’t tell they were supposed to be Behind the Scenes videos because it was the same pictures.

Julie

It feels a lot like Netflix so it works well.

Julie

Insights

  • Testers will easily find a way to circumvent what you assume is the “correct” path for a task by using shortcuts like the Search function.
  • Phrasing can affect how your tester approaches a task.
  • When you’re filling your prototype with filler content, be sure to differentiate between different kinds of content.
  • If you add a certain attribute to most pages, go the extra mile and apply it to all pages.
  • Use this user testing as an opportunity to gather further research by including demographic and general questions.

Revisions to Test

  • Experiment with a way to differentiate different types of content, such as a different shape of thumbnail image to set Behind the Scenes videos apart from Movies.
  • Create a Search page.
  • Experiment to slightly increase the visibility of category titles. E.g. larger type, font style, color, more space, etc.
  • Experiment with a static top bar for the logo/name/search instead of a fading gradient to potentially increase the readability of the items at the top of the app.

Following the user testing, some minor graphical adjustments were implemented to increase readability. The fading gradient at the top of the app was made solid to prevent confusion, with various title fonts increased by 1pt. As you can see in the interactive prototype, there are now 2 thumbnails to differentiate content:

  • 3x4 Portrait thumbnails for films
  • 4x3 Landscape thumbnails with text banners at the head to label it as "Behind the Scenes" content and at the foot to denote the type of content, e.g. Interviews, Documentary, etc.

Finally, to increase the fidelity of the prototype, additional content pages were added to increase the variety of filler content. A search page was also added, in accordance with comments from the user testing.

Home Page
Profile Page
Browsing
Example Content Page
Example Content Page
Example Content Page
Example Content Page
Example Content Page
Example Content Page
Example Content Page
Example Content Page
Filters Menu
Search Menu
Behind the Scenes Content Page
Viewing Content

Micro-Interactions

Animated Micro-Interaction
Animated Micro-Interaction
Animated Micro-Interaction
Animated Micro-Interaction
Animated Micro-Interaction

Self Reflection

Overall, all goals were achieved. The customer journey is less confusing and the app is more easily navigable. The main thing that sticks out came from one of the user testers who commented that the prototype feels like Netflix. While it can't be understated how much competitors can influence your own design process, the goal is never to be a carbon copy. Although the basic navigation and UI of Netflix and this prototype is an apples to oranges comparison, the layout of copy and other interactions do feel similar on some pages, especially in context with a primarily black background and a highlighting color, in this case Criterion orange vs Netflix red.


View the complete presentation/slides right here.