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).
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.
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.
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.
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.
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.
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.
Verdict: GSC has more positive traits that balance the negatives out.
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.
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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 require.
Get a winning UI/UX design today, your free consultation awaits.