top of page

The D-vision movie theater 

1.png
Frame 53.png

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.png

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.

3.png

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.

4.png

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.

5.png

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.

6.png

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

7.png

Screen size variations

8.png

Usability study findings

Findings helped guide the designs from wireframes to mockups.

9.png

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

10.png

Before usability study

After usability study

11.png

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.

Home Wed - Hi-FI_2x_edited.jpg
Movies web - Hi-fi_2x_edited.jpg
Seat selection - web – 1_2x_edited.jpg
Hurray – 2_2x_edited.jpg

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.

Frame 51.png
Frame 52.png
Frame 53.png
Frame 54.png

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

Screen Shot 2022-08-11 at 4.11.56 PM.png

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.

bottom of page