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.”
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 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 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 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!
