Home

About

Resume

A responsive website design
for movie theater seat reservations.

Planeta Cinema

A responsive website design for movie theater seat reservations.

Planeta Cinema

A responsive website design for movie theater seat reservations.

Planeta Cinema

Project Overview

While reserving seats is returning to be a common occurrence, applications of movie theaters have yet to grasp the usefulness and visual appeal connected with the thrill of enjoying the movie show. Many users find the online approach to be intimidating, time-consuming, and tedious.

This concept project highlights important areas of opportunities and examines how the reserving process may be improved to allow users to search, choose, book, and pay for movie tickets more quickly, easily, and effectively online.

The case study focuses on research, analytics, and innovative designs that help to enhance the whole seat reservation process.

Responsibilities

Conducting unmoderated usability studies, designing paper, and digital wireframes and mockups, prototyping (Lo-Fi and Ho-Fi), and iteration of them.

My Role

UX designer & UX researcher

Project Duration

7 Jan-15 Mar 2022

Using the Design Thinking Process

Using the Design
Thinking Process

Using the Design
Thinking Process

I sought to DISCOVER how people reserve seats, DEFINE the user and site requirements, DESIGN solutions in the form of wireframes and branding, and TEST a prototype on real users.

Discovery

Discovery

The Problem

Due to the global pandemic, users started to watch movies at home, meaning they attend movie theaters more and more rarely.

Thus, customers expect to have the best intuitive website navigation and user-friendly features in order to quickly and easily make a seat reservation.

The Goal

Improve users’ overall experience and usability when searching for, reserving, and paying for cinema tickets online.

What was Discovered

After completing my first round of surveys, I found that:


Most commonly, participants would like changes or improvements to:


  • User-friendly interface

  • Movie selection possibilities should not be overwhelming and confusing

  • Overall procedure, since it takes too long


In addition, users pointed out other issues they face:


  • Users have difficulties finding specific movies or cinemas.

  • The app does not show the user which cinema is closest to the user’s location.

  • Users are confused when choosing a seat when booking.

Research

Research

Research Goals

  • Understand people’s motivations, opinions, and expectations around reserving seats, both in-personal and virtual. 

  • Uncover existing design patterns that could be applied to the Planeta Cinema site.


    Methodologies:

  • Individual interviews

  • Competitive analysis

Interviews

I conducted user interviews to get a better understanding of the problem. I have chosen this research method to highlight what a user or group of users says, does, thinks, and feels. I have interviewed four people who like going to the cinema. During the interview, the participants were asked general and specific questions such as "Why do you like watching movies at the movie theaters?" and "What are the problems you face while placing a seat reservation?".

I based my questions on how the participants feel and what they say when they use an application in order to reserve a seat. Thus, I managed to point out the main insights from the interviews:

  • Users prefer to see what the seat they reserved looks like.

  • Users want to have a language filtering system.

  • Users lack a quick seat reservation process.

Based on the obtained insights, I have implemented necessary changes to my design.

Personas

With the tools and knowledge discovered from my user research, I created two personas to best depict the user group for my design. It is a necessary way to identify common pain points, which are UX issues that frustrate and block the user from getting what they need from a product. I highlighted the persona's goals, and frustrations. I referred to them throughout the entire product development process.


Problem Statement

Vitaliy is a busy professional who needs intuitive website navigation and user-friendly features because they want to quickly and easily make a seat reservation.

Problem Statement

Vitaliy is a busy professional who needs intuitive website navigation and user-friendly features because they want to quickly and easily make a seat reservation.

Problem Statement

Vitaliy is a busy professional who needs intuitive website navigation and user-friendly features because they want to quickly and easily make a seat reservation.

Problem Statement

Vitaliy is a busy professional who needs intuitive website navigation and user-friendly features because they want to quickly and easily make a seat reservation.

User Journey

I mapped out the users’ steps to see how I could simplify their journey to help them reach their most important goals with the product. Creating maps helps me to organize the steps and outcomes of various journeys that users could take. After all, if I can’t put myself in the user’s shoes, I can’t be sure my design will help them. 


Thus, the key demand is:

  • provide the ability to select multiple filters at once


In general, the user feels optimistic and satisfied along the journey.

User Journey

