Responsive Web Design For a Movie Theater’s Ticket Purchasing Service


Project Overview

Background

CineTix is a responsive website that specializes in a simplified movie filtering feature. It provides predetermined recommendations based on the people with whom users are going to the movies. CineTix wants to make the movie selection process easier for users who are not tapped in to the movie industry due to a lack of interest or a lack of time outside of work and family commitments. The overall website design is simple and easy to use so that users can quickly select and purchase movie tickets. Going to the movies should be fun, not a burden.


Objectives

Create a responsive website design
Create movie poster visuals

Project

Responsive website design, concept.


Role

UX / UI Designer


Project Duration

5 months


Team

Self-directed, with feedback from peers


Problem

Movie-goers (both avid and casual) love to go to the movies, however many movie-goers are facing difficulty with personal ability to navigate technology, unfamilarity of movies in theaters, and time-limiting obligations that make the tasks of selecting a movie to see and purchasing tickets a challenge.


Solution

Help users select movies they will enjoy and purchase tickets faster


CineTix Website Mockup Image

Research


I wanted to extend my compassion to real people and hear their personal experiences in selecting movies and purchasing tickets. I wanted to hear their thoughts on the overall process. I connected with working adults online who have varying interest in movies. I sent out an anonymous survey via a short questionnaire with several questions focused on the feedback of their experiences selecting movies and purchasing tickets. The survey received 16 responses.

See the survey questions here.

In analyzing the responses, I realized users shared some major pain points.



Pain points

Adults are faced with busy schedules
Working adults have many time consuming commitments they must attend to before they can focus on leisure activities. Often an outing at the movies is a spur of the moment plan, but many working adults are too busy to take the time to research all current movies that theaters are showing. This often leads to movie selection that may not fit into the user’s taste, leading them to see a movie they may not enjoy.

Checkout is time-consuming
Popular movie ticket purchasing services have bloated checkout processes to purchase movie tickets. This can become very time-consuming for users who have limited time to spend outside of the pressing commitments in their day.

Unwanted technological limitations
Many day-to-day services, including movie ticket purchasing, has become streamlined through apps. While many companies streamline simple checkout processes, often the shopping experience is bloated and complicated to navigate without practice. This leads to alienation of users who are not as tech-savvy or who may not have the time necessary to learn a complex digital tool.


Competitive Analysis

There are several options in the market from which adults can purchase movie tickets. Most are robust experiences including extras such as movie reviews, trailers, and movie industry news. One of the biggest problems in the most popular options designed for purchasing movie tickets is the large amount of information presented on the screen. A person can become overwhelmed by large amounts of information and be misdirected from their original task, wasting time. This is where a lot of users drop out and opt in to having others purchase tickets for them or to wait to purchase tickets at the theater from the ticketing stand. I want to solve this problem by simplifying the displayed information to what is actually needed by users, helping the users stay focused on what they need to purchase and to avoid being caught in over stimulation.

Further, no service is found to offer suggestions of movies based on personal interests of specific users and who they are seeing a movie with. I think CineTix can fill this gap by offering simplied filtering features that help to give real recommendations of movies to people based on their interests and the party they are seeing a movie with. Going to the movies with your four year old is going to need different recommendations than if you were going to the movies with a date.


Competitor Analysis

