Amherst Cinema II: The Redesign
Project Introduction
Amherst Cinema is an independent, nonprofit movie theater in Amherst, Massachusetts. Going to Amherst Cinema to watch movies with my friends is always really fun! They have a diverse selection of films, including independent, foreign, documentary, and classic movies that are incredibly interesting to watch and learn about. Amherst Cinema's special events are also extremely fun events that I love to go to.
Recently, I attended a local screening of The Room, a cult classic romantic drama directed by Tommy Wiseau known as "the worst movie ever made." The event was with a commentary and meet and greet with one of the actors in the film (Greg Sestero). I thoroughly enjoyed my experience at the theater with my Italian blood orange soda and nutritional yeast on my popcorn, not to mention the hilarious Q&A and meet and greet with Greg Sestero. However, my experience navigating the Amherst Cinema Website's Home Page was incredibly frustrating. This is why I chose to redesign the Amherst Cinema Website's Home Page for one of my independent projects for my CS-325: Human Computer Interaction class.
For this project, I first designed some user personas. Then, I used Balsamiq to recreate the user experience for the current design of the home page, examined pain points, and redesigned the home page through a prototype in Balsamiq. Finally, I used Figma to create a high-fidelity prototype of the new design.
Designing User Personas
Persona 1
Name: Olivia
Occupation: B.A. in English Candidate at UMass
Age: 21
Location: On-Campus Housing, Amherst
Motivations: Relax and unwind with friends, explore unique films beyond mainstream Hollywood, attend horror movie nights or cult classics.
Background: Olivia is an extroverted, fun-loving junior at UMass Amherst majoring in English with a minor in Media Studies. She's heavily involved in campus life, including film clubs and social activities. Olivia developed an interest in movies in Freshman year when her friend group watched The Rocky Horror Picture Show at Amherst Cinema. Ever since then, she's been going to watch a couple movies a month with her friend group at Amherst Cinema, mostly cult and horror classics. Olivia usually buys her tickets last-minute when her friend group decides they want to watch a movie.
Persona 2
Name: Miguel
Occupation: Ph.D. Film Studies Candidate at UMass
Age: 26
Location: Apartment, Downtown Amherst
Motivations: Stay updated with the latest in independent and foreign cinema, find films relevant to his dissertation, attend post-screening discussions and filmmaker Q&As.
Background: Miguel was always fascinated by movies ever since he stumbled upon his uncle's copy of City of God. During his undergrad years, he developed a passion for film theory and decided to pursue it academically. Now, as a Ph.D. candidate in Film Studies, he's researching Latin American Cinema. He spends most of his time either in the library or at academic conferences, and sees Amherst Cinema as a vital resource for his personal passion. He spends time watching and analyzing films independently, but watching 1-2 films each week at Amherst Cinema is special to Miguel because of the community and because he is a member. He usually watches films at Amherst Cinema when he wants a break from his thesis, but he sometimes plans ahead to go to special events.
Persona 3
Name: Julia
Occupation: Visual Artist
Age: 31
Location: Apartment, Northampton
Motivations: Support independent art forms, gain inspiration from experimental or visually innovative films, connect with other local creatives.
Background: Julia has always been creative, from painting as a child to pursuing photography and mixed media as an adult. After studying visual arts at MassArt, she moved to Northampton to be part of a growing artist community. Julia makes her living through freelance projects, selling prints online, and exhibiting her work in local galleries. As a visual artist, she's drawn to films that push boundaries, either through innovative storytelling, unique cinematography, or experimental techniques. Amherst Cinema is a place where she can find artistic inspiration, attend thought-provoking films, and meet fellow creatives at local events. She likes attending special events/screenings to learn more about the art form, and she likes going to Amherst Cinema to get inspiration for her projects and overcome creative block. Since she goes to Amherst Cinema frequently, she is considering becoming a member.
Persona 4
Name: Robert
Occupation: Bank Manager
Age: 42
Location: House, South Amherst
Motivations: Spend quality time with his wife and two kids, introduce them to classic and animated films, and find family-friendly events or matinees.
Background: Robert has lived in South Amherst his whole life and now works at the local Florence Bank. He and his wife have two young kids, ages 7 and 10, and he enjoys spending weekends finding ways to entertain and educate them while spending quality time with them. Mark is a big fan of classic animated films from his own childhood, and some newer titles, and wants to introduce his kids to a wide variety of movies, from new animated releases to beloved classics. Amherst Cinema offers family-friendly screenings that appeal to both him and his kids, with occasional special events like sing-alongs or holiday-themed movies. He doesn't go to Amherst Cinema too frequently, and usually only shows up for the family events.
Current Home Page Design
Wireframe 1 - Home Page
Navigation Bar
Navigate to Films/Events, Membership, Support (Amherst Cinema), About, Sign In, and Amherst Cinema Socials.
Carousel
Shows movies currently playing and upcoming special events/screenings.
Playing Today
Showtimes for films playing today.
About Us
Section with Newsletter, About, Parking Tips, News (Again), Accessibility Details, and Awards information.
Calendar
Users can hover/click on dates to see showtimes for that date.
Upcoming In-Person
Section showcasing upcoming special events and screenings.
Join Our E-Newsletter
Signup section for Amherst Cinema newsletter.
Footer
Shows Films, Membership, About Us details (again). Contact and Nonprofit details, also.
Wireframe 2 - Home Page > About
About Tab
Links to About Amherst Cinema, Special Event Newsletter, Health & Safety information, News & Updates, Board & Staff information, Awards & Recognition information, Employment information, and Contact information. This is very complicated to navigate.
Wireframe 3 - Home Page > Support
Support Tab
Links to Donation, Gift Ideas, and Membership pages.
Wireframe 4 - Home Page > Membership
Membership Tab
Links to Membership page (again).
Analyzing User Pain Points
Pain Point 1 - Visibility of Main Functionalities
Most users come to this website to purchase movie/event tickets, explore movie/event times, and plan their visit. Olivia, Miguel, Julia, and Robert are all looking for this information.
In the current version of the website, almost all of this information is below the fold (users have to scroll to find this information). This makes finding the information that our users need more complicated than it needs to be.
Furthermore, the page is also cluttered with other information: the About Us section with an unreadable newsletter, and an E-Newsletter Signup right on the page. This also obscures the main information and functionalities that all of our users are looking for, making viewing showtimes/purchasing tickets much harder than it needs to be.
Pain Point 2 - Poor Navigation Bar Organization
The Navigation Bar has confusing information architecture that may impede users from finding information they're looking for. For example, the Membership page is linked twice under the Membership tab and the Support tab. However, the "Parking Tips" is only linked once on the page, and nowhere on the Navigation Bar. Miguel or Julia would be most likely to support the museum through membership as they are frequent visitors with disposable income. However, all of our users would benefit from parking information, which means parking information should be more visible than membership information. This is not the case with the current design.
Furthermore, the About Us section contains a mix of information about Amherst Cinema and logistics such as parking/health/safety information, linking to 8 different pages. This is hard to navigate for all users, leading to potential frustrations.
Pain Point 3 - Carousel Issues
The carousel is hard to navigate as it switches images/movies every few seconds, and the only way to go to a specific image/movie is to click on one of the dots. Users like Robert and Olivia who look for special events can't use this carousel to view this information. It's difficult to go to the previous image/movie because the dots are very small to click. Lastly, there is also a negative transfer effect because most carousels on websites have arrows to navigate/scroll through the images which our users may expect.
Low-Fi Prototype (Balsamiq)
Wireframe 1 - Home Page
Navigation Bar
I moved Membership under the new Support Us section, and added a new Plan Your Visit. This makes Health & Safety and Parking information more visible for all users, but still lets Miguel and Julia find Membership information to continue supporting Amherst Cinema.
Please Note
I changed the Please Note text into a dismissable alert. This allows users to acknowledge the alert and continue with their usual workflow.
Main Home Page Section
The page has only two columns now to simplify finding information for all of our users. The Playing Today section is the biggest part of website now because Miguel, Julia, and Olivia like to purchase tickets to movies somewhat impulsively and making this decision should be the simplest easiest task for them. Comparatively, if our users have more time to spend on the Amherst Cinema website, they can look at the events which are still very visible, despite not being the biggest part of the website any more. Events can be less visible that the Playing Today because users would usually spend more time exploring the events, and purchasing event/special screening tickets is usually a less impulsive decision.
Additionally, I added images for the movies in the Playing Today section. This should help users such as Miguel, Julia, and Olivia to make quicker decisions about what film they would like to watch today.
Calendar
I made the calendar smaller to make space for improved visibility for the Playing Today and Upcoming In-Person sections, but the calendar is still accessible for users to plan ahead.
Wireframe 2 - Home Page > Dismissed Alert
Dismissed Alert
This wireframe shows the home page after a user dismisses the Please Note alert. As mentioned above, this allows users to acknowledge the alert and continue with their usual workflow.
Carousel
I decreased the height of the carousel to have the "Playing Today" and "Browse Our Calendar" sections above the fold, increasing their visibility. This should simplify the process of purchasing movie/event tickets and viewing showtimes.
I also added arrows and increased the size of the dots on the carousel for users to easier navigate the carousel images/movies. This should simplify the process of viewing special events.
Wireframe 3 - Home Page > About
About Tab
To reduce the complexity of the About Tab and improve visibility of information users may need to plan their visit, I moved some pages such as Health & Safety information into a new Plan Your Visit Tab. This reduces the About Tab into only 6 links from 8, making finding information much easier for all users.
Footer
I removed the sitemap in the Footer because it is redundant with a well organized Navigation Bar. Instead, I shifted some information from the third column of the old design into the Footer. This preserves having all of the information in the old design with the benefit of having upcoming events and films playing today being the most visible. This allows users to fulfill their most important tasks of exploring showtimes/special events, purchasing tickets, and planning their visit, while still having access to subscribing to Amherst College's newsletter and donating to Amherst Cinema, for example.
Wireframe 4 - Home Page > Support Us
Membership/Support Us
I merged the Membership details into one Support Us section. This gives us space for a Plan Your Visit section, which is important information for all of our users. I kept Membership/Support details visible by linking those sections in the footer. This allows Miguel and Julia to continue supporting Amherst Cinema, and Olivia and Robert to consider supporting Amherst Cinema, without taking up too much space on the page.
Wireframe 5 - Home Page > Plan Your Visit
Plan Your Visit
I added links to Parking Tips, Accessibility, Health & Safety, and Contact information in the navigation bar under a new Plan Your Visit section. In the old version of the website, this information was divided and hard to find. Users had to find some of the information in the rightmost column, and some in the About section. However, in this design, planning their visit is much more visible, benefiting all users.
High-Fi Prototype (Figma)
Translating from the low-fidelity prototype to a high-fidelity prototype in Figma had some challenges. For example, translating the Balsamiq UI into Figma required designing a color palette. To design the prototype, I sampled the colors, fonts, and logos from the current website to preserve brand identity.
Additionally, building this prototype required building custom components such as a new calendar, a new carousel, and buttons for the footer in Figma. I matched these components to the current website as closely as possible. For example, I based the new buttons on the design for the "Subscribe" button for the newsletter, but I bolded the text for improved readability.
Wireframe - Home Page
Figma Prototype + File