Filters without frustration:
Website Redesign Prototype for the nonprofit Canyon Cinema
What is Canyon Cinema?
Canyon Cinema is one of the only major distributors for prints of avant-garde and experimental film in America. Art curators, educators and creative non-profit organizations have been coming to Canyon Cinema’s unique catalog of both new and historical celluloid film for over 50 years.
This non-profit based in San Francisco has over 4000 archived films. We found that their website does not convey its purpose nor give an adequate search experience. As a team of 5 we defined Canyon Cinema’s purpose by creating an easy experience to rent from the archives and get a taste for other offerings.
My role included user interviews, client interview, survey creation and distribution, user persona, wireframe ideation, and lo-fi prototype.
Technologies Used: Figma, Invision, Miro, Giphy.
The Research:
Client and User Interviews
At the beginning of the project, I and one other teammate met with the client to get all the necessary information on the table. We learned that Canyon Cinema’s foundations are grassroots starting in 1961 in artist Bruce Bailey’s backyard as film screenings.
As it turns out Canyon has never had a visual brand style. All visual branding has always been created by artists that have been involved with the community. Besides celluloid film, Canyon has a growing digital collection that is adding new content every week.
Future goals Canyon hopes to achieve include the ability to host video content, film previews for the archive, better publishing capabilities and have a more robust search functionality.
Key takeaways
We needed to gain better insight on what features and functionality were crucial to our users. I conducted user interviews to have a deeper understanding. The biggest surprise was the different types of experimental film criteria such as film size and format.
In addition to interviewing 5 artists about how they like to watch and find films we also surveyed 80 people. The outcome displayed how others find and learn about films and we found the majority was through word of mouth or watching trailers, we also found that 86.3% of those we surveyed were interested in donating to a non profit.
Examining the landing page…
We examined current obstacles on their landing page.
Competitor Analysis
We researched what other film distributor and streaming capabilities competitors had in common.
Affinity Diagram
We found that the main ideas about user includes living in a metropolitan area, is a college graduate in mid 30’s, is Involved with artist communities, and has a very specific taste about film and art.
We created “Zah“
Bringing the research together…
Problem Statement We believe that film lovers need access to Canyon Cinema’s archives. Re-organizing and sorting canyon cinema’s website for artists and independent film lovers will fuel the art community and inspire creative contributions.
How might we improve access to Canyon Cinema’s archives, events and screenings so that Canyon Cinema Foundation continues to serve as an essential resource for educators, curators, researchers, enthusiasts, potential and existing members in learning about independent film, which will expand the community of artists and the creation of artist works, measureable by increased membership and donations.
Feature Prioritization Matrix
Value Proposition: For over 50 years, Canyon Cinema has been a trusted distributor of experimental, avant-garde, non-genre celluloid film of both new and established artists, that commercial movie theaters do not offer. By providing a resource to art curators and creative non-profit organizations, they are able to cultivate and support creative arts communities both internationally and locally.
Site Map
User Flow
Journey Map
User Journeys are an awesome tool to understand the experience the product currently provides to its users. We have mapped out the current user journey and identified the pain points and challenges we wanted to improve.
Wireframe sketches
The first step in our design process is creating lo-fi sketches. While digital wireframes and visual design take days and weeks to complete, sketches can be done in a few hours, giving us the option to explore different possibilities.
What we felt was most important in our key prototype ideas include the screen being split into two halves. The first half for navigation and highlights, and the second dedicated to film rental and purchase via the archives catalogue.
Lo-Fi Prototype for Desktop + Mobile
To better understand how well users understood the website’s navigation, we decided to do cart sorting. During the exercise, our users were asked to sort the menu items into groups they see fit. After 4 participants completed the activity a pattern emerged. Based on the research, we designed much better navigation, which was well-received by users during usability tests.
User Testing Feedback
With this feedback we created our hi-fi and checking that the contrast of the colors and fonts would be inclusive throughout the app.
Style Guide
After the wireframes are done we created the so-called look and feel designs. Each design explores a different visual concept to choose the best visual direction for the product.
Key Screens
The Hi-Fi
For the final visual designs, we used figma. During this phase, the goal of the design was to create an ease of use for renting and searching for specific films with certain visual specifications. The biggest challenge was looking to filter the films without excluding the magic of coming upon and exploring films you would not normally stumble upon.
Mobile
Desktop
Findings
Usability tests are vital when building digital products. To test we asked participants to perform a series of tasks while observing them and taking notes. The usability test’s goal is to uncover flaws and things that are not straightforward in the designs. Using the test findings, we can iterate the designs and create a much better, smoother user experience.
Next Steps
Streaming capabilities.
Merge canyoncinema50.org content with main site, including more content like essays, ephemera and more interactive materials for users to enjoy.
Redesign the About Canyon Cinema section to include historical content from the past 50 years.
Add descriptions for preview to give users more information.
Review navigation titles for easier understanding for user (Films vs Film Rentals).
AI driven smart search engine capabilities.