My Framer Site

CNM

Redesigning the movie theater experience

Type

Class Project

Tools

Figma

Duration

8 weeks

VIEW PROTOTYPE HERE

OVERVIEW

How might we redesign a website to make movie ticket purchasing as simple as possible?

Problem

• Phone calls or in-person visits to buy tickets waste time

• No access to movie details without calling or visiting

• Phone calls and in-person transactions create bottlenecks and increase staff workload

Goals

• Create a mobile-friendly site for online ticket purchasing and seat selection

• Show live seat availability, movie trailers, and instant ticket confirmation

My Role

• Research competitor landscape

• Develop user personas

• Create wireframes and prototypes

• Conduct user testing

Problem
• Phone calls or in-person visits to buy tickets waste time

• No access to movie details without calling or visiting

• Phone calls and in-person transactions create bottlenecks and increase staff workload
Goals
• Create a mobile-friendly site for online ticket purchasing and seat selection

• Show live seat availability, movie trailers, and instant ticket confirmation
My Role
• Research competitor landscape

• Develop user personas

• Create wireframes and prototypes

• Conduct user testing

Problem
• Phone calls or in-person visits to check showtimes and buy tickets waste time

• No access to movie details, showtimes, pricing, or policies without calling or visiting.

• Phone calls and in-person transactions create bottlenecks and increase staff workload.
Goals
• Create a mobile-friendly site for online ticket purchasing and seat selection

• Show live seat availability, movie trailers, synopses, and instant ticket confirmation.

• Streamline ticket booking, reduce box office wait times, and track sales for improved planning.
My Role
• Research competitor landscape

• Develop user personas

• Create wireframes and prototypes

• Conduct user testing

SOLUTION

Streamline Ticket Order

Users are able to complete a movie ticket purchase

Streamline Ticket Order

Users are able to complete a movie ticket purchase

Streamline Ticket Order

Users are able to complete a movie ticket purchase

Movie Preview

Users are able to preview what movies are currently showing at the theaters

Movie Preview

Users are able to preview what movies are currently showing at the theaters

Movie Preview

Users are able to preview what movies are currently showing at the theaters

INITIAL PROBLEM DISCOVERY

Going to the theater…

With the rise of streaming services, movie theater goers have been gradually declining. As someone passionate about movies I wanted to take a look at movie theater websites to see if there were areas of improvement.

Waiting in line

Movie Previews

Online Support

Waiting in line
Movie Previews
Online Support
Waiting in line
Movie Previews
Online Support
Waiting in line
Movie Previews
Online Support
Waiting in line
Movie Previews
Online Support

Waiting in line
Movie Previews
Online Support
Waiting in line
Movie Previews
Online Support
Waiting in line
Movie Previews
Online Support
Waiting in line
Movie Previews
Online Support

COMPETITIVE ANALYSIS

Where are people going to watch movies?

AMC

Ingredient Checker

Cinepolis

Allows for routine creation

Netflix

Most popular overall

PERSONA + USER JOURNEY MAP

Ashley Park

Age:

Education:

Hometown:

Family:

Occupation:

30 yrs old
Masters Degree
San Francisco, CA
Married, No Kids
Marketing

Frustrations:

• Balancing a busy work schedule with personal leisure • activities
• Booking multiple seats for friends or family with minimal hassle
• Finding new movies to watch without having to look up release dates

Joshua Maddy

Age:

Education:

Hometown:

Family:

Occupation:

45 yrs old
BA in business
Newark, New Jersey
Married, 2 kids
Freelance writer

Frustrations:

• Finding accurate and up-to-date information about seat accessibility
• Booking tickets for accessible seating can sometimes be not clearly indicated
• Some movie theater websites are not user-friendly or optimized for accessibility

Alex is overwhelmed with starting a skincare routine…

USER FLOW

Ticket Booking Flow

By simulating the ticket reservation process I was able to identify the critical information users need at each step - from browsing available movies to selecting showtimes and choosing seats.

WIREFRAMES + INITIAL PROTOTYPE

Creating a sitemap organized what pages I wanted to include and how I would need to structure my homepage

HomePage

Movie Showtimes

Seat Selection

Payment Info

Confirmation Page

Designing for a desktop proved challenging to adapt pages for multiple screen sizes

Start: Movie Select

Step 1: Select Seats

Step 2: Select Ticket

Step 3: Select Payment Method

Start: Movie Select
Step 1: Select Seats
Step 2: Select Ticket
Step 3: Select Payment Method
Start: Movie Select
Step 1: Select Seats
Step 2: Select Ticket
Step 3: Select Payment Method
Start: Movie Select
Step 1: Select Seats
Step 2: Select Ticket
Step 3: Select Payment Method
Start: Movie Select
Step 1: Select Seats
Step 2: Select Ticket
Step 3: Select Payment Method

Start: Movie Select
Step 1: Select Seats
Step 2: Select Ticket
Step 3: Select Payment Method
Start: Movie Select
Step 1: Select Seats
Step 2: Select Ticket
Step 3: Select Payment Method
Start: Movie Select
Step 1: Select Seats
Step 2: Select Ticket
Step 3: Select Payment Method
Start: Movie Select
Step 1: Select Seats
Step 2: Select Ticket
Step 3: Select Payment Method

TESTING + IMPROVEMENTS

To quantify the overall usability of the website, I implemented a system usability scale (SUS), which provided concrete metrics for measuring the interface's ease of use. This standardized approach to gathering feedback helped identify specific pain points and areas where users encountered difficulties during their booking journey. The numerical data from the SUS, combined with qualitative observations from the testing sessions, guided my decision-making process for subsequent prototype iterations.

DESIGN SYSTEM

REFLECTION

By the end of the project, I had made a platform that streamlines the ticket booking experience for movie watchers by providing a consistent interface across both desktop and mobile devices. I was able to display the prototype’s ability to provide a user with the following experience:

• Seamless Ticket Booking: Users can easily navigate from browsing movies to seat selection.

• Responsive Design: A consistent, smooth experience across desktop and mobile.

• Enhanced User Flow: The design streamlines booking, making it efficient and accessible.

If I Had More Time…

• Movie previews

• Accessibility considerations

ABOUT

WORK

RESUME

jane.vo98@gmail.com