App UI Design

Movie Booking App

2019

CLIENT

Self Inititated PRoject

For a short mini-project I designed a UI for a movie booking app giving myself a time limit of two days to complete the design & animation. Given the time limit, I focused on the movie listings and a portion of the booking process.

One thing I notice about movie-related apps is that they often have dark, modern interfaces so I wanted to design a UI that travelled in a slightly different direction, aesthetically. My goal here was to design a UI for a movie booking app that was more classical and a nod to the old-style art deco/ hollywood era.
‍
This was a fun project to expore and a great exercise in creating a design quickly & efficiently.

Styling

White, gold & monochromatic colours are synonymous with art deco and generally consist of strong geometric shapes so I used different shades of these colours for body and title text. Thin lines and dot patterns helped define the look and feel of the screens through different UI elements which formed the dividers and selected menu items on the pages.
‍
These colours also work well on a darker UI and — with minor colour adjustments — a day/night mode is a very possible feature of the app. The style remains largely intact because white, black and gold are great together.
‍
I used Lora — a very elegant and legible serif typeface for the title and body text — which appears on the most important text. Meanwhile I used Futura for everything else as I love its’ strong geometric form; it’s particularly beautiful when capitalised and is wonderfully eye-catching. Futura is much more legible for smaller font sizes too. Both Futura & Lora fit well with the theme and visual direction of the app given that Serif fonts align so well with the classic feel, while sans-serifs provide a contemporary element to the design.

Film List

The list screen reveals the full image with the bottom of the curve almost touching the bottom of the screen showing the tops of the list items to indicate that the user can scroll vertically. The user can also swipe right or left between images and the number and current image is indicated by the navigational circles nearby. The content of these images reflects the most recently released films along with the upcoming films to encourage the user to book (or pre-book) tickets.
‍
Each list item contains the four core pieces of information — the image, the title, the day/time of the next showing and where the nearest cinema is.
‍
The items themselves are positioned as two columns with a good amount of padding in between to provide a better illusion of space, creating a much cleaner interface. Below each item is the title of each movie, the day and time of the next showing and then the nearest cinema that the film is being shown at. As the user scrolls vertically, the list items and their respective information comes in from the edges of the screen, and when the hero image get closer to the top they reduce in size.

Film Page

I decided to place the location menu at the top because this is a menu select function where the location may already be pre-defined. The main list-view has the cinema location information underneath each list item which will select the nearest cinema (and availability) by default when the user comes to the movie detail screen.

The closest cinema is made apparent and is accompanied by alternative nearby cinemas in a lighter colour so that the user can easily change the current cinema manually. Ultimately though, the user will be using this menu less frequently than the day and time menus. The icon is positioned in the same place as the search icon from the list view screen — this is to support visual and behavioural consistency.
‍
The movie image is clipped with a mask to add interest to the design by using a swooping shape, similar to the list view screen. From here the user can tap the play button to play the trailer for the film — I made sure that the height and width of the visible image is the same ratio as a 16:9 screen. This was so that the user can see and watch the trailer with minimal cropping, resizing or having to rotate the device.

Film List

Once a location has been selected by the user, the description is cropped (but still accessible via scroll) and a horizontal scroll menu is revealed for the user to select a date. Once a date has been picked, the time menu is then revealed. This works in a similar way, however, it’s arguably shorter because of the fewer number of options; these are separated by little perforated dividers. I made sure that the unselected times slightly differed in colour, but remained dominant so that they wouldn’t be associated with the dates above them. One thing to note is that I used the 24 hour time format to avoid human error — it also avoided using repetitive information (am/pm) which increases visual noise on the overall composition.
‍
As an extra thought, the time could auto select to the next showing that the user can realistically make, taking into account location and distance from/ to the cinema. It could be useful if there was a notification to indicate that the user may not be able to make the film in time. If the user lives 30 minutes away and the next showing is in less than 30 minutes, then it could be useful to know that prior to booking.

A diagram dissecting the visual path of the app design

Composition

I intentionally lined up the icons to create an E shape — we often read from left to right, top to bottom, so by vertically left-aligning the icons I created a path for the eye to follow. Once the eye gets to each section it naturally travels to the right — this makes the user scan the relevant interactive elements on the page before actually having to interact with it.

You may notice that all the underlined information mark the areas where user decision has been made, and these parameters are what amount to the final booking — film, place, day and time. I wanted to crate a ‘summary’ of sorts to balance out the last portion of the design & provide visibility of the user’s choice before they proceed. You’ll notice that every time an option is selected, the summary section gets updated.

The dividers in this section help form a square, which indicates how much of this area is touchable in order to initiate the action and suggesting the interactive boundaries. By placing these navigation elements in a position where the thumb will naturally be is going to be refreshingly comfortable for the user to navigate between screens. By dividing the page up the user can quickly understand which information is relevant because it’s grouped accordingly.