Major Cineplex Redesign

Major Cineplex ticket buying flow redesign

Concept, Responsive web design

  • Movie ticketing buying flow
  • Mobile UI
  • Responsive Web app UI
  • Adobe XD
  • Adobe Photoshop

Overview

This is one of my UX design projects for the Google UX Design Professional Certificate Course. Major Cineplex is one of the most famous cinemas in Thailand.

Problem

The current major cineplex website has not-so-easy visuals in many areas, such as the landing page, selecting seats, and the website is full of ads.

Goal

Be able to see "Now Showing" movies easily; better flow for buying tickets online; better visuals for selecting seats; and visual overhaul.

Users

For users who find the current web app design distracting and it is difficult to buy a ticket.

My Role

As this is a concept UX/UI design project, I had to work through the entire process, such as creating wireframes, low-fidelity, high-fidelity, prototypes, etc. I put more focus on visual design.

Preparing the journey

Based on the small research for this concept, I made some persona users to pinpoint their pain points and emotions.

Then I created a user journey map of how a user would go through the process of purchasing a movie ticket online to help me identify what will go smoothly, potential pain points, and improvements to make.

The site map was also created to give an overview of the website in order to provide a structurally organized experience for users to navigate it better and efficiently.

Meet the user

Persona-Concept

Draw User Journey Map

The user journey map created upon how a user would experience on the process of buying a movie ticket online.

Prepare Site Map

The concept site map of the Major Cineplex website.

Wireframes

Before making anything, I sketched and ideated some paper wireframes to get a feel for what the main landing page would look like. After that, they removed the ideas that would not work, added some new ones, and refined the sketches to create low-fidelity wireframes.

Wireframes

Paper wireframes of landing page.

Wireframe 1Wireframe 2Wireframe 3Wireframe 4Wireframe 5Wireframe 6
actual screens 1actual screens 2actual screens 3actual screens 4actual screens 5actual screens 6

Style Guide

The use of strong, bold, and grand-feeling is perfect for the red-carpet style experience of a movie theater. The brownish gold gradient creates a feeling for customers to make sure this is the place where they will get the best movie experience. The typeface here is the iOS default, SF Compact family, as they are designed for readability in UI design, which is important in the process of buying movie tickets for customers.

Style Guide

Mockups

As a movie enthusiast myself, the concept of redesigning the movie ticket buying experience is a joy. It automatically teaches me some Adobe XD features, makes me research other inspirations, and helps me understand which features are a must to include in a cinema website. Although I was not able to redesign the whole website yet, I would love to create more and cooperate with the Major Cinema group in real life to improve upon their website for a better user experience.

slide
slide
slide
slide

What I learned

As a movie enthusiast myself, the concept of redesigning the movie ticket buying experience is a joy. It automatically teaches me some Adobe XD features, makes me research other inspirations, and helps me understand which features are a must to include in a cinema website. Although I was not able to redesign the whole website yet, I would love to create more and cooperate with the Major Cinema group in real life to improve upon their website for a better user experience.