Introduction & About Varsity Theatre
Established in 1940 and located right across the street from The University of Washington, the Varsity Theatre has been a staple to college life for years. Providing the cheapest first run of tickets in Seattle and free parking, this family-owned, three screened theater, is a popular spot for UW students throughout the year. Despite being a great service to the people of University District, the Varsity Theatre fails to make an impression online because of their poorly designed mobile website.
User Story
It is a Friday evening and a group of University of Washington students (shown above) want to have a fun night out that accommodates groups and is affordable. After someone recommends going to the Varsity Theatre to watch a film, the group members review their website to choose a movie. They have a difficult time selecting something to watch since there is no information about the film other than its name and poster. Additionally, members of the group run into issues checking out their tickets online while others are hesitant about inputting their credit card information since the website looks outdated and unsecure. With group members no longer on board to watch a movie, they decide to go bowling instead, and the Varsity Theatre misses out on business from their target audience.
Persona
In order to better describe and understand who I am designing for, I created a user persona for a member of the friend group:
Current Mobile Website
Below is a graphic showing the current mobile website for the Varsity Theatre. I am including it in this write up to help readers visualize the pain points and issues I describe.
Defining the Pain Points
As a University of Washington student and a huge fan of cinema, I find myself attending the Varsity Theatre and using their mobile website quite often. While that can make me bias towards wanting the theatre online experience to improve, it also allows me to have a deeper understanding of the UX problems of the mobile website. After making a few assumptions, I conducted 13 simple in-person unstructured interviews with some of my peers at the University of Washington. I instructed them to use the mobile website, to learn more about a film, and attempt to purchase a ticket. My results were:
13/13 mentioned the website felt outdated/ugly/old
9/13 had trouble purchasing a ticket and getting to the checkout page
7/13 were looped back to the homepage without trying and made a comment about it
4/13 felt uncomfortable entering their credit card information when at checkout
3/13 complained about additional checkout fees they were not expecting
One mentioned difficulty in obtaining a good seat in the theatre during busy evenings
One limitation of these interviews was all 13 students were in either Informatics or Human Centered Design & Engineering. Therefore, the feedback could have easily been skewed due to the un-diversity of my interviewees.
Key Pain Points
Based on my assumptions, a frequent user of the mobile website, and the information from the 13 unstructured interviews, I compiled four key pain points for the Varsity Theatre mobile website:
Outdated: The current website looks aged. It is not a web application at all and is completely static—only reacting when users click something. There is close to no hierarchy and the entire website lives in a 2D space with no shadows or elevation. With this redesign, I will make it a top priority to make it look cleaner and current.
Lack of Information: From the small-sized start times to the tiny movie posters, it is difficult to see what movies are playing, and even harder to properly select one. Additionally, there is no information about each film besides the name and poster. There is so much that revolves around a film besides those things and that information should be represented properly.
Purchasing Experience: To purchase a ticket, you are outsourced to another (confusing) website. This takes security away from the theater brand and complicates things for users.
Theater Goals (Cheap, Community): Goals/benefits that consumers could potentially value are not displayed well and I had to search around the website to find them. I believe this is a big part of their brand and a large reason people chose this theater over another one. They should be displayed properly, especially on their About Page.
Communication Goals
To get a solid direction on where to take this mobile redesign, I wrote four communication goals to properly address the key pain points:
Brand Values: Their brand values such as affordable, easy and quick are big reasons the theater gets business. I want visitors of the website to get a strong idea of the brand. They pride themselves on having the cheapest first run of tickets in town so that should be upfront and center.
Information Visibility: The information on the theater’s website is important because most people want to know more about a movie before they decide to watch it. Information such as cast, length, ratings, and trailers are all important. Users deserve to feel secure in their purchase and movie choice.
Fluid Experience: The core purpose of watching a movie is the experience—that is exactly what users are paying for. The experience should start the moment users decide they want to watch a movie, not just when they sit down in the theater seat. I aim for this website to give users that fluid experience starting from when they buy a ticket until the movie credits roll.
Community: This is a small theater with only three screens next to the University of Washington. They run on the idea of community and I want to communicate that in their About Page.
Challenges to Success
Attracting users of all community levels, not just university students
To manage the customers if the theatre is overcrowded
Making convenience fee worth the convenience of the website
Interactive and easy purchasing process
Not push users away from watching a movie
Components
In addition to selecting typography and color, I chose to redesign the Varsity Theatre logo and create some icons. Below is the early sketches for the logo and icons from the brainstorm phase. Under that is the final style guide which includes the color palette, typography, icons, and redesigned logo.
Icons & Logo Sketches
Style Guide
Brainstorm
As I begin to brainstorm and sketch out my ideas, I must remind myself that “you are not the user.” This is a mobile website and theater I visit often, but I must ideate without bias and by using the knowledge I gained from analyzing the problem. When designing for this project, I remember the quote by Jared Spool, “You may be a user, but be careful of being seduced into designing for yourself.”
Sketches
After evaluating the key pain points and establishing my communication goals I ideated the direction I wanted to take this mobile website redesign:
Wireframes
Before committing to a design, I created a wireframe of the layout in order to show my peers and receive feedback:
Early Iteration
My first iteration of the design has been made in order to identify weak points and test further:
Final Product
After testing, feedback and a lot of careful consideration, I created the final iteration of the Varsity Theater mobile website:
Home Page
Theater uniqueness and brand values are proudly displayed in a carousel at the top of the page. Scrolling down, films are separated into three main sections to provide users with a direction in their search. Each film is provided a name and a rating to give users a start at selecting a movie to learn more about and ultimately watch.
Carousel Panels
A closer look at the four carousel panels located on the main page of the website.
About Us Page
Replaces carousel with a picture of Varsity Theatre and replaces the movies with a description of the theater, its owners and its history. Additionally, provides a space to display other small theaters around Seattle in the same family trying to succeed in the competitive movie industry.
Movie Page
Simple but elegant checkout page that lets users easily select the time and seat for their chosen film.
Checkout Page
Simple but elegant checkout page that lets users easily select the time and seat for their chosen film.
Execution: Prototype
During the prototype phase, my goal was to show a short, quick, and playful animation to demonstrate the mobile websites fast and responsive checkout process.
Takeaways
This side project was super educational and worthwhile. Since I normally design for mobile applications and not mobile websites, over the course of the project I learned differences required for designing each of them. Some examples are mobile websites do include navbars for navigation and all the content on it needs to be able to properly scale to a monitor. Designing with these in mind became an exciting challenge and taught me more than designing just another app would offer. Next, this project taught me how to fit a lot of information on a screen without completely overwhelming a user. I do not think I completely managed to reach this goal, however, I am proud of how my design came out. Thinking about the layout of the movie information for hours, helped me get better at this skill. Lastly, I thoroughly enjoyed designing the checkout process and creating the animation for it was particularly satisfying.
Personally, I think this project was missing two things that could have improved it drastically. First, stronger research. Since the target audience for the website is just University of Washington students and since this was just a personal side project, I did not conduct research besides interviews and competitive analysis. Second, teamwork. I did this design completely solo, and I am a firm believer that designing in teams significantly improves the quality of the ideation phase and overall design. If I had a partner or a group to do this project with, I think the results would have been much better.
Conclusion
It is Friday again and the same group of University of Washington students need something to do! Wanting to watch a movie, they decide to give Varsity Theater a try and visit their mobile website to check out what’s playing. They are able to find information about the movies playing easily, and comfortably discuss and decide which one they want to watch. With a clear, painless and swift checkout process, they all get their tickets and seats right next to each other. They head on over, enjoy their flick, and have a great night at the Varsity Theater!
Thanks for reading.
Me outside the Varsity Theatre!