I mapped out the users’ steps to see how I could simplify their journey to help them reach their most important goals with the product. Creating maps helps me to organize the steps and outcomes of various journeys that users could take. After all, if I can’t put myself in the user’s shoes, I can’t be sure my design will help them. 


Thus, the key demand is:

  • provide the ability to select multiple filters at once


In general, the user feels optimistic and satisfied along the journey.

Goal: Have accessible navigation on cinema websites and implement additional features that improve user experiences such as a preview of seats and a language filtering system.

Goal: Have accessible navigation on cinema websites and implement additional features that improve user experiences such as a preview of seats and a language filtering system.

Goal: Have accessible navigation on cinema websites and implement additional features that improve user experiences such as a preview of seats and a language filtering system.

Goal: Have accessible navigation on cinema websites and implement additional features that improve user experiences such as a preview of seats and a language filtering system.

Competitive Analysis

My goal was to uncover how different cinema websites offer users to reserve seats and pay for tickets at a glance and in-depth, in order to find patterns that would suit this project.

Competitive Analysis

My goal was to uncover how different cinema websites offer users to reserve seats and pay for tickets at a glance and in-depth, in order to find patterns that would suit this project.

Insights:

Reduce the breadth of movie offerings since it is overwhelming and confusing.

  • Language filtering must be intuitive and easy to find.

  • Lack of screen readers.

  • Show what the seats look like on the booking page.

  • Provide easy access to browse movies and reserve seats.

Competitive Analysis

My goal was to uncover how different cinema websites offer users to reserve seats and pay for tickets at a glance and in-depth, in order to find patterns that would suit this project.

Competitive Analysis

My goal was to uncover how different cinema websites offer users to reserve seats and pay for tickets at a glance and in-depth, in order to find patterns that would suit this project.

Insights:

Reduce the breadth of movie offerings since it is overwhelming and confusing.

  • Language filtering must be intuitive and easy to find.

  • Lack of screen readers.

  • Show what the seats look like on the booking page.

  • Provide easy access to browse movies and reserve seats.

Competitive Analysis

My goal was to uncover how different cinema websites offer users to reserve seats and pay for tickets at a glance and in-depth, in order to find patterns that would suit this project.

Insights:

Reduce the breadth of movie offerings since it is overwhelming and confusing.

  • Language filtering must be intuitive and easy to find.

  • Lack of screen readers.

  • Show what the seats look like on the booking page.

  • Provide easy access to browse movies and reserve seats.

Competitive Analysis

My goal was to uncover how different cinema websites offer users to reserve seats and pay for tickets at a glance and in-depth, in order to find patterns that would suit this project.

Insights:

Reduce the breadth of movie offerings since it is overwhelming and confusing.

  • Language filtering must be intuitive and easy to find.

  • Lack of screen readers.

  • Show what the seats look like on the booking page.

  • Provide easy access to browse movies and reserve seats.

Define

Define

Time to Prioritize &
then Map it Out

Armed with the knowledge of what the users expect and need, and what the competitors do, I detailed what features and pages the site must, should, could, and won't have.

I build a sitemap to understand the interactions required for a user to reserve a seat.

Design

Time to Prioritize & then Map it Out

Armed with the knowledge of what the users expect and need, and what the competitors do, I detailed what features and pages the site must, should, could, and won't have.

I build a sitemap to understand the interactions required for a user to reserve a seat.

Time to Prioritize & then Map it Out

Armed with the knowledge of what the users expect and need, and what the competitors do, I detailed what features and pages the site must, should, could, and won't have.

I build a sitemap to understand the interactions required for a user to reserve a seat.

Time to Prioritize & then Map it Out

Armed with the knowledge of what the users expect and need, and what the competitors do, I detailed what features and pages the site must, should, could, and won't have.

I build a sitemap to understand the interactions required for a user to reserve a seat.

Design

Design

Sketches

I usually start the design process with low-fidelity wireframes. This is the way I iterate through many design options quickly.

I was able to sketch out my ideas for the overall flow, pages to include, and more detailed opportunities such as labeling and potential interactions over the numerous iterations I drew.

Low - Fidelity
Prototype
(Website &
Mobile Version)

At the beginning of my design process, I created a low-fidelity prototype for testing purposes.

