top of page
Search

Movie booking responsive website - Case Study

  • Writer: Noelia - Yukuri
    Noelia - Yukuri
  • Oct 11, 2022
  • 4 min read

Updated: Oct 14, 2022

In order to increase sales, Hollywood Theatre wants to update its website to reflect the new era of marketing. Among the main features of the pages will be the ability to buy tickets online, download them, and show them at their local cinema easily, reserve tickets for future films, and receive newsletters about new releases.

Throughout this case study, I will present the research and testing that led me to the design decision.

The Challenge

Technology and smartphones have made it increasingly common to carry out daily tasks, order food, make purchases, and even buy tickets for events and movies using them. Therefore, Hollywood Theatre is updating its website to meet the needs of customers in order to increase sales.


The Goal

To create a website that helps cinema customers keep in touch with new releases, what's on the billboard and upcoming film events, as well as manage and buy tickets on the go.


My Design Process

My design decisions were supported by research and feedback in order to create a product that meets the needs of the client and users.

Research Plan

In order to gain a better understanding of the habits, pain points, and highlights of those who regularly and occasionally go to the movies, I conducted a research study.

Preparing an interview outline and a research plan was the first step. The questions were open-ended, and I avoided any terminology that would lead to conclusions. My primary research goals are outlined below.

  • Understand the experience of online ticket shopping.

  • Consider the daily reasons why users buy tickets online and how this may affect the creation of a website.

  • Identify problems and frustrations they face when buying tickets online.

  • Identify the top three important features users prefer during online shopping.

The following are the pain points I identified after this research.

  1. No time The schedules of most users are usually planned in advance for movie visits. So have the oportunity to do this online is a big help for them.

  2. Mental Health In some cases, users find queues to buy movie tickets to be stressful when going to the movies.

  3. No tickets In some cases, users have been unable to watch the movie they wanted in their free time because there were no tickets left.

  4. Convenience The majority of users, however, prefer to purchase movie tickets before moving.

Based on this information I create personas to help me emphasize more with the user and their needs and frustations.


Competitive Audit

I perform a competitive audit to gain a deeper understanding of the product. My focus was on the browsing experience, accessibility, and how the website responded on mobile devices and desktop. One of the insights I gained was that most of our competitors' sites were slow and cluttered.

With this in mind I started the creative process.

Web flow

Ideate

I identify the information and the route that the web will follow before creating the wireframes. As a result of the competitive audit, I began the ideation phase. To create the wireframes, I used the crazy eight technique. Create wireframes and determine how each page will behave in different sizes, desktop, tablets and mobiles.

After creating the wireframes manually, digitize them and create a low-fi prototype. I kept a classic user flow to facilitate navigation for less experienced users.This is a very important step that I could use to once again review my user flow before prototyping. This also allowed me to quickly visualize the features before starting the Hi-fi design.


Desktop wireframe for low-fi prototype

Usability Study

I conducted a usability test to determine what issues users might encounter when choosing a movie, reserving a seat, and purchasing tickets. With 5 participants between the ages of 17 and 60, I conducted an unmoderated usability study.

After conducting this usability test, I identified the following findings.

  • 3 out of 5 participants find it difficult to understand some labels.

  • 4 out of 5 participants did not notice that they can check the profile to download the tickets.

  • 3 out of 5 participants find the fact that they have to go to the mobile's download folder to find the ticket.

As a result of this insight, I made some changes on the design, such as adding text to the buttons to explain what the button does and add notification that inform them about their progress. After this is time to construct a hi-fi prototype.

By applying the material design guidelines to the branding, I was able to keep the page cohesive with the company's branding while maintaining a recognizable view for users. This will help me work faster and make less mistakes that can slow me down and my coworkers.


Hi-fi Prototype

Since this is a web site that a high cuantity of users are going to come every day and mostly on the weekends my main goal is to make a intuitive and fast website, no one likes to wait while buying a ticket movie!

This way I created a user-friendly, intuitive and frictionless interface experience.


Click here to see the hi-fi prototype desktop version or here for the phone one.


Next Steps

For this project next step I will work closely with the developers team to develop and test the website.

See how users will interact with the website and hear their feedback will be key to help me see what feature will be needed and future opportunities that will help adding value to the company.


Opportunities

The next steps are to create a service option that allows users to buy drinks and snacks with the tickets. This option will increase sales of drinks and popcorn. Users will find it convenient to just go to the cinema and collect their order.


"I have learned so much from these project. There are a lot of big businesses in the movie industry, which has pushed me to see how I can make this stand out from the others, offer different solutions for users and be able to present this in an eye-catching way without sacrificing usability."

Thanks for reding

 
 
 

Comments


bottom of page