Criterion Channel Redesign

Redesign the iOS App to be more competitive in the films streaming services  

My role: Product design

Tools: Figma

Apr 2019

Criterion Channel

The Criterion Collection is an American home video distribution company that focuses on licensing "important classic and contemporary films" and selling them to film aficionados. Recently, it released its film streaming APP, The Criterion Channel. Because of the range of films and services it provides, the app service is facing criticisms and challenges with maintaining a user-friendly iOS APP.

Findings and challenges

The current designs

EXPLORE PAGE

IMG_C424729E2A92-1.jpeg

SEARCH PAGE

IMG_1579.PNG

LIBRARY PAGE

IMG_1580.PNG

PROFILE PAGE

IMG_AD376CFA25E5-1.jpeg

MOVIE PAGE

IMG_1764.PNG

Pain points

SEARCH PAGE

IMG_1579.PNG

EXPLORE PAGE

  • No portal to access the entire film catalog

  • Can only search for films by their names      

MOVIE PAGE

IMG_1764.PNG

Instagram page comments     

  • Overwhelming content on the Explore page

  • Disorganized content on the Movie page

  • Lack of hierarchy on the Movie page

PROFILE PAGE

IMG_AD376CFA25E5-1.jpeg
  • Unexpected change of color scheme on the Profile page

  • Lack of hierarchy

  • Difficult to find membership information

Competitive Analysis

Comparing with other similar film streaming service, I found out some features that Criterion Collection may want to employ in their own service.

Hulu

Improving the searching experience and the information synthesizing layout will allow the users to navigate and find their desired information efficiently.

Netflix

Memberships and subscriptions are the main drivers of the revenue. Netflix did a good job of improving the trust elements of the profile membership page will help in this conversion.

Understanding User Needs

User personas

From qualitative interviews, I gathered some information and answers from Criterion Channel users, helping to determine two types of users and their primary goal of using the Criterion Channel app.  In this way, I am able to redesign the experience aligning with the users' needs and expectations.

Jenny

Student, interested in art films

Goal: Explore different types of films and learn about film history general knowledge and entertainment.

Aline

Filmmaker, cinephilé

Goal: Watch films that are not in their DVD collections. Save film watchlists to accommodate for research and studies. 

Usability issues

Based on users' feedbacks, the inconsistency of the UI design and users' mental model for a film streaming service, I define four major usability issues that impede the intuitive interaction between users and the interface.   

SEARCHING INEFFICIENCY

OVERWHELMING CONTENT

LACK OF HIERARCHY

VISUAL INCONSISTENCY

Adding filters of genres, years, countries on the search page will allow users to explore and find new desired films that they may not know the names of.

The amount of information and CTA on the explore page increases users' cognitive load, causing decision fatigue, making it challenging for users to pick a film to watch.

The lack of hierarchy on the movie page makes the users feel tired and lost. Users may find it hard to save films to their watchlist. The placement of the "save" button is unintuitive.

The color scheme inconsistency on the profile page decreases users' trust for the app, directly influencing the membership subscription numbers.

Design Process

Based on the above findings and analysis, I decided to solve the four usability problems to improve the film viewing experience for film viewers (and also myself) so that users can find the information effortlessly without feeling stressed and lost while browsing randomly.

Goals for redesign

To solve the problems holistically, I decided to address the problems in three different types and approach them together.

USABILITY

Improved the searching experience and the information synthesizing layout will allow the users to navigate and find their desired information efficiently.

BRANDING

Cleaning up the color scheme and maintaining the consistency of visual elements will attract more users and make the app more maintainable.

BUSINESS

Memberships and subscriptions are the main drivers of the revenue. Improving the trust elements of the profile membership page will help in this conversion.

Design decisions

  • SEARCH PAGE FILTER FUNCTION

CURRENT SEARCH PAGE

IMG_1579.PNG

Users may not know what can be searched

How can users search for names if they don't know the names?

NEW SEARCH PAGE

To allow users to browse the whole film catalog and to discover new films by their preferences and curiosities, I added the sliding filters. Users can select multiple choices to quickly access their desired categories.

  • VISUAL HIERARCHY ON THE MOVIE PAGE

Regardless of the fact that the movie playing page is usable and includes all information users need, its way of synthesizing all the information on the layout can cause confusions and create obstacles for users. The problem comes from the visual hierarchy of texts and buttons.

IMG_1764.PNG

CURRENT MOVIE PAGE

Unclear, repetitive info

"Add to my list" is too small and unintuitive to find

Unclear word use

NEW MOVIE PAGE

MOVIE PAGE3.png

The production year is too small and unnoticeable

  • STYLE CONSISTENCY AND TAXONOMY ON THE PROFILE PAGE

Instead of being a profile page, the function of this page is prone to be a setting page without much personal profile information. In order to maintain the cohesion between the tag and the content, I decided to move the watch history ("Continue Watching" scrolling card) from the Explore page to the Profile page. 

IMG_AD376CFA25E5-1.jpeg

CURRENT PROFILE PAGE

Unable to add a profile picture and background picture decrease the trust built between users and the app.

The unintuitive change of color scheme decreases the consistency of the whole experience.

There is no signal telling users whether they are members or not. Users may find it hard to remember if they have a membership.

NEW PROFILE PAGE

  • INFORMATION ARCHITECTURE ON THE EXPLORE PAGE

By migrating the watch history section from the Explore page, the information became less overwhelming for users to navigate.

CURRENT PROFILE PAGE

NEW PROFILE PAGE

Reflection

If I had more time in this challenge, I would spend more time conducting the competitive analysis of similar products, such as Netflix, Hulu, etc. I would also spend more time on the visual design of the interface and adding more social features by allowing users to log in from other social media accounts. Criterion Channel is purely a streaming service right now and I look forward to seeing more functions and features through their updates.

Apr 2019

Open for Product/UX Design roles and freelance projects.

See my résumé.

  • Black LinkedIn Icon
  • Black Twitter Icon
  • Black Instagram Icon

© 2020 by Yifan Zhang