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.
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.
✓ 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.
✓ Cleaner typography
Material Design suggests making all text and icons align to 4pt grid instead of relying on arbitrary line heights.
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.
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.
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.
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.
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.