PROBLEM

Busy workers and people on a tight budget need more options for convenient ticket booking.

SOLUTION

Design a website that allows users to book a tickets and vote for movie rescreenings.

Cinema is a ticketing website that allows users to easily and intuitively perform basic actions related to searching and booking tickets. Through this website, I understood the specific users might encounter in the process of voting for movie re-runs. I want to create a product that can compete in the market and increase customer satisfaction.

PROJECT OVERVIEW

RESPONSIBILITIES

Conducting user research; defining the problem and providing insights to inform the ideation phase; defining personas, user journeys, empathy maps, and user flows; visual design of wireframes; visual design of low-fi and high-fi prototypes.

MY ROLE

UX designer designing a website from conception to delivery.

USER JOURNEY

Show which seats are best for children

Add an option to select the days on which the theater will show the movie again

Add the option to sort by date, time etc.

Sending a confirmation sms in case the person does not have wifi connection, etc.

Add information about which hall is showing a particular movie

Add a variety of payment options, including in-theater cash payments

IMPROVEMENT OPPORTUNITIES

A. Open the app

B. Choose a movie theater or movie

C. Open the "Schedule" tab

A. Choose a convenient session and click on it

B. Choose seats in the ticket purchase window

C. See the total price

A. Receive the ticket to the e-mail address

B. Check the email

C. Confirm the booking

A. Go to the movie theater

B. Scan the tickets

C. Get inside

A. Choose a convenient method of payment, specify your e-mail address

B. Proceed to payment

C. Pay for the purchase

TASK LIST

FEELING

NEGATIVE

NEUTRAL

POSITIVE

ACTION

Choose a movie

Check available showtimes

Pay for the tickets

Confirm the

booking

Go to the movie

theater

USER FLOW

Open

movie

section

Movie selection

Time/date

selection

Voting screen

Vote for a

movie re-

screening

Confirmation

Confirm

order?

Select a

payment

method

Payment

Select

food/drinks

Food/drinks

selection

Select

a seat

Seat selection

Y

N

Y

N

Found

a suitable

date?

Select

a movie

Search

nearest

location

Home screen

Open

app

PERSONA

“I love spending time with my daughter and

always try to make time for our favorite hobby” 


Goals 

To balance work with quality time spent on his hobbies 

To spend a lot of time with his daughter

To find movie shows suitable for his irregular work schedule

Frustrations 

‘Quite often I have to stay late at work, and that's how our family plans are canceled’

‘I don't want to deny my daughter a trip to the movies when we can't find a suitable showtime’

‘I would like to see movie theatres extend the showing or show some of them again after a certain time’

Carlos

Carlos is a chef who lives in a small city and often overworks. Carlos cares a lot about being available to his daughter. He would like to be able to devote as much of his non-work time as possible to his hobbies and personal life, but may not be able to find as much time for these activities as he has more and more responsibilities at work. Carlos cannot always find suitable movie showtimes and would like theatres to extend the showing times of movies or show some of them again after a certain amount of time.

48

Culinary school

Bruges, Belgium

Married, 1 daughter

Chef

Age: 

Education: 

Hometown: 

Family: 

Occupation:

Project

Cinema

UX Research, UI & UX Design

Duration

12 Weeks

ACCESSIBILITY CONSIDERATIONS

Implemented a text hierarchy throughout the website/app. This helps users to distinguish the different sections and information on screen.

1

Used icons to help make navigation easier.

2

Used detailed imagery for movies to help all users better understand the designs.

3

USER RESEARCH

I conducted interviews and created empathy maps to understand the users I was designing for and their needs. A primary user group identified through research was working adults who do not have enough time to attend movie theaters. This user group confirmed initial assumptions about Cinema’s customers. Other user problems included obligations, interests, or challenges that make it difficult to purchase tickets through a website.

Working adults are too busy to go to movie theaters.

Time

1

Ticketing platforms are not accessible for people with visual impairments.

Accessibility

2

Users need a more intuitive way to access buttons and screens.

Intuitive Design

3

Users want more convenient and colourful arrangement of buttons.

Convenience

4

USABILITY STUDY: RESULTS

