Three Dollar Bill Cinema Site Redesign
Modernizing Three Dollar Bill Cinema’s website design language and improving their information architecture to increase clarity and user engagement.
Context
For HCDE 537 User Centered Web Design, we worked with a client to redesign their website.
My Contribution
I conducted user interviews to get initial perceptions of the TDBC website and its’ usability issues. I also led the card sorting effort and developed the information architecture which was used to inform the hierarchical design language used in the final prototype. I helped implement the final prototype and presented to stakeholders.
Role UX Researcher
Skills & Tools: Optimal Workshop; Figma; User Interviews; Survey Design; Personas
Client Three Dollar Bill Cinema of Seattle, WA
Team Phoebe Huang, Lynn Shen, Christopher Sim, Jing Zhou
Tags Information Architecture; Card Sorting; Web Design
Duration January - April 2021
Outcome
A new information architecture for Three Dollar Bill Cinema as well as high-fidelity prototypes which will be used to implement their new site.
Three Dollar Bill Cinema…
is a non-profit organization in Seattle, WA focused on showcasing the and supporting queer film programming and the engagement of constructive social dialogue through LGBTQ+ education and experiences.
Business Objectives
We met with the Three Dollar Bill Cinema board members to discuss their expectations and determine the business outcomes of the website redesign.
Ticketing
Increase visitors who purchase tickets by 20% within the first 5 visits.
Donations
Increase the total number of annual amount of donations by 20% within one year.
Memberships
Increase the visitors who register for memberships by 20% within the first 8 visits.
Engagement
Increase time spent on site by 50% within 6 months of the redesign.
User Research Findings
I conducted surveys, user interviews, and usability evaluations to determine current usability pitfalls in the current Three Dollar Bill Cinema website. Using the data we collected, we used affinity mapping to find themes in the responses we received. After bringing our research together, we found three major issues with the current website.
Identity
Users were unsure of the mission, purpose, and events hosted by TDBC.
Content
Content was not located where users expected and was very repetitive.
Cohesion
Visual style and language across website was often inconsistent.
Personas
Based on the findings from our research and the business goals we developed with our clients, our team developed personas of the primary user groups who visit Three Dollar Bill Cinema’s website to bring alignment to understanding their needs and their goals.
Audience
These are the most common site visitor. They’re usually an older generation and lower confidence computer users, so they need the site to be easy to use and navigate. They are the most likely group to be or want to become members and are a large percentage of the donors.
Goals:
Buy tickets and passes
Find event details
Donate
Become members
Sponsors
These site visitors are other community organizations or corporations that are looking to engage with Three Dollar Bill Cinema. They want to understand the purpose and programming of TDBC and get in touch with the right people to begin building a relationship.
Goals:
Understand TDBC purpose & events
Learn about sponsorship levels & benefits
Contact TDBC representatives
Volunteers
These are a younger group of people who typically contribute to TDBC with their time instead of money. They’re often students submitting films and volunteering at festivals. This group gets most of their information about events from social media but visits the site to buy tickets and get additional details.
Goals:
Find volunteer opportunities
Find event details
Submit a film to an upcoming film festival
Updating the Information Architecture
We conducted a content audit and kept a list of all the information that was being presented on the Three Dollar Bill Cinema website. Using this information, we determined what cards to include in our Card Sorting on Optimal Workshop. We sent our card sort exercise out to TDBC members and our personal networks to understand how to structure the site information. Using this data, I developed a new information architecture. The goals of this new information architecture were to cut down on misplaced and repetitive content and create clear paths for site visitors to complete their goals and make sure appropriate information is always accessible.
Sketches
We started by each selecting three different pages of the site and doing initial sketches.
Lo-Fidelity Prototypes
After developing our sketches, we discussed some of our favorite ideas and how they addressed user needs. As a team we settled on some of the major interactions and pieces of information we wanted to showcase. Using our sketches and this new direction as reference, we each took to designing pages from different levels of the information hierarchy to begin building out potential design systems TDBC could use going forward. Once we collected all of our low-fi prototypes, we walked through these prototypes with our clients to get their feedback and shared some of their own.
Wireframes
Armed with sketches and feedback from each other and our clients, our team developed wireframes for each of the pages represented in our information architecture. These served as a way for us to test color palettes, validate user flows, and begin to build our visual hierarchy and design system.
Brand Guidelines & Design System
After developing our wireframes, we created different versions to try out different color and font schemes. We shared these variations with our clients and worked with them to decide on color and font schemes. These became the foundation of our design tenants going forward, and we used them within the design system we created.
Color Palette
Before & after our redesign of the TDBC color palette.
Visual Components
[Left] Example image treatments and callouts. [Right] Top to bottom, example header treatments for primary, secondary, and tertiary pages.
Example logo, graphics, and button treatments.
Reflection
What challenges did we face along the way?
It was hard for us to gather participants for the usability research conducted in this project. This meant our data lacked representation of people who were already familiar with TDBC. Due to time constraints we ultimately relied on our TDBC points of contact to help us gain a better understanding of the different personas.
Similarly, we were required to design our final prototype with many constraints in mind. Our clients were using WordPress to build their website and were not comfortable with the site builder tool, so we needed to create a design that would be simple to implement within the abilities of WordPress.
Next Steps:
As of February 2022, Three Dollar Bill Cinema has started the process of implementing this site redesign. I am volunteering alongside four other University of Washington Human-Centered Design students to complete this work. TDBC has given us additional requirements, so our team will be repeating some of the usability research and updating the information architecture and design to meet their new requirements.