Tower Theater Miami
A historical site that needed a contemporary transformation. Defining the balance between staying true to the source material while reforming to boost sales and decrease user drop-off.
Overview
MY ROLE
UX/UI and Product Designer
MY TEAM
1 Designer, 2 Engineers, 1 Product Manager
PLATFORM
Responsive Website
Tower Theater is a cultural treasure that plays a significant part in the Miami art scene. Their goal is “connecting art with audiences, and fostering a value of cinema for future generations.” However, because of their previous site’s slow loading times, out-of-date software, and lengthy checkout process, it wasn't easy to achieve.
While their demographic of loyal customers is typically 40+, they wanted to reach a younger demographic as well, to establish its prominence for years to come. With these elements at the forefront, I was tasked with redesigning their website and optimizing their user experience to decrease user drop-offs and speed up their internal flows.
My Creative Process
Research / Plan / Design / Iterate / Test
Research
Problems
1. Slow website speeds
The previous website took a few minutes to load all the home page content. Most users will only wait 8 seconds max for content to load.
2. Long and outdated checkout
When purchasing a ticket, users would select showtime, then get redirected to an external site where they would have to reselect the movie of interest and the preferred showtime.
3. Difficult to find information
There was no information hierarchy for the content they wanted to highlight, like their membership tiers or limited events. We found many pages that were not necessary on the site.
Previous site before redesign
Research
Competitive Analysis
1. What were other sites doing better?
I checked out popular theater retail sites like Fandango and Cinemark to view their treatments for elements like movie details, showtime displays, and checkout processes. I dissected what I enjoyed about them, from convenient showtime selection to a simple checkout process.
2. What can be improved?
I noticed on many of these sites that they are heavily informative and give the user many options since they are retailing so many movies simultaneously. However, they seem to focus more on pushing the movie showtimes than the visuals or movie details themselves.
3. How can we stand out?
The good thing about Tower Theater being a small local theater is that they have more real estate to display visuals and something more dynamic since they will have fewer movies and movie showtimes to display. They can focus on advertising movie elements along with daily showtimes.
Plan
Goals
1. Establish info and text hierarchy
Allow priority content to be easily accessible and visible to the user. Restructure and remove excess content to highlight ticket purchasing and movie theater events.
2. Localized checkout flow
Users can checkout directly on the site and in one flow. Users will not have to reselect the movie ticket or showtime.
3. Responsive everything
Every possible flow will be optimized for either desktop or mobile to decrease friction between users with different preferences. Most importantly, the checkout process will be fully functional on both devices to engage more sales.
Design + Iterate
Solutions
Design
Home Page
The home page now had highlighted movie cards to make the movies more engaging, and even though the movie cards were now more visual-heavy, they didn’t slow down the site. The current site loads in about two seconds now. We stripped down a lot of the content that wasn’t used by consumers and wasn’t critical to keep.
We also added an “Events” carousel which the previous site did not have. This helps Tower Theater engage with its community by releasing different opportunities for the audience to gather. This can be press events, education demos, or even their feature Miami Film Festival.
Memberships Redesign
Memberships Previous Page
Design
Memberships
The previous membership screen was just text that displayed all the tiers in a very simple layout. It was hard to decipher information right away since there was no visual hierarchy within this information.
To increase engagement and clarity, I translated the information into cards so users could easily navigate between memberships and see the distinct differences from tier to tier. But also by introducing the slight tier color-coding, it adds an element of gamification to the more elite tiers.
Design
Checkout
This screen was game-changing for Tower Theater. Having a checkout process that can be done locally on their website was the most monumental thing that was missing from their legacy site.
Users could now purchase tickets directly from the movie details or the home page and multiple tickets for multiple movies!
With the previous flow, this could’ve taken the user at least 10 minutes to check out because of all the website redirecting. These steps were now cut in half, making it much faster and smoother.
Design + Iterate
Of course, mobile iterations
Test
User Testing and Surveys
1. High-fidelity prototype
Before major developments were started, my product manager and I lead a user testing group to get feedback on the current flow and interface.
To allow users to test out every feature on the website, within the navigation, internal flows, and checkout flows, I was imperative to create a prototype as close to the actual website as possible.
As I was designing the flows, I would prototype each of the screens on desktop and mobile, from hover states to overlays, or even intelligent animations, so that when users and our clients tested the prototype they could understand how the product should genuinely interact.
2. Ensure our criteria was met
I curated a list that focused on gathering demographic information on the user, their activity volume for movie-going, and general questions on how they felt about the redesign. We also wanted to determine if any information was difficult to access, or if anything didn’t make sense for a user in terminology or user flow.
3. Feedback from about ~20 user testers
Half of our feedback was from regulars of Tower Theater, and the other half we people who have never been on the site or to the location. We learned quickly from the user interviews that Tower Theater’s predominant demographic was middle-aged or older members.
We were eager to hear feedback from the regular customers to see if these drastic changes caused any friction for them. They were fortunately fond of the revamp of the site and thought the experience was much smoother than it was previously. And users who have never been to the site can easily purchase tickets.
The main feedback we got back featured older demographics who did get confused by some terminology, so we reworded phrasing to be more neutral and simple for these components.
Reflection
Takeaways 
Takeaways
Research new integrations
When integrating a tool you never used before on your platform, dive deep to ensure it fully functions with the flow you created or that currently exists. Also, learn its capabilities and limitations to accurately produce screens that make sense between your software and your external integrations. This will also be helpful for your dev team!
Simplicity is key
Users can be easily overwhelmed when not given proper visual cues on how to direct them. By having a lot of prompts, actions, and pages, clients can get derailed from the flow you want them to experience.
Consider neutrality first
If you aren’t given a specific demographic to cater to, or if the client wants to broaden their audience, it may be a good idea to start with neutral imagery and language. That way, you can tune things based on feedback to cater to more specific needs.
