The D-vision movie theater
Book, plan, track, and share your cinematic history like never before.
Project Overview
The problem
Movie theaters haven't caught up to today's tech standards, causing them to miss out on loyal customer growth.
The product
The D-Vision is a movie theater that offers the latest movie releases and features some old classic movies. The typical user is between 5-70 years old, most of the users are working adults and families with children. The D-Vision goal is to make ticket and food purchasing faster and easier.
The goal
The D-Vision website is friendly to the user and easy to complete the purchase of movie tickets and food.
My role
Lead UX designer for the app and responsive website. Responsibilities include:
-
Conducting interviews
-
Paper and digital wire-framing
-
Low and high-fidelity prototyping
-
Conducting usability studies
-
Accessibility review
-
Design iteration
Project duration
November 2022 - January 2022
Understanding the user
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. I discovered that the average moviegoer wants to save time, lock in a good seat, and occasionally pre-pay for concessions. However, the checkout experience is often convoluted and confusing at most movie theaters.
User pain points
1. Navigation
Movie theater websites are full of images and carousels, which results in confusing navigation.
3. Experience
Movie theater websites don’t provide an engaging browsing experience.
2. Time
Target user want to save time purchasing their tickets and food in advance.
Persona and problem Statement
Frank is a busy employee who needs to order tickets and food online from a movie theater because they want to enjoy their free time with no rush.
User journey map
I created the user journey map of Frank’s experience using the site to help identify possible pain points and improvement opportunities.
Starting the design
Sitemap
Difficulty with website navigation and time was the primary pain points 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.
Paper Wireframes
Next, I sketched out paper wireframes for each screen, keeping in mind the users' pain points about navigation, concision, and browsing in mind.
Because The D-Vision customers access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
Digital wireframes
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve their experience. Prioritizing useful get tickets under each movie poster.
Wireframe
Screen size variations
Usability study findings
Findings helped guide the designs from wireframes to mockups.
Redefining the design
Mockups
Based on the insights from the usability study, I made changes to improve the site’s order summary. One of the changes I made was adding the “back” button. This allows the user to go back to the seat selection. Another change was adding information about the seat number and theater room.
Before usability study
After usability study
Before usability study
After usability study
Accessibility Considerations
1. Headings with different sized text for clear visual hierarchy.
2. High color contrast for clear visual navigation.
3. Landmarks to help users navigate the site, including users who rely on assistive technologies.
Screen size variations
I included considerations for additional screen sizes in my mockups based on my earlier wireframes. Because users get their tickets and snacks from a variety of devices, I felt it was important to optimize the experience for mobile so users have the smoothest experience possible.
High-fidelity prototype
My hi-fi prototype followed the same user flow as the lo-fi prototype and included the design changes made after the usability study, as well as several changes that were suggested.
View “The D-vision App” High-fidelity prototype
View “The D-vision Website” High-fidelity prototype
Takeaways
Impact
The D-Vision target users shared that the design was straightforward with the purchase of the tickets and intuitive to navigate through. It was also easy to purchase add-ons like food and reserve seats.
What I learned
While designing, I learned how every item can improve the experience of each user depending on its qualities of it, like color and size.
Next steps
1. Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
2. Conduct more user research to determine any new areas of need.