Cinemark timetable

BOX OFFICE SHOWTIMES

How to fit the information in one display?

The problem and the goal

Movie theaters need to display a great deal of information at their box offices.

But how to show it without landslide patrons in information? Choosing a movie on the spot is challenging enough. Customers just want to know the screening time and the price. If much.

This redesign aims to sort and present all relevant information in a clear, simple, and (hopefully) beautiful way.

Simplifying with a color code

The foundation is straightforward; I suggested we make use of universal symbol conventions like green, yellow and red. And build up from there.

My role

Visual designer, art director

Responsibilities

Conceptualizing, prototyping, visual design

Duration

October 2017 - February 2018

Starting off • Prioritizing the information 

Defining and prioritizing the information

This is basically what is needed to be shown for each movie

. Name

. Showtimes

. Prices: as they change dynamically during the day

. Seat availability

. Type of screening room

. Type of projection: regular or 3D

. Seating options: regular, VIP, or DBox

. Suggested age target

. Subtitled or dubbed

. Legal copy

Timetable then

Pain points

• “The information is all over.”

Information will be merged and pixel-perfectly aligned


• “Excessively complex.”

Grouped information in sensible blocks will simplify the structure


• “Confusing.”

Priority-based elements will ease the reading sequence


• “Lines and columns alright, but somewhat confusing.”

Relevant information will be displayed by context

Sharing the screen real estate

Once the information hierarchy is defined, they can be grouped roughly and assigned its own weight.

Problem statement

“ The Cinemark moviegoer needs to make an informed decision about the movie they want to see, but the way (and amount of) information tidbits presented at the box office is either lacking, confusing, or dispersed across different displays.”

Information architecture

The 3 main categories moviegoers look for are: 'movie name', 'next screening time' and 'price'.


And then 'amenities', that can be lumped together.


So, aside using universal color conventions, we'd know these 3 categories should come first as information hierarchy.

Hierarchy defined by reading sequence

Priorities defined by size and motion

Reading sequence

1. Name

On the left hand side, a line for each movie.

1. Name (blockbuster)

If screened in multiple rooms, it might take 2 lines

2. Premium room

Fancier rooms: displayed with a dark background

3. Showtimes

Hours appear on the right

4. Prices

Dynamically changing, at the bottom, in the center

5. Legal copy

On the bottom corner

Movie session logic

The basic building block is the 'hour brick'. It makes up the grid on 'time schedule' area. The 'hour brick' own internal information hierarchy is setup this way:

Hour  >  subtitled/dubbed  >  3D/regular  >  motion seat (DBox)

Dubbed audio

Subtitled movie

Dubbed, & in 3D

Subtitled & DBox motion seat

Green: Plenty of seats available for this session

Yellow: selling last seats for this session

Red: session sold out

Sold out in dark background - for premium rooms

Recommended age and featured amenities

Wedged between the movie name and its schedule there are two columns.

The left column displays the target age for each movie.

And the right column promotes special features for that specific room.

14 years old

General public

Inside the information architecture hierarchy these special features (XD, VIP, DBox and 3D) come on top. So they lead the showtimes in the right column - inside the hour block. Actually, they're so relevant, we have them animated in the display - wobbling as if they are on a cube face (check out the video down below).

XD audio

Premium room

Motion seats available

Themes

Movie theaters have "Matinée" prices and evening prices. Thus, the bottom third theme of the display changes accordingly: day & night.

Price colors follow the theme.

Boxes are big enough for a whole bunch of currencies, with different amount of digits, and currency symbols.

Redundancy

Redundancy in this case is not bad. Not only the colors and themes change, the text explicitly say which type of prices are being displayed at any moment.

"Prices · Matinée · Monday"

"Prices · Night · Wednesday"

Final version

After many iterations and refinements (I talk about some of them in Digital Signage), this is the final look approved by Cinemark. During its international testing we were hit by the Covid-19 outbreak and everything bogged down. 

Testings never stopped, though. And October 2021 the live version started rolling out in different markets around Latin America - Brazil included.

Time lapse

The video below shows the actual motion of the elements while the clock (bottom right) runs at a pace of 1 hour every 6 seconds.


It displays seats selling mechanics for a session: green (now open and available seatings), yellow (last seats available) and red (session sold out).


Once a session actually starts, its slot is erased from the timetable and next sessions blocks slide left, eventually emptying out the line.

The bottom third, alternating with prices, displays current promotions and deals.

Improvements for a next iteration


Conclusion • Learnings

This was an excellent opportunity to learn information architecture; also, to put hierarchy and reading sequence hypothesis to use.


I learned about different needs that each country Cinemark operates on. And the challenges this present. For example, currencies differ extremely - some countries need only 4 digits to show a price, others need 5 or 6 places.


Also, since the information behind the design is live, this timetable is made out of modular pieces the system calls up and puts wherever needed to display everything in real time.

Let's connect.

Looking for a digital designer with solid graphics background, strong sense of ownership, and always curious to learn more?

Let's see if we can work together!