April 29, 2024 Read 6 Min

UI/UX Audit: GSC vs. TGV

Popcorn in hand, date secured the only question left is: GSC or TGV? Dive into our detailed UI/UX analysis as we determine which cinema chain reigns supreme in delivering the smoothest movie booking journey.

Lights down, popcorn in hand, trailers rolling – the magic of the cinema experience is alive and well. 

Forget the naysayers who predicted streaming services, Netflix and Disney+, would be the death of movie theaters because foot traffic is on the rise.

In Malaysia, moviegoers are treated to a double feature of excitement, with GSC and TGV battling for their loyalty.

But with so much focus on the in-theater experience, what about the online journey?

In this audit, we’re diving into the UI/UX design of GSC and TGV’s booking platforms to see which offers a smoother, more engaging experience that keeps cinephiles back for more.

Homepage

GSC

Initial impressions — branding stands out on GSC’s homepage. Their signature yellow/gold color pops against the dark UI mode, improving readability for branding elements like the header and CTAs (calls to action).

GSC’s overall homepage design

While showcasing trending movies and promotions in the hero section is a good idea, horizontal scrolling might not be ideal. It can hinder responsive design by not translating well to different screen sizes and orientations.

Moreover, the left and right chevrons that prompt scrolling are too far apart, which disrupts user flow.

Users have to manually scroll back to the beginning of the carousel as it doesn’t loop automatically – a step contradicting the purpose of chevrons.

GSC’s hero page scrolling

Circling back to horizontal scrolling, compared to the hero section, it shines for the “showtimes” section.

Due to the limited number of content displayed, horizontal scrolling accompanied by the categories’ tabs streamlines the navigation process for the section. 

GSC’s showtimes scrolling

Following this, placing a dedicated “Top Ten” movie section with a CTA button right below is also a commendable choice.

It reduces decision fatigue through a curated browsing experience and ensures longer retention time on GSC’s site.

GSC’s Top 10 List

However, the promotions section stumbles slightly compared to its preceding sections.

Despite the vertical layout offering a clear UI, the information architecture (IA) is overbearing.

Presenting too much information at once overwhelms users. A simplified IA could’ve benefitted this section better.

GSC’s homepage promotions

TGV

Although not in a positive aspect, TGV’s homepage echoes GSC’s with a horizontal hero section and non-looping scrolling experience.

Not to mention, the buttons designed to facilitate scrolling are too small for a web browser interface.

While this sizing might be suitable for a mobile app where swiping is intuitive, it feels out of place on a desktop browser, especially considering the ample unused space around it.

TGV’s hero section

Unlike GSC’s prominent branding, TGV’s is more subtle within the UI. While not inherently negative, this subtlety makes their call-to-action buttons less obvious, potentially worsening navigation.

TGV’s overall homepage

Verdict: GSC has more positive traits that balance the negatives out.

Navigation Structure

GSC

While information transparency is usually a website virtue, GSC’s navigation structure suffers from information overload.

Cramming eight items into a single navigation bar creates a cluttered and overwhelming user experience.

GSC’s navigation bar

This clutter could be easily addressed by switching certain items into dropdown menus.

Take the “Experiences” item, for example. Instead of cluttering the navigation bar, it could be a dropdown option under “Cinemas,” where users can explore specific movie experiences offered.

The navigation bar’s flow is further disrupted by the use of a hamburger icon.

This icon placement goes against user intuition and makes it harder to establish a clear visual hierarchy.

TGV

Meanwhile, TGV takes a minimalist approach to its navigation bar, prioritizing clarity with a focus on core pages.

While this avoids the clutter unlike GSC’s design, it could benefit more from a dynamic functionality.

TGV’s navigation bar

For example, hover-over menus that reveal sub-options would provide users with additional functionality without compromising the clean aesthetic.

TGV also adopts a different approach for its navigation bar by utilizing left alignment.

This corresponds with user reading patterns and improves visual hierarchy, especially when other elements might be right-aligned. It guides the user’s eye effectively and promotes scannability.

Verdict: TGV by a slight difference

Booking Experience

GSC

With GSC’s booking experience, users are first presented with basic information upon hovering on each movie card.

