UX / UI DESIGN CASE STUDY
Astoria Cinema Responsive website
Project Duration
September 2022 - October 2022
My Role
UX Designer
UX Resercher
Responsibilities
Paper and digital wireframing
Low and high-fidelity prototyping
Iterating designs
Responsive design
Conducting interviews
Conducting Usability Studies
Project Overview
The product
The idea was to create a website for a retro movie theater called "Astoria Cinema", that allows users make seat reservations online.
The problem
Astoria Cinema is a small-scale, independent and classic movie theater of a bygone era. Loyal customers don't have a way to make seat reservations online.
The Goal
To design a website that allows users make seat reservations at their favorite movie theater.
UX Design Process
User research
Empathize
Summary
I conducted interviews to understand how users purchase movie tickets online. I interviewed participants between the ages of 25 to 62, male and female from various occupations and backgrounds. What I learned was that users like to have the option to purchase movie tickets online, but some websites are crowded with advertisements and can get overwhelming.
Comparing smaller or independent movie theaters, I found that most of them have very simple or outdated websites.
Pain points
Navigation
Some cinema websites are designed with many pop up ads which can be distracting and overwhelming for users,
Engagement
Some cinema websites are designed with many pop up ads which can be distracting and overwhelming for users,
2
1
Define
Problem statement
Oscar is a busy professional and movie enthusiast who needs a way to reserve seats for a movie function at Astoria Cinema because he wants to surprise his girlfriend with tickets to her favorite movie.
User Journey Map
Ideate
Site Map
Starting the design
Design
I started the design of the responsive website with simple pen and paper. Sketching different versions of the homepage. I made 5 versions of each page before deciding on the one.
Paper wireframes
Homepage
Desktop version
Starting the design, I focused on the homepage first, how was it going to be laid out and what sections will it have.
Screen size variations
Digital wireframes
Homepage
Desktop version
Moving from the paper wireframes to digital wireframes I focused on making a clean and easy to understand design, prioritizing one of the user pain points which was navigation and that the design wouldn't overwhelm the users.
screen size variations
Test
Usability study: parameters
Usability study: Findings
Ticket visibility
Users need a way to see tickets they've purchased
1
Ticket Categories
Users need a way to differentiate between tickets for adults, children and senior citizens.
2
Refining the design
Design
Changes After Usability Study
Based on the usability study findings, I added different classifications of tickets. This way users can differentiate between the Adult, Children and Senior tickets and prices.
Mockups
Screen size variations
Accessibility considerations
Different headings with different sized text for visual hierarchy.
1
The contrast ratio of the colors used in the website are passed by the WCAG. This helps users with visual disabilities.
2
Going forward
Takeaways
Impact
The final design of the Astoria Cinema website is easy to navigate and has an attractive design, which is engaging and helps users book tickets for their favorite movies.
What I learned
I think the most important part of any User Experience design is paying close attention to what Users say and their suggestions. Keeping the user front an center will guide you to a functional design.
Next steps
Conduct a follow-up usability study on the final design.
1
Iterate on the design based on feedback from the final usability study.