Creating low-fidelity prototypes helped me to define what best works for my project and the users’ goals. I created the responsive design of the main flow screens for the website and app, so the users can lately test the prototype and provide feedback. I used Adobe XD to create the low-fidelity prototype and after, the two versions have been tested by users.

Sketches

I usually start the design process with low-fidelity wireframes. This is the way I iterate through many design options quickly.

I was able to sketch out my ideas for the overall flow, pages to include, and more detailed opportunities such as labeling and potential interactions over the numerous iterations I drew.

Sketches

I usually start the design process with low-fidelity wireframes. This is the way I iterate through many design options quickly.

I was able to sketch out my ideas for the overall flow, pages to include, and more detailed opportunities such as labeling and potential interactions over the numerous iterations I drew.

Sketches

Low - Fidelity Prototype
(Website & Mobile Version)

At the beginning of my design process, I created a low-fidelity prototype for testing purposes.

Creating low-fidelity prototypes helped me to define what best works for my project and the users’ goals. I created the responsive design of the main flow screens for the website and app, so the users can lately test the prototype and provide feedback. I used Adobe XD to create the low-fidelity prototype and after, the two versions have been tested by users.

Low - Fidelity Prototype (Website & Mobile Version)

At the beginning of my design process, I created a low-fidelity prototype for testing purposes.

Creating low-fidelity prototypes helped me to define what best works for my project and the users’ goals. I created the responsive design of the main flow screens for the website and app, so the users can lately test the prototype and provide feedback. I used Adobe XD to create the low-fidelity prototype and after, the two versions have been tested by users.

Testing Low-Fidelity
Prototype

After the low-fidelity prototype was created, it was ready to be tested with real users. I gathered feedback about my responsive website designs by conducting a usability study. 

I chose a usability study as a research method because it best assesses how easy it is for participants to complete basic tasks in a product. I have conducted an unmoderated usability study with 5 distinct people to make sure my design is inclusive and representative of a range of users. After the testing, I identified test participant behaviors, opinions, feelings, and quotes.

The usability study helped me better understand how users performed the task and what needs to be changed in order to make their experience excellent. All research results have been analyzed, synthesized, and converted into an affinity map.

Testing Low-Fidelity Prototype

After the low-fidelity prototype was created, it was ready to be tested with real users. I gathered feedback about my responsive website designs by conducting a usability study. 

I chose a usability study as a research method because it best assesses how easy it is for participants to complete basic tasks in a product. I have conducted an unmoderated usability study with 5 distinct people to make sure my design is inclusive and representative of a range of users. After the testing, I identified test participant behaviors, opinions, feelings, and quotes.

The usability study helped me better understand how users performed the task and what needs to be changed in order to make their experience excellent. All research results have been analyzed, synthesized, and converted into an affinity map.

Testing Low-Fidelity Prototype

After the low-fidelity prototype was created, it was ready to be tested with real users. I gathered feedback about my responsive website designs by conducting a usability study. 

I chose a usability study as a research method because it best assesses how easy it is for participants to complete basic tasks in a product. I have conducted an unmoderated usability study with 5 distinct people to make sure my design is inclusive and representative of a range of users. After the testing, I identified test participant behaviors, opinions, feelings, and quotes.

The usability study helped me better understand how users performed the task and what needs to be changed in order to make their experience excellent. All research results have been analyzed, synthesized, and converted into an affinity map.

Testing Low-Fidelity Prototype

After the low-fidelity prototype was created, it was ready to be tested with real users. I gathered feedback about my responsive website designs by conducting a usability study. 

I chose a usability study as a research method because it best assesses how easy it is for participants to complete basic tasks in a product. I have conducted an unmoderated usability study with 5 distinct people to make sure my design is inclusive and representative of a range of users. After the testing, I identified test participant behaviors, opinions, feelings, and quotes.

The usability study helped me better understand how users performed the task and what needs to be changed in order to make their experience excellent. All research results have been analyzed, synthesized, and converted into an affinity map.

Test

Test

UI Designs

Before launching the product, I did a testing round in order to reveal possible usability problems.

Once I tested out all usability mistakes, I started designing the final screens in AdobeXD.

UI Designs

Before launching the product, I did a testing round in order to reveal possible usability problems.

Once I tested out all usability mistakes, I started designing the final screens in AdobeXD.