HACK-IT!

Design Challenge

Create a fully functional high fidelity mock up of a mobile application that allows users to book a seat in a movie theatre, with authentication required (email and password) before finalizing the booking.

This challenge had a timeline of 2 weeks.

Evaluation Criteria

The evaluation criteria was split into 4 equal-weighted components:

• Problem Analysis: Thinking and empathizing from a user’s perspective for the best solution
• Interface Design: Showing awareness of design principles and trends
• User Experience: Creating an intuitive user experience, while upholding usability and accessibility
• Presentation: Demonstration of thought-process when ideating for and solving a user problem

Design Methodology

My design process for this challenge followed the double-diamond design model as a guiding framework.

Discover: Market Research

To better understand the existing solutions to movie booking in Singapore, I examined 3 mobile apps from popular cinema companies.

1. Golden Village
2. Cathay Cineplex
3. Filmgarde Cineplexes

In examining the mobile apps of these 3 companies, I noted the number of different screens required in the user flow of the process for successfully booking a movie ticket.

The number of screens from launching the app until the completion of the movie booking is recorded below:

Discover: User Research

To better understand user needs and concerns when booking movie tickets with a mobile app, I conducted discovery sessions with 10 people, with ages ranging from 18 to 50+.

Each discovery session consisted of 2 parts:

1. User Interview: To learn more about their movie-watching habits
   • How often they watched movies
   • Motivations for watching movies
   • Thought process when deciding to watch a movie
   • Experience with booking tickets for a movie
2. Usability Test: To observe user interaction with the 3 existing cinema mobile apps

   Each participant was tasked with noting down their interactions with the app with the pre-defined goal of successfully booking 2 seats for a movie.

Define: User Interview – Motivations

From the user interviews conducted with 10 respondents, 2 distinct groups of motivations for movie-goers were identified:

1. Time-motivated movie-goers
   • Watched movies as an activity to fill up a specific period of time
   • Picky regarding cinema location and movie screening time
   • Felt that none of the cinema mobile apps addressed their needs
2. Movie-motivated movie-goers
   • Already knew what movie they wanted to watch
   • Not picky regarding cinema location and movie screening time

Define: User Interview – Mobile App Usage

9 out of 10 of the participants interviewed have never used a mobile app to book tickets for a movie.

The reasons for not using a mobile app are:

• I do not want to install the app on my phone
• There are too many steps to book movie tickets in the mobile app
• I do not want to pay booking fees, so I book at the cinema directly
• I use the cinema's website on my laptop as it is easier to view all the movies, cinemas, and timings

1 out of 10 of the participants interviewed used a mobile app to book seats in a movie theatre.

The reasons for using the mobile app are:

• I use my phone for everything, so I book tickets with the mobile app
• It is convenient to be able to book tickets anywhere I am with the mobile app

Define: User Interview – Pain Points

The following pain points were identified from common themes raised during the user interviews:

• Unable to filter movies by time-frame
• Information on the mobile app is too overwhelming and messy
• The booking process on the mobile app is long and tedious

Define: Usability Test

Usability tests for the 3 cinema mobile apps were also done by the 10 interview participants. The participants were given the goal of booking 2 tickets for a movie, and noted down their thoughts for each step of the user journey.

The following findings were identified:

Define: Problem Statements

From the findings of the User Interviews and Usability Tests, the following problem statements are defined, along with "how might we" questions to help with ideation:

1. Users are unable to filter movies by time-frame
   • How might we improve the selection process so that users can filter through movies easily?
2. Users are overwhelmed by the information displayed when browsing the selection of movies, locations, and timings
   • How might we present all the information without users' cognitive overload?
3. Users are frustrated by the long process for booking movie tickets through the mobile app
   • How might we shorten the user journey so that users can book their movie faster?

Develop: Assumptions

The following assumptions are made for the ideation and prototyping phases of the challenge:

• There is only 1 ticket type (e.g. No senior citizen or student tickets)
• The focus of the challenge is on the ticket purchase flow, so upsells (e.g. food and premium seats) will not be considered

Develop: Advanced Filtering Interface

Users are unable to filter movies by time-frame: How might we improve the selection process so that users can filter through movies easily?

1. Two filters (highlighted in green) for (1) Date and Time and (2) Location are available, designed for the needs of time-motivated movie-goers.
2. Selecting a specific movie (highlighed in blue) will navigate to a screen to view available Date and Times, and Locations for the movie, designed for the needs of movie-motivated movie-goers.

Develop: Movie Information Presentation

Users are overwhelmed by the information displayed when browsing the selection of movies, locations, and timings: How might we present all the information without users' cognitive overload?

Drawing inspiration from the Golden Village mobile app, I designed an interface which allowed users to easily view and select movie timings based on date and location.

Different sections are separated with visual hierarchy, and options within each section overflow and scroll horizontally.

Users are able to breakdown the information, processing it by sections, reducing cognitive load.

Develop: Shortened User Journey

Users are frustrated by the long process for booking movie tickets through the mobile app: How might we shorten the user journey so that users can book their movie faster?

I designed a new user journey that shortened the number of screens needed to book movie tickets from an average of 14 screens to a new count of 7 (minimum) – 10 (maximum) screens.

Develop: Low & High Fidelity Prototypes

Previews of the Figma projects showing the user journey and interactions between various screens for both the low and high fidelity prototypes for the mobile app.

Live Prototypes

Deliver: Evaluation

After the hi-fi prototype had been completed, I conducted quick user interviews and usability tests with 6 participants.

There were 2 main purposes for this round of user tests:

1. Observe user interactions with the prototype for usability
2. Establish if the 3 problem statements have been solved

Deliver: Evaluation Findings

With respect to the 3 problem statements identified:

1. Users are unable to filter movies by time-frame

   ✅ Users are now able to filter by date, time, and location

2. Users are overwhelmed by the information displayed when browsing the selection of movies, locations, and timings

   ✅ Users found the method of displaying information was less confusing and easier

3. Users are frustrated by the long process for booking movie tickets through the mobile app

   ✅ Users reacted positively to the noticeably shorter user journey to book a movie ticket

Reflections: Limitations

Design is an iterative process where a product’s cycle is (design, ship, test, analyze) and repeat.

Due to the 14 day limitation of the challenge, as well as it being a one-time assignment, new findings and feedback from interviewed participants were unable to be analyzed and implemented.

If worked on as an actual product, the mobile app would be constantly analyzed and iterated upon, like that of a true iterative product design cycle