Criterion Channel Redesign
Redesign the iOS App to be more competitive in the films streaming services
My role: Product design
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
No portal to access the entire film catalog
Can only search for films by their names
Instagram page comments
Overwhelming content on the Explore page
Disorganized content on the Movie page
Lack of hierarchy on the Movie page
Unexpected change of color scheme on the Profile page
Lack of hierarchy
Difficult to find membership information
Comparing with other similar film streaming service, I found out some features that Criterion Collection may want to employ in their own service.
Improving the searching experience and the information synthesizing layout will allow the users to navigate and find their desired information efficiently.
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
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.
Student, interested in art films
Goal: Explore different types of films and learn about film history general knowledge and entertainment.
Goal: Watch films that are not in their DVD collections. Save film watchlists to accommodate for research and studies.
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.
LACK OF HIERARCHY
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.
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.
Improved the searching experience and the information synthesizing layout will allow the users to navigate and find their desired information efficiently.
Cleaning up the color scheme and maintaining the consistency of visual elements will attract more users and make the app more maintainable.
Memberships and subscriptions are the main drivers of the revenue. Improving the trust elements of the profile membership page will help in this conversion.
SEARCH PAGE FILTER FUNCTION
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.
CURRENT MOVIE PAGE
Unclear, repetitive info
"Add to my list" is too small and unintuitive to find
Unclear word use
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.
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
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.