UI Design: Movie Booking App
Creating a clean and classic UI with a dash of Hollywood
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.
White, Gold and 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.
I stuck with white as my base colour to keep it clean and elegant, and used varying shades of gold to communicate the importance of the varying different body text elements — this means that the darks also have a subtle warm hue to them. I often avoid pure black or pure white, instead using an off-black or off-white that has a muted bit of colour; it’s a subtle but very powerful difference. Gold is always particularly hard to get right in that you often just find it either looks tacky or creates a gross, muddy colour. In this instance I found it looks great against the clean, white background. Furthermore, 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; the movie titles and movie description. This was to create visual hierarchy and set this text apart from the rest.
Meanwhile I used Futura (medium & medium italic) 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 search function is an unfocused state — this is simply condensed into an icon so that the rest of the bar can be left for other potential elements, for instance, logo / user profile icon / hamburger menu etc. I’ve used placeholder elements to demonstrate this by creating a hamburger menu.
When the user taps the search icon a light grey box opens out expanding across the top section from the left side; this pushes everything else to the right. The keyboard is automatically brought up and placeholder text reading “search for a movie title” is visible in a pale gold — this tells the user that the information that should be entered into the field should be of a movie. When the user taps on another element, scrolls the page or brings down the keyboard, the search bar compresses again and the elements move back into view from the right side of the screen.
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 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. This is accompanied with relevant title text and a label that reads “New Release!” or a specific date if it’s available for pre-booking. We could also include “Leaving Soon” labels to let users know that a particular film will be unavailable soon.
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. I also considered using a sort function near the featured films — this would organise the list items in various ways and remove their associated labels to avoid repetitive visual information, for instance, sorting by most popular would remove their respective “popular” labels. To name a few you could organise the list by films that are leaving soon (demonstrated), nearest, latest release, coming soon, popular, award-winning etc.
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.
To highlight a popular movie I surrounded it with a gold border (which aligns with the art deco influence) and added a label. This would also be the template for other label types:
“New Release!” for newly released films.
“Pre-book!” for films that are due to be released soon
“Leaving Soon” for films that are leaving the cinema very shortly
“Bafta” or “Oscar” for films that were awarded a Bafta or an Oscar which may only be visible around the time of the event.
These labels could differ in colour — although largely monochrome, the art deco style and colours often included one or two more vibrant colours to contrast with the monochromatic beiges and golds.
Film Information 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 and the user can easily change the current cinema manually by moving to the suggested cinema locations or tapping the icon and searching for a cinema. This will function similar to the search bar; when the icon is tapped everything moves to the left to reveal a text field that is automatically focused. 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 listview 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 listview screen. Similarly, dragging this down will reveal more of the image, however, this will always snap to the demonstrated position once the user releases their finger. 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. The title text remains overlayed on the screen while the trailer plays, however, this would disappear if the user entered landscape mode where it would go full screen.
Having the title text around a 3rd of the way down from the top is a natural resting place for the eye because it’s close to the middle of the screen. I added in some stars to represent reviews, along with the film duration to the far right, the description below it and the director / cast to create a visual ‘block’ of information. By dividing the page up like this the user can quickly understand which information is relevant because it’s grouped accordingly. I think reviews are especially effective as they comply with social bias and social influence; if other people are liking and rating a particular film, then it must be good, right?!
Day & Time Selection
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. Of course this wouldn’t force the user to select a different option as the user could be ordering for friends or just browsing, but it could enhance the user experience that little bit more.
Fun fact! The gold lines above and below time/day selection mimic the gold box around the time/day information on the list screen. Similarly, the colours also match — dark text for the title, lighter text for the time, day and venue.
Return, Summary & Cart
Given that users are going to be travelling back and forth between the two screens very frequently, it didn’t make sense for me to place a return button in the top left corner where users have to stretch their thumbs to reach. Instead, I decided to place it at the bottom portion of the screen so that users can easily access it — swiping from the side of the screen would also navigate backwards. Similarly, the cart icon that takes the user to the next screen is easily accessible by being on the opposite side — this icon takes the user to the cart so they can select the amount and type of tickets they want.
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 is the areas where user decision has been made, and these parameters are what amount to the final booking — film, place, day and time. I thought it would be a nice touch to add a ‘summary’ of sorts to balance out the last portion of the design and, more importantly, provide visibility of the user’s choice before they proceed. You’ll notice in the animation that everytime an option is selected, the summary section gets updated.
I used a darker colour for the title text, the summary, return and cart actions because this helps frame the core information — description, time and date selector. By having darker tops and bottoms we’ve helped focus the user attention on a block of information. 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.
