pratti
pratti_website_filmax.png

Filmax (2016)

A movie recommendation app.

dashboard
Interface
category
Iconography
filmax_perspective.png

Overview

Filmax is a movie recommendation app originally developed in 2016. I was brought early on as a design consultant, and then as main designer for a complete overhaul.


Identifying issues

 
 

1 — Lack of emphasis

Within the context of the app, the title and descriptions are the most important pieces of information you'd like to see. The original design did not account for that, giving more prominence to secondary elements.

2 — Waste of space

Allowing items like the release date to have their own rows proved to be very inefficient. Also, movie titles average between 2-4 words, which also left a gap on the right side of the screen fairly frequently.

3 — Unintuitive approach

Pieces of the UI were needlessly complicated or outright misleading with their descriptions. The 'Popular' row was, instead of displaying popularity, showing the review score for that particular film.

 

Finding solutions

 
 

✓ Better content hierarchy

The layout was reordered based on importance, bundling information into separate blocks to make it easier for users to scan and process different content types at a glance. Supporting details like runtime and release date were relocated as secondary items right next to the titles and descriptions to make them easier to spot.

A FAB - Floating Action Button - was implemented and given the most importance by being anchored to the seam between content types. The accent color also helps distinguish it from the rest of the UI.
 

✓ Improved content density

By eliminating the individual entries for release date and runtime, we were able to push more relevant details to the top, like genres and trailers. Movie titles were pushed down, ensuring that regardless of the their length, the FAB would be unable to cover them.

 
Example of a long title

Example of a long title

 

✓ Cleaner typography

Material Design suggests making all text and icons align to 4pt grid instead of relying on arbitrary line heights.

 
Typography grid

Typography grid

 
 

Homepage

 

Content is key

The homepage is a beautiful grid of movie posters, taking advantage of their unique style to create an impactful experience.

Top movie gets special treatment

The movie that is found at the top of the list displays their description with colored backgrounds based on their poster.

 

Explore

 

Genres have complimentary imagery

Each category has thumbnails pertaining to movies within that genre.

Top rated movies are shown through cards

To avoid visual noise and conserve space, lists are shown in cards instead.

 

Movie & Cast

 

Movie detail pages have a clean layout

Having a simple and well-structured UI helps users recognize blocks of interactivity.

Cast pages only display the most important characteristics

While most of the information provided is what most users are seeking, there are shortcuts to 3rd party websites that provide a more in-depth look at each cast member.

 

Watchlist & Tracking

The point of Filmax is to find, track, and watch movies you're interested in. In order to maintain context, banners and buttons change states to make it easier to manage movies you have already bookmarked.

 

Regular movie page

'Seen?' prompt

Movie is in watchlist

Movie has been seen

 
 
 

Make it positive

When a user does not have any movies in their watchlist, an illustration is shown to make the experience less apathetic and encourage the user to interact with the app.

 

Iconography

Legacy

The old product icon received very little changes apart from size changes, given that the decision of settling with a popcorn box and a ticket was made very early on. 

Legacy icon iterations

Legacy icon iterations

Adaptive icon (Android 8.0+)

With the addition of Adaptive Icons in Android Oreo and above, the icon had to be redesigned to fit a variety of masks. Without the ability to have an icon with a distinct shape, we embedded the ticket shape into the popcorn box and served it as the foreground, while the star was promoted to a solid object - with its own drop shadows instead of being printed onto the ticket- and used as the background.

Background & foreground layers

Background & foreground layers

Launcher masking

Launcher masking