The State Theater

Responsive Web Design

Project Goals

The State Theater is an independent film and event venue in need of a comprehensive ticket ordering system that can be accessed on the web as easily as from desktop as from a mobile device. Because The State is a mixed venue serving many functions, any ordering flow needs to accommodate regular movie showings as well as concerts and public speaking events.

Target Audience

The State, being in a college town, attracts a large number of students as well as full time local residents. Designing for younger users demands a focus on designing for mobile, but older, longstanding residents are more likely to access ticket reservation through desktop. There is no one type of user here, so the system needs to be equally accommodating.

My Role

I conducted interviews, made paper and digital wireframes, as well as low and high-fidelity prototypes. I conducted usability studies and iterated on designs based on those studies.

Key Challenges

While, on the one hand, ticket ordering needs to serve two divergent sets of user needs, it needs to be implemented as one cohesive system. While mobile and desktop versions of the website should be suited for different platforms, they should not represent different experiences, so that users can move easily between the two, by, for instance, making an initial reservation on a desktop computer but check that reservation on a mobile device.
‍
Independent theaters quite often lack any online ticket ordering system of any kind. Because quite often these theaters are run as nonprofits on tight budgets, they stick to purchasing tickets in person and over the phone in order to avoid the expense of using third party systems like Fandango. Making a lean and flexible system for a nonprofit, then, poses a significant challenge.

Preliminary Research

Competitive Audit

As noted, independent theaters tend to avoid online ticket ordering due to the costs associated with both frontend and backend infrastructure, so there were almost no like for like comparisons to make. That said, commercial theaters typically deploy their own ticket ordering systems, if a large chain, or make use of third party systems like Fandango. The handful of examples from independent theaters showed no consistency in design and were often quite clumsy. In one instance, the user would have to consult a pdf map of theater seats, then manually enter the row and seat number on a separate page while ordering.

Core User

In particular, the college students we consulted wanted something as streamlined and clear as possible, regardless of platform. And while convenience and ease of use might seem like something everyone wants, it was of particular interest to users with accessibility in mind. Older theaters typically have limited seating available to people with mobility concerns, so the ordering flow needs to be very clear that they are getting precisely the seating they require, for instance on an aisle or in the rear of a seat block.

Design Overview

Based on this research, we needed to make sure that the reservation flow include an explicit indicator of available seats and their respective positions in the theater. From the perspective of The State’s website as a whole, ticket ordering is only one of many functions, so it needs to be placed prominently within the homepage while still making other elements visible and clearly navigable as well. It was important that we retain the integrity of the site’s design across multiple platforms, so that the theater can showcase the many opportunities it provides.

Initial Concept

What both the mobile and desktop versions of the website have in common is a basic “stacking” logic. Making use of a layer cake structure for the layout, we believed it would be easy to move back and forth between platforms and still retain a sense of the same user experience. A set of hero images draws the users attention to current showings, and a clear call to action appears just below. Events are featured prominently above the fold, while less critical features such as merchandise and user rewards require some scrolling. That said, a persistent navigation header makes any of these features available at any time.

Wireframes

One thing that was key to the design was to have multiple points of entry to primary flows. A user might navigate away from the homepage to read about a recent release and then want to order tickets right away. Persistent navigation makes this a reality. Likewise, a user might be in the middle of reserving seats but want to open information about upcoming events in another tab. Multiple points of entry make sure whatever the user needs is available to them with as few clicks as possible.

User Testing

User testing of the low fidelity prototype yielded two key takeaways. First, they felt there wasn’t a clear method to go back to earlier points in the ordering flow in order to change any choices already made. Second, users wanted there to be more explicit feedback as they progressed, so they could be clear about what they had already chosen in what is functionally a multi-stage process.

Final Design

We changed a number of decision points to positions in the flow where they felt more intuitive. For instance, it made more sense to include the decision point for choosing the number of tickets on the same screen as the where the user selected their seats. This also helped with the feedback concern.

In our finalized mockups, showtime, number of tickets, and seat location all appear on the same screen so the user can make decisions further along the flow with all the information concerning choices they’ve already made.

Further usability testing also demonstrated the need to eschew a more compact design in favor of utilizing explicit subject headings, which also has the knock on effect of improving accessibility for those making use of screen readers.

Conclusion

The opportunity to design for a cinema nonprofit helped me understand how to at once design for a number of competing concerns–conflicting user needs, a variety of venue offerings–while maintaining a cohesive sense of identity. A historic theater is both a landmark within the community as well as a place that provides entertaining and enlightening experiences. They want to draw in as many people as possible from as many walks of life, but there are real material constraints on what kinds of systems can be deployed. Much like an old theater offering new, independent films, it was incumbent upon me as a UX designer to create a new ordering flow while still maintaining the integrity of The State’s many offerings.
‍
Read the full case study here.
Going forward, it would be helpful to take what we’ve learned in designing a new ticket reservation system and apply that to the site’s merchandise and donate pages. People in the community want to support The State, they want to be as involved with it as the theater is in their lives, so we should provide them with as many streamlined opportunities to do so as possible.