MOVIEMOVIE

Jun 2023

Designing a Hong Kong based movie reservation app that allow users, mainly local citizens residing near the Eastern district, to easily use both cash and credit to reserve tickets ahead of time.

Completed in pursuit of Google UX Design Professional Certificate

Tool Used: Figma

The Project

  • The Context

    MOVIEMOVIE is a local cinema located in Taikoo, an Eastern district of Hong Kong. Most citizens in Hong Kong, particularly elderlies mainly use cash for daily monetary transactions.

    Thus, to get ideal seats ahead of time, especially in times like new movie releases or popular times (weekend or night times), citizens often have to purchase movie tickets in person, making two trips to the cinema in total.

  • The Problem

    Users are mainly split into two groups: users that pay by credit by using MOVIEMOVIE's online website, or users that pay by cash and may have to make two trips in person.

    Both users face different pain points, where credit payers have to re-enter their card information every time they purchase a ticket, and cash payers may have to make multiple trips to reserve ideal tickets.

  • The Goal

    Design a centralized seat reservation app for both user segments which will let users reserve MOVIEMOVIE tickets ahead of time (reserve now, pay later) regardless of payment option.

    The solution is also designed to address the pain points listed following this section.

Main User Pain Points

  • Payment Methods

    Users who pay by cash can only do so through in-person purchasing, while online payers may have to input their information multiple times if purchasing multiple tickets

  • Functionality

    There are currently no options to cancel or change online tickets post payment, which can push users away from purchasing tickets online

  • Accessibility

    Pop ups and advertisements on the current website are often distracting and confuse users during the seat reservation process

  • Discovery

    Cash payers are often not made aware of new movie releases and their relevant contexts, as they only hear about new movies through word of mouth or in-person advertisements.

The Process: From Hand-Drawn to Low-Fidelity Wireframes

Ideation of the reservation app's user flow

Ideation of the reservation app's user flow

Initial Paper Wireframes

Initial Paper Wireframes

Final Digital Lo-fi Wireframes

Final Digital Lo-fi Wireframes

Iteration of Movie Information Page

Iteration of Movie Information Page

Iteration of Showtime Display Page

Iteration of Showtime Display Page

Iteration of Payment Option Page

Iteration of Payment Option Page

Iteration of Confirmation Page

Iteration of Confirmation Page

The Results

Here is the final iteration and prototype of the reservation app I designed. Some of the key points and changes I made include:

1. Colour coding the movie times to inform users seat availability in each showing

2. Making call-to-action buttons yellow and display information pink, keeping the colour scheme consistent for users throughout the checkout process

3. Adding shading and brightness of call-to-action buttons to guide user's’ attention

4. Ensuring sufficient white space is used between information (e.g. level of details in the movie information screen) so users can distinguish the importance of information distinctively

Thank you for reading!