Immediate access to information this way streamlines user flow as it minimizes the number of actions required to get basic information. 

Furthermore, the immediate “Buy Tickets” CTA button also makes it faster for users with a movie already in mind. A tendency for many visiting movie booking platforms. 

Movies page overview

However, merits start to deteriorate upon selecting a movie. For starters, users are presented with a wall of text listing all available cinema locations and showtimes. This overwhelming density of information can be difficult to process. 

GSC’s showtimes and location selection

This information overload is more likely to confuse users than help them. It creates a situation of cognitive overload, ultimately hurting readability and making the booking process counterproductive.

It also doesn’t help GSC’s case when the booking experience requires users to sign up or login.

Adding an extra step to the booking process interrupts user flow and may deter them from completing their actions.

It increases abandonment rates and pushes them to visit more seamless booking platforms, i.e. GSC’s competitors.

GSC’s booking process

TGV

A drastic difference from GSC, TGV’s booking experience is seamless and visually coherent. TGV presents its available locations and showtimes in a readable and streamlined way with 

  • Dropdown navigation tabs
  • Color-coded indicators
  • Differentiated seating icons
  • Digestible information segmentation
TGV’s movies page overview

And bonus — TGV allows moviegoers to book tickets as guests. Not only does it reduce friction in the checkout process, but it also increases conversion rates by minimizing barriers to completing a purchase. 

TGV’s booking process

Verdict: TGV

Cinemas Page

GSC

From a usability standpoint, merit goes to GSC for the filtering function on this page. It allows visitors to narrow options for a more focused experience and expedites the selection process. 

Filtering function

However, the inclusion of the cinema entrance photos, while aiming to provide a visual touchpoint, has questionable utility.

Although it might enhance aesthetics and aid in identification, it comes at a cost.  They consume valuable screen real estate and potentially distract users from more critical information.

GSC’s cinema thumbnails

Visual hierarchy also falters. The packed layout and poor contrast between the text and the background images make it difficult to distinguish different elements.

Thus, significantly impairing readability and escalating user frustration.

GSC cinemas visual hierarchy

The page suffers too from overly complicated information access and ineffective navigation.

Users must hover over both a cinema photo and an ambiguous ‘i’ icon to view crucial cinema details, a process that isn’t intuitive.

It may lead to confusion due to the icon’s non-interactive appearance. 

GSC’s cinemas’ information access

TGV

With TGV, its approach to its cinemas page suggests a commitment to simplicity. 

The page’s spacious layout, coupled with strong contrast, greatly enhances scannability.

The clear differentiation between information and showtime buttons, emphasizing the latter, demonstrates a keen understanding of user priorities. 

TGV’s cinemas page overview

Further translating their users’ needs, TGV integrates Google Maps within the cinema’s information page. This helps with location visualization which increases users’ confidence and tendency to visit an unfamiliar place. 

Google Maps integration

The page also has a seamless user flow that transitions cinema listings to specific showtimes, with automatic filtering by selected cinema.

It optimizes the booking experience for maximum efficiency and user satisfaction.

Verdict: TGV

And the Oscars goes to…

TGV!

By prioritizing clarity, user flow efficiency, and a streamlined booking process, its commitment to user-centric principles shines throughout. 

With its visually coherent design, frictionless booking experience, and well-structured navigation structure, TGV offers a more intuitive and satisfying online experience for moviegoers. 

Although there is room for improvement, GSC has stronger branding and a more focused selection process with its efficient filtering functionality.

Frankly, it seems GSC’s design benefits them more than their users, which isn’t the best approach if their goal is lifelong, repetitive users.

Putting the ‘user’ in user experience

As we’ve seen from this audit, a well-crafted UI/UX design can significantly impact a user’s journey, influencing everything from browsing ease to conversion rates. 

At Snappymob, we understand this power and channel it to better understanding of user empathy and meticulous attention to detail. 

We take pride in meticulously analyzing user behavior and crafting interfaces that anticipate their needs. 

If designing digital experiences that resonate with your users and turn them into loyal advocates is your goal, Snappymob is the design partner you need. 

Get a winning UI/UX design today, your free consultation awaits.