MovieLens.org
MovieLens helps you find movies you will like. Rate movies to build a custom taste profile, then MovieLens recommends other movies for you to watch. The website is powered by a recommender system that connect the dots between simple user input and meaningful predictions. I joined its team at GroupLens Research at University of Minnesota to redesign the website in 2017.
See it live ↗Pain points from user research
The website’s last design refresh dates back to 2012. While the backend of the website receives regular maintenance and updates, the front-end remains barely untouched.
During preliminary user research the team reached out to users who were active during a 30-day time frame, and conducted remote user interview with those who agreed to participate. The user interview result highlighted the following pain points:
Cluttered and confusing user interface. Some page layouts, the homepage as an example, consist of movie cards that contain incomplete movie posters, short but scattered text, too many stars as rating widgets, and confusing icons as links or buttons.
Rating seems essential, but its usage remains unclear. A large portion of users were drawn to MovieLens by its ability to provide personalized predictions. However, with the underlying connection between users’ rating behavior and MovieLens’ prediction unexplained, the mechanism seemed like a black box to them.
Not sure how the website categorizes movies. MovieLens supports searching by genres, directors, cast members, and even years of release. However, few clues from the interface hinted the user from searching by anything other than movie titles, which stopped them from exploring related movies and potentially rating more titles.
Challenges
Movie cards are import entry points to the user journey in MovieLens. In a limited amount of space dominated by a movie poster, much of the movie’s information need to be displayed while allowing the user to interact and provide essential input to the recommender system.
With designing the movie card component being a priority, the team faced an information architecture challenge: How to utilize the small amount of space and clearly present movie information and user actions.
Clarifying three different rating values
Predicted rating: Based on the user’s watching and rating history, MovieLens utilizes its algorithms and generates a predicted rating value for each movie in its database. This value stands for what MovieLens thinks the user will rate the movie. It is unique to the user and may change over time, and is represented by blue stars in the legacy rating widget.
Average rating: Each user sees the same value for a given title, as it is calculated from all ratings MovieLens recorded for the movie.
User rating: Using the rating widget, the user can override the predicted rating and record their own rating instead.
The three values were often confused in the legacy interface, as users were not able to recognize the color coded ratings in the rating widget without text labels as an explanation.
Fitting user actions onto the movie card
There are several ways the user can interact with a movie card, which include: Viewing detailed movie information, rating the movie or clearing the rating, adding the movie to wishlist, and hiding the movie from search results. Implementing any of these actions will affect MovieLens’ predicted rating for the movie, so the research team at GroupLens hoped to keep them on the movie card for quick access.
Some actions have confusing icons in the legacy interface, for example the action of adding a movie to wishlist was represented by an icon of a thumbtack. How to fit all actions on the movie card without confusing the user remained a challenge.
The design process
Inspired by a physical book
The team was not happy with a few draft designs because of their less than optimal performance in usability testing—until an obi from a Japanese book caught my eyes. It is a paper band looped around book covers, and is often used for printing introductions or endorsements. It is flexible enough to move up and down loosely on the cover, revealing and hiding certain amount of information underneath it. This nifty structure inspired our design of the movie card layout.
A “moving part” in the UI
Echoing an obi on book covers, a component called obi was introduced to the movie card. It is an extra layer on top of the movie poster, and remains collapsed until summoned by the cursor upon hovering. A sleek animation brings the layer on top of the movie poster. The obi contains most of the movie’s information, along with rating statistics and a rating widget.
For a title that hasn’t be rated by the user, its movie card shows a collapsed obi with the movie title and predicted rating and a blue star. To rate a movie, the user hovers over obi and clicks on the rating widget to indicate a rating. When the cursor moves out of the movie card, the obi collapses again showing the user’s rating with an orange star.
Average rating and predicted rating are also displayed in plain text on obi so that users don’t have to guess what each color stands for.
Directly from within the obi , the user can initiate a search by clicking on the movie’s genres, as a way of encouraging the user to explore and rate more related movies.
All other user actions live together in the new action menu, revealed by ellipses on the top-right corner of a movie card. All actions are clearly labeled, and confusing icons were replaced with icons that make more sense.
A unified visual identity
To establish a consistent user experience across the website, the capsule component used to signal movie genres made its way onto the movie details page. Also on that page, movie tags—a feature that lets anyone from the community label a movie by a characteristic or description, while others can upvote existing tags—adopted the same visual style.
Similar to the behavior on an obi , a click on any genre or tag capsule will start a new search with that specific attribute.
Result
My roles
My roles in this project include user research, user interface design, and usability testing. I also contributed to UI prototyping in an Angular.js environment.