Based on the insights from the usability study, I made changes to improve the site’s day and time flow. Some of the changes I made was expanding the time slots and adding information. This allowed users to get more information about movie sessions without having to look elsewhere.

What’s Up

IMAX

What’s Up

IMAX

Search

Select Location

Back to

Home Page

Voting/Results

Back to

Home Page

Log In

Forgot Passport?

Back to

Home Page

Sign Up

Back to

Home Page

4DX

Offers

Day and Time

Seats

Bank Details

Confirmation

Gift Cards

Home Page

Menu

Search

Special Offers

Movie

Location

Log In

Sign Up

Voting

SITEMAP

Difficulty with website navigation was a primary pain point for users, so I used that knowledge to create a sitemap. 

My goal here was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy. 

PAPER WIREFRAMES

Taking the time to draft iterations of each screen of the website on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritised a quick and easy ordering process to help users save time.

DIGITAL WIREFRAMES

Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience. 

Prioritising useful button locations and visual element placement on the home page was a key part of my strategy.

Intuitive way to access buttons and screens.

Homepage is optimised for easy browsing through the cards of images and nav menu options.

Back to

Home Page

Old Version

New Version

ITERATIONS

After deepening my knowledge of user interface design, I changed my design system to make it look up to date and user-friendly. I adjusted font sizes to improve readability and visual hierarchy, and changed spacing for better visual balance.

USABILITY STUDY: FINDINGS

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.

1

Users want more accessible prototypes 

2

Users take a long time to complete a task and need a more intuitive way to access buttons and screens

3

Users need better cues for what steps are required to go back to the Home Screen

Round 1 findings

1

Users need less overloaded buttons

2

Сonfusion due to the proximity of objects, which led the participant to believe that they were related

Round 2 findings

USABILITY STUDY

Unmoderated usability study

Study Type

United Kingdom, remote

Location

5 participants

Participants

15-30 minutes

Length

IN-DEPTH INTERVIEW

In-depth interviews provide a deeper understanding of users' needs and expectations, allowing me explore the underlying reasons behind user behaviour. It helped me gather detailed, high-quality data on how users would use my platform.

Sofia

Daria

Elena

Julia

Anna

'I still don't know whether I tapped the right button, maybe this option should be more easy to understand on intuitive level'

'Maybe instead of stripes it's better to write a b c d for those who don't understand like me'

'You can't quite see when you tap it that it worked'

'I would be clearer even as a prototype to have names, but just lines? There is some dissonance, not very clear where to tap and what to do'

'It would be nice to have another button besides this one to quickly return to the home screen, instead of clicking back tabs. Maybe I didn't notice it?'

LET'S CONNECT

Thank you for your time reviewing my work on the Cinema’s website! 

If you would like to see more or get in touch, my contact information is provided below.

Oxford

perepelytsa.ad@gmail.com

+447342134384

MOCK-UPS: SCREEN SIZE VARIATIONS

I included considerations for additional screen sizes in my mockups based on my earlier wireframes. Because users buy tickets from a variety of devices, I felt it was important to optimise the browsing experience for a range of device sizes, such as mobile and tablet so users have the smoothest experience possible. 

TAKEAWAYS

Our target users shared that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy. 


Impact

I learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions.

What I learned

Category

Cinema

App

Cinema

LOW-FIDELITY PROTOTYPE

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was ticket purchases through a website, so the prototype could be used in a usability study.


View the low-fidelity prototype - phone

View the low-fidelity prototype - desktop

HIGH-FIDELITY PROTOTYPE

The final high-fidelity prototype presented cleaner user flows for ticket purchases. It also met user needs for movie re-screening as well as more customisation.


View the high-fidelity prototype - phone

View the high-fidelity prototype - desktop

DESIGN SYSTEM - TYPOGRAPHY, ICONS, COMPONENTS, COLOURS

Aa

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

0 1 2 3 4 5 6 7 8 9

Montserrat SemiBold

Montserrat Medium

Montserrat Regular

Accent

#FF0000

Primary

#1F1D2B

Secondary

#696291

Accent 2

#FF9292

Text

#EBEBEF

Background

#0A0A10

Background 2

#15121E

Phone

Continue

Continue

Desktop

Continue

Continue

Create a free website with Framer, the website builder loved by startups, designers and agencies.