Xscape Theater Redesign

[DESKTOP] Unauthenticated User

TIMELINE

  • September 2023

[DESKTOP] Authenticated User

MY ROLL

  • Solo Project

SOFTWARE USED

  • Figma


SUMMARY

This project walks through a redesign of my local theater. After using the website myself and talking with many locals, multiple issues stood out. Problems with searching/browsing movies and information display were primarily brought up. Accessibility within the website was lacking and seat selection during the ticket checkout process used inaccessible colors to represent open and taken seats. TYPE MORE ABOUT WHAT I DID IN THE PROJECT


PROBLEM

  1. No movie filtering options which makes browsing and searching for movies frustrating and time-consuming.

  2. Poor accessibility, especially for seat selection as it uses the colors red and green to represent open and taken seats. Red-green colorblindness is the most common form of colorblindness.


SOLUTION

  1. Add movie filtering options by genre and rating.

  2. Use accessible colors, patterns, and icons to help accessibility of the seat selection process during checkout.


USER STATEMENTS

  • “I feel overwhelmed looking at all the movies. There’s so many and no way to filter them!” 

  • “When I go onto the theaters website to look at their current movie showings a day, I can’t filter my view of the movies. It feels overwhelming to view the full list of movies. I would like to sort by genre and rating so I can see a specific/shorter list of movies I want to see.” 

  • “When I try to reserve seating the colors are green for available and red for taken. I am red-green colorblind so I can’t tell which seats are taken or available. This makes the entire process very time consuming and frustrating.” 

  • “As a disabled person I am unable to book seats for a movie I want to watch online and I don’t want to have to go to the theater itself to purchase tickets in person.”


TARGET AUDIENCE

25-39 year old’s


MEASURE OF SYSTEM SUCCESS

  • Conversion Rate

    • The website conversion is the measurement of how many users complete a desired action on the website, in this case purchasing a ticket online.

  • Number of Transactions

    • An increase in online transactions, and revenue, can be useful in determining the success of these system changes.

  • Bounce Rates

    • Assessing bounce rates of the website can also indicate success or need for improvement. A high bounce rate means users that come to the site typically leave after a single page visit while a lower bounce rate means users typically visit more than one page (Google Analytics, 2022). Lower bounce rates than previously seen before the update to the system can indicate users are using more of the features and filters.

  • Usage of Filters and How it Leads to Purchases

    • Looking deeper at the user's overall experience on the website and the resulting online transactions will be an indicator of the success of the system.


UNDERSTANDING THE SYSTEM

Use Case Diagram

Functional Requirement Specifications:

System Sequence Diagram

Domain Model


INITIAL SCREEN MOCK-UPS

FINAL DESIGNS



IMPROVEMENTS MADE

First, I split the ‘Movie’ tab into ‘Now Playing’ and ‘Coming Soon. Originally, I had designed it so users can select a movies tab and switch back and forth between ‘Playing Now’ and ‘Coming Soon’ on that page. Breaking out the tabs helps users see options more clearly. In addition, during the checkout process I added a side section so users can see their order as it currently is (which movie they are buying tickets for, the showtime they selected, how many tickets they are purchasing, and which seats they have selected).

I also adjusted how movies are shown to the user. I find the updated layout much easier to understand and navigate than the initial screen mock-ups and less clunky. In the initial mock-up users could see showtimes for select days and times at the top of the page. Now I have showtimes showing on the movie information page. In addition, I have adjusted the filter so users can easily find movies by filtering genres and ratings. In the revised final mock-up, users can select the ‘Theater Info’ tab to view Xscape Theater locations and view more information. Previously users had to select a primary theater first to view information and movies. 

Apart from general improvements like automating processes like movies (show as now playing and coming soon by date) and showtimes (days and times are calculated for each movie and theater room), there are some website features I would like to add. For the ‘Now Playing’ page I would like to add more filter options like review ratings and showtimes. In addition, a search bar so users can search movies by title. Currently, all the locations are shown on the ‘Now Playing’ page, but I would like to add a dropdown below the title where users can select one theater location to view the movies they show. Lastly, the inclusion of a fully functioning 24/7 automated phone booking system would make the entire movie booking system more accessible.