Cinematic

Cinematic

Bangkok showtimes in one place.

Visit website

Getting accurate movie showtimes shouldn’t be that hard

Burdened by their corporate responsibility to advertise gigantic plastic popcorn buckets, Thai theatre websites are full of ads, slow and hardly usable on mobile devices. As a stopgap, some theatre operators offer a mobile app, which is fine if you exclusively go to their branches.

If you want to know what’s showing near you without being tied to a specific theatre or chain, you have to jump between mobile apps and poor websites. An exercice in frustration, especially when you're on the go.

Try loading these on your smartphone.

Alternatives

Movieseer was the go-to website for years. It was slow and not mobile-friendly, but at least it centralised showtimes. Until some time in 2013 when it died quietly.

Google Movies seemed a worthy alternative until we realised many theatres were missing and the strange combination of Thai and English made it hard to use. Strangely, it’s not responsive.

It's not much better offline where the information screens crash or fail routinely.

Movie showtimes in one place

There had to be a better way, and we were not the only ones to moan about the sad state of Thai movie showtimes. Our friend Mat from Mandala Studio pitched the idea of starting a movie showtimes service that would centralise screenings from all theatres in Bangkok. We loved the challenge of delivering showtimes that don’t suck to all devices, and were looking forward to something handy that we would use ourselves. It would also be an opportunity to learn more about geolocation.

Our top priorities were simplicity, accuracy, clarity, accessibility and speed: what’s on in Bangkok, when and where. Nothing more, nothing less. No search, no reviews, no ratings, no gimmicks.

Simplicity

We started designing in the browser, building a prototype and testing it on devices of all sizes and capabilities (having our own device lab helped). A mobile-first approach encouraged us to limit the content and features.

Listing movies

Listing movies with their covers was obvious: their artwork is unique, easily identifiable and fun to look at. They’re part of the excitement of going to the movies.

On small screens, it was a different story: covers took too much space and caused lots of scrolling, making it tedious to get an overview and pick a movie. This is why we opted for a text-based list, which becomes graphical on larger displays. Something we had already done for Benetone Films and our own website.

Filtering movies

We added a list of theatres to filter the movies, which made the movie list even shorter and faster to scan. Most importantly, it avoided the need for a separate theatre page to list what’s screening in a specific theatre. The home page was also the theatre page.

The theatres list was long, so we collapsed it on small displays, and spread it over two columns when space permitted.

Collapsed menu on small screens, spread over two columns on wider screens, and as a sidebar on wide screens.

It started to work well, and thrilled with our simplification efforts, we considered displaying the showtimes on the same page, which would have turned Cinematic into a single page website. It seemed brilliantly simple, promising very fast loading times. Perfect!

We tried modals, tooltips and sliding panels. It kind of worked on wide displays, but felt cramped and complicated when a movie was screened in many theatres, as is the case with most blockbusters. On smaller screens, it was awful. In the end, oversimplification made it more complicated, and we concluded that having a movie-specific page made more sense. It also made sharing movie showtimes easier, and it was more robust as it didn’t have to rely on JavaScript.

Switching movies

Switching movies from the movie page was the next challenge. We didn’t want to have to go back to the home page; it would have been very slow, especially on mobile networks with high latency. Here again, we started with a text-based list of movies, which this time turned into a carrousel when there was enough space to display movie covers.

Fast and intuitive movie switching: from text list to carrousel.

In two screens, we had covered all the needs for our service. For fun, we created a 404 error page, which we’ll let you discover (wait a few seconds).

Accuracy

Showtimes have to be up-to-date and accurate, otherwise they’re useless.

We thought we could get centralised showtimes from Google Movies and clean them up, but it proved unreliable with theatres and movies appearing some days and not others.

We had to get the showtimes directly from each theatre. This meant scraping their websites and matching movie titles with typos so that they remained consistent across theatres. The process had to be automated to avoid human error and to ensure speedy daily updates.

Levenshtein is your friend

We spent a lot of time cleaning up data and trying to find a reliable way to identify movies and match them across theatres (« Captain America 2 » = « Captain Amercia - Winter Soldier » = « Captain America - The Winter Soldier »). When it became obvious that regex would drive us crazy, we contacted Olivier, our trusted developer since 13 years. He introduced us to metaphone and the Levenshtein distance, slashed bugs and automated the scraping and movie matching process in a few days.

Clarity

Mat took care of the branding and design, coming up with the logo, colours (did you notice that the website changes colours every day to follow the Thai colour of the day?), typographical choices, spacing and lots of recommendations to turn our ugly prototype into something elegant and clear.

Sometimes we were going overboard with features and content (movie reviews, directions to theatres, tooltips, links to critics websites and trailers, maps, …), and Mat was constantly steering us back to something simpler and clearer.

Accessibility

The showtimes had to be accessible, which meant removing as many barriers as possible:

  • no plugins or JavaScript required
  • progressive enhancements: more advanced devices or browsers would get an enhanced experience, but the core content and functionality would always be there
  • ARIA roles for assistive devices
  • semantically meaningful markup
  • microformats to let software and search engines make sense of the content

A non-responsive layout is served to old versions of Internet Explorer, something trivial to generate with a CSS pre-processor.

We still have some work to do on the visual and mobility fronts to make sure that text and buttons are large enough, and text contrast is strong enough.

Speed

Mobile networks have a high latency, which is why we tried to limit the number of requests as much as possible. We lazy loaded all movie covers, only loading them when they are actually required. Icon fonts, SVG logo, merged and minified assets and aggressive caching were all part of the optimisation process.

The perception of speed can also be conveyed by using very short animations and transitions, or none at all. See how fast the theatre and movie filters work.

Battery drain

Geolocation was used sparingly, always leaving the user in control: theatres can be sorted by distance if the user wants to. No nagging request to grant permission to geolocate. This also saves resources as the GPS chip doesn’t need to be turned on needlessly.

Whenever possible, CSS animations were used instead of JavaScript animations. Another way to save resources and avoid battery drain.

Last but not least, we didn’t use any database. All content is stored in flat files and cached.

There's more to come

We started with the two biggest cinema operators in Thailand (Major & SF) and are gradually adding smaller theatres. We're tweaking the layout based on user feedback, and will be adding new features in the coming months.


Update: Mat has posted his thoughts about why we started the project.