Movie App UI Design

A design challenge to create a simple set of layouts for a mobile application focused on films and tv show rentals.

The Concept

This project was light hearted and not taken too seriously. The main purpose was to just have fun and create a quick concept for an application. Thinking of how a user browses and consumes content. The apps layout uses the very defined mobile pattern of horizontal scrolling thumbnails that bleed off canvas.

Movie App Landing Page UI Design

Design Language

The design language uses curved edges to present a softer look and feel that isn’t present in many of the apps in this sector I looked at as I researched various user flows. I also added a vivid colour scheme to try to make certain areas stand out a little more.

Movie App Category Pages UI Design

Contextual Feedback

Many competitor apps such as Netflix opt to not use text labels for their content cards, opting to let the film/shows thumbnail artwork do the work in terms of translation what the show is called. I chose to include a text label for the film/tv shows title to provide additional feedback to the user, along with some other details such as the genre, which doubles as a category tag and a ratings score.

Movie app 3D Touch

3D Touch

iOS and Android now allow for long presses to bring up additional contextual information, I felt this could work well in terms of allowing the user to 3D touch into film / tv show listing and view more information without having to click fully into the listing.

Prototyping

My idea for this was that when a user long presses on a film cover the popup appears with an auto playing trailer of the film/ tv show, below the video frame is some additional information along with some extra options, such as add to watch list etc. This could help the user quickly identify shows they are interested in, and add them to a watch list for later viewing.

Movie app icon set

Iconography

I created a small, simple set of icons for the app designs iconography. Using a combination of straight and rounded edges to again add a softer touch the visual language.

Movie app tiles