Key Research Insights

  • Rising awareness around the high costs of movie tickets.
  • With Covid a large interest in movie watching turned to online streaming methods, however not every service offers this feature.
  • A large user pain in movie ticket purchasing apps is perks meant to attract customers are behind a pay wall. There is often a free version for those who do not go to the movies often, but there is so little offered that membership is not valid.
  • Users who simply want to purchase movie tickets are overwhelmed by the large amounts of "extras" to shuffle through on movie ticket purchasing sites that are meant to expand on the movie watching experience.
  • Users who are not technologically savvy are often not considered, resulting in complex layouts to filter through to make the selection of what movie to see before getting to checkout process.


  • User Personas

    Based on these findings, I created two personas who represent the target users I empathized with in the research phase:

    CineTix Website Personas Profiles Image

    Strategy


    ‘How Might We’ Statements

    • How might we help simplify the selection process when choosing a movie to see in the theaters?
    • How can we respect the small avalibility of time that working adults have?
    • How can we help the personas utilize technology efficiently to make their purchase?

    I wanted to empathize with my personas (River and Emerson) and ensure the service would cover their needs of selecting a movie and purchasing tickets around time constraints. These needs are not being properly fullfilled currently in market. This service could be an opportunity to fulfill the needs of non technical working adults with large time constraints in their day.

    In addition, competitive analysis has shown that services do not offer users filtering options around personal interests of the company they are seeing the movie with. That's why having dedicated filtering features based on who the movie is being seen with built into the service is an important and unique feature of this product.




    User Journey Map

    Persona: River
    Goal: Have easier access to faster ticket purchasing for people who are not tech savvy.


    CineTix Website User Journey Map Image



    Site Map

    The green bubbles represent the top navigation bar options that users will have access to almost all the time. Home screen would function as a hub that leads to all other functions of the product, and the ultimate return point for users so they know they have finished a flow.


    CineTix Site Map Image


    Design

    Sketches

    My goal was to create a simple layout for users who would be juggling daily personal life and work commitments and shopping for movie tickets for a few hours of leisure time. I wanted my users to feel like their needs are met and their limited time is respected.

    I began brainstorming possible layouts through sketches.

    These initial ideas turned from sketches...


    CineTix Sketches Image

    CineTix Sketches Image

    CineTix Sketches Image



    Into wireframes...

    CineTix WIREFRAMES Image


    Low-Fidelity Usability Test

    Participants

    • 5 participants, age range 29-40, 3 female and 2 male, enjoy seeing movies in the theater at least one time a year.
    • Method: Unmoderated

    Tasks

    • From the home page, navigate to locate a movie.
    • Complete checkout cycle.
    • From the home page locate the Search By Category section.

    Key Outcomes

    • 100% of the users were able to accomplish all tasks.
    • Users appreciate the simplicity of the website design making it quick for them to navigate through.
    • Users like the idea of filtering movies by who they are seeing movies with. This makes selection of appropriate films easier.
    • Most users did not realize there was a task break in selecting a movie and completing the checkout process.
    • Some users were confused by an alternitive movies recommendation in checkout cycle.
    • Some users were not confident they would want to switch to a new service as they are very used to how their service of choice works and do not want to learn a new service.

    “I like the idea about who are you seeing it with, it's a really cool feature. I think that would be great for people who are not as tapped in to the movie circuit”

    “This was super simple and super streamlined, actually simpler and more streamlined than most of the professional websites I go through.”


    The Designs

    I wanted to make the overall design simple and not overwhelming. A dark background was choosen to make it an easier experience on the eyes for users.
    With the consideration of user feedback, the final designs were tweaked accordingly.


    CineTix HIFI MOCKUP Image


    Style Guide

    For this design I aimed to use cool calm colors that present a relaxed appearance.


    CineTix Style Guide Image


    Desktop Design

    CineTix Designs Image


    Clickthrough Prototype






    Design Adaptation for Other Devices

    The desktop design was scaled down to other device sizes to allow users easy access to the service from their device of preference. Working adults are strapped for time in the day and making a spontanious purchase of a movie ticket may occur from a desktop computer at the office, from a tablet-sized device while spending time with family, or from a mobile site while cooking dinner. With these considerations in mind, the design of the service changed to meet the functions of a variety of device sizes popularly used by consumers.

    CineTix Website Hero Image


    Conclusion and After-thoughts

    CineTix makes users feel like their time is valuable. The simplicity of the design, the point information presented on screen, and the unique Search By Category function that allows for faster movie selection, make ticket purchasing a smooth and fast experience.

    Never underestimate any idea.
    I wanted to provide unique filtering options to users to help speed up selection of movies around who they are seeing movies with. However, I doubted the idea in mind would be ideal for users. That being said, during user interviews and usability studies I found that users were highly receptive to this filtering function, even offering many ideas to improve on it, helping the product evolve into a great feature that fills users’ needs.

    As a working adult who loves entertainment, this service formed out of the personal struggles I have experienced selecting movies to see on popularly used services. After seeing many other working adults have the same struggles, I believe this service would offer much needed aid to working adults who are not tapped in to the movie industry and have limited time in their day to sift through all the movie releases and find a movie that will work for their personal tastes, as well as for the company they are going to the theater with.

    Next Steps:

    Conduct further usability studies to evaluate the current effectiveness of the service by how well it addresses user pain points and to determine any new areas of need to address.



    Thank you for reading CineTix case study!

    CineTix Website Let’s Connect Image