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 show them without landslide patrons in information? Choosing a movie on the spot is challenging enough. The client just wants 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 symbolic 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

  • Evaluating

  • Estimating the screen real estate

  • Choose colors

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 text

Timetable then

Pain points

• “The information is all over.”

Information will be merged and pixel-perfectly aligned.


• “Excessively complex.”

Sensibly grouped information blocks will simplify the structure.


• “Confusing.”

Priority-based elements will make clear the reading sequence.


• “In lines and columns but somehow unclear.”

All the pertinent information will be functionally grouped.

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 displayed at the box office is either lacking, confusing, or separated across different screens.

Information architecture

The 3 main information moviegoers look for are: the film name, the next screening time and price.


Coming in second, 'amenities' could be lumped together.


So, along with using universal color conventions, we know that these 3 pieces of information should come first in the 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 text

On the bottom corner

Movie session logic

The basic building block is the 'hour brick' that makes up the grid on the right-hand side. Its 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 showtimes there are two columns.

The left column displays the recommended 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 features (XD, VIP, DBox and 3D) come on top. Thus they're leading the showtimes in the right column, and again inside the hour block. Actually, they're so important, that they get to be 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 of the display changes accordingly: themed day or 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 got slowed down.

Testings never stopped, though. And October 2021 the live version started to roll 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, emptying the line.

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

Improvements for a next iteration


  • More subdued color indications for targeted age indicator.

  • A slightly more 'flat' visual, making it whole less busy.

  • More subtle interaction between the age and amenities columns.

  • A low-key animation when deleting a slot and moving sessions.

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!