movielens-logo-white.png

Movielens

Movielens

banner_ml.jpg
 
movielens-logo-white.png
 
 

It all started when…

...I discovered the portal and quickly experienced the potential buried underneath the clunky user experience. Movielens is a great tool for discovering new (and old!) movies. It helps you get personalised recommendations thanks to powerful and sophisticated algorithms, that constantly learn about your taste, likes and dislikes.

It's a fantastic companion for anyone who has a difficulties finding worth watching movies, I have however found that the website can be improved by streamlining the interaction and content, also cutting down on steps to get more details about the movie can drastically improve the user experience.

In this concept I was looking for the ways to cut down on unnecessary clutter (for instance rating can be shown while you hover over the thumbnail), emphasise sections: Recent Releases and New Additions - let user distinguish new from current movies, posters are bigger helps user familiarise itself with fresh content. Overall, with the minimal design, I am aiming at accelerating the interaction and browsing, while emphasising on content - fewer distractions and clutter.

 

The current state of play

The current version (2018) of the website consists of main elements: top navigation with a search bar and movie tiles with a visible rating system and basic information + experimental features of discovering new movies.

My first impression was that the portal is way too functional in the sense that there are too many navigational elements obstructing the movie discovery process - quite often we may find ourselves in a position where circumventing the navigation somehow is necessary to help us find interesting movie within a particular genre.

The top navigation bar has a very haphazard and a little chaotic structure. For instance, some (hamburger) menu elements could be implemented under profile icon (such as the whole Your Activity section).

 

Early sketches

During the sketching session, my main point of interest was a movie tile, that currently displays a lot of information - in result it's quite overwhelming. In the early stage I was considering two types of main navigation: first one, top bar with search box and second one expandable sidebar menu, located on the left hand side.

 

Ideating on two types of navigation, I was decided to stick with the top bar navigation - it is already familiar to the user and wouldn't have to display too much information at once as opposed to the long sidebar.

Relying on progressive disclosure, I find that rating function doesn't have to be visible to the user until interested in rating a movie. In the current state displaying the rating builds up unnecessary pressure on a user to act upon - instead, this function can be revealed when hovering over the tile.

 

Information Architecture

One of the main Movielens' pain-points was badly executed filter tool. Using information architecture helped me structure the current content and comparing that with Google Analytics data - allowed me to construct filters used, based on frequency.

Click on the image to enlarge

 

Wireframes

During the wireframing phase, I realised that it would be beneficial to pay attention how the content is displayed, thus for sections Recently Released and New Additions I decided to make movie tiles bigger. By displaying bigger movie tiles (movie poster) this should enable a better discovering process also user can familiarise himself with new additions in a more engaging way.

Using After Effects, I was exploring possible ways of interaction with the website. During the design stage, I decided that double modal function is impractical (while clicking on Show More from a movie tile) and create an extra step to reveal the more in-depth movie details.

 

Filters

Filters are a very important tool in Movielens. Current filters are split into 4 separate elements, that unnecessary breaks the natural similarity and mutual relation.

The newly designed filters are bridging that the broken connection and are now enclosed within a one, unified panel. I decided to introduce progressive disclosure and let user expand the needed views - in result all choices are visible at once and user is not required to constantly expand list via More section.

I have also decided on minimising the user input, now using Rating or Release Date filters user can type in values inside the box by hand or use slider functionality - this to accommodate users who are suffering from Parkinson's or MS and ultimately have problems with typing.

 

Design

Satisfied with layouts and wireframes, it was time to make a design. The general consensus was to not producing anything extreme or radical that could confuse users, as we know the transition from old to new can be problematic, especially when introducing new navigation flow or unfamiliar patterns (mental model).

The main premise was to use a neutral palette with only one accent (Medium Orange) colour, that won't compete with already colourful movie tiles content.

Choosing Roboto as the main typeface, I am able to satisfy user with legibility and clean look. The font works great on any type of screen.

 

Old vs New - movielens is a service that is fun to use!

 

Landing page animations

Introduction to delightful and fun experience of Movielens, using animations within the hero screen.

 

Screens

 

Thank you for reading!