UX/UI Redesign
Design Systems
UX Research
·
9 min read
9 min read

Redesigning UCLA’s Film Archive website to boost event discovery by 80%

Overview

UCLA’s Film and Television Archive struggled with outdated navigation and poor mobile usability, making it difficult for film enthusiasts to discover upcoming screenings.

Impact

 *Exact numbers ommited per NDA

I redesigned the website’s homepage and event flows, creating a scalable design system with 16 reusable components. This improved content discovery by 80% and reduced bounce rates by 90%, making it easier for users to explore events across devices.

Role

UX/UI Designer
Visual Designer

Client

UCLA's Film & Television Archive

Team

Serena Tie (Visual Designer)
Taylor Che (UX Designer)

Timeline

5 months (part-time)

Tools & Skills

  • Design: Wireframing, Rapid Prototyping, Design Systems
  • Research: Usability Testing, A/B Testing
  • Stakeholder Management: Data Driven Advocacy, Design Documentation

Problems

Main user painpont
🎥 Film enthusiasts struggle to access UCLA’s Film and Television Archive resources due to 🌀 disorganized information architecture and a 📱 non-optimized mobile experience, making it difficult to 🔍 discover and engage with film content.
User Problem 1

Lack of ticketing entrypoints

The main use case for the website if for film fans to find upcoming events and ticketing information. However the current website lacks entry points to this information!
User Problem 2

Unusable for senior citizens

Senior citizen users have difficulty finding upcoming events on mobile due to a hard to access calendar.
Business Problem 3

Underutilized "Explore Collections" page

The archive features a rich catalog of film and television cellections, but the "Explore Collections page only has 225 page clicks...
Business + User Problem 4

Web design stuck in the early 2000's

The archive's visuals feel outdated. From interviews  users and stakeholders want a modern redesign.

Solutions

Redesign the Film and Television Archive's website
I came up with these main goals to make sure the website redesign would be successful, backed by interviews with users and stakeholders
🎨
Update Visuals
Modernize and simplify designs components.
📱
Improve Mobile UX
Make access the archive’s resources quick and easy on the go.
📆
Discover Events
Highlight upcoming events to satisfy our primary users.

Before & Afters

Mobile Homepage Before

No links for upcoming events or archive collections, and small blue link blocks are easily missed or accidentally tapped.

Mobile Homepage After

I added a horizontal carousel to the homepage for upcoming events and archive collections, and enhanced link visibility by placing them in larger containers.

Desktop Homepage Before

Vague link labels like 'Watch & Listen Online' and 'LA Rebellion' confused users about the link destinations.

Desktop Homepage After

The redesigned homepage highlights the archive's offerings film screenings, blogs, and restoration info using insights from stakeholder and user interviews.

Impact

📉
90% → 10%
Bounce rate reduction for ticket finding task
🧱
Created Design System
streamlining design consistency and development hand-off processes
🤳
Improved Accessibility
for users 65+ using mobile devices by increasing touch target sizes

Design Process

Design Process
Iterate, Feedback, Repeat
After gathering insights from user and stakeholder interviews, the team decided the archive's website needed a UI refresh. We iterated based on these findings, regularly consulting with our primary stakeholder, Jennifer Rhee, Digital Content Manager of UCLA's Film and Television Archive.

To prepare for developer handoff, I proposed creating standardized designs of our most-used components to address inconsistencies between designers' wireframes.

I co-created a design system for the website, serving as a source of truth between designers and developers to ensure consistency and enable engineers to build components once and reuse them, reducing their effort.
Design Process
"Wait! What About Usability?"
After creating various mockups, I noticed we were prioritizing visuals over usability. We debated details like sharp or rounded corners for components instead of asking, "Is this specific component helping users find film screenings? Is it easy to use?"

To address this, I suggested in-person usability testing with our end users. Our UX team tested our desktop and mobile prototypes, measuring task completion success rates and A/B testing filtering components.

In-Person Usabiilty Testing with our end-users at the Billy Wilder Theater

Usability Testing Findings

USABILITY TESTING INSIGHT 1
A/B Test: Filtering bottom sheets are best
Our team was uncertain whether a bottom sheet or horizontal scrolling would be better for filtering events on the detail page. We tested both designs with participants, asking them to apply three filters: 36mm, 16mm, and Guest Speaker. We measured completion rates and gathered feedback on improving the component.

I also added a CTA at the bottom of the sheet. During usability testing, our participants wanted a "done" button to confirm their selections and feel " complete" after selecting their filters.
USABILITY TESTING INSIGHT 2
Confusing Language
Users were confused by terms such as “Virtual Events” and “Touring Series.” From this insight, I collaborated with the Director of Content to rewrite confusing filtering tags, choosing wording that would be easily understood by our Gen X users.

Confusing Language

Test participants were confused with the filter text, especially the term "Virtual-Event"

"Virtual Event...does that mean I have to wear a headset or something?" - User quote

Changed Content Design

Users preferred to have ticketing information at the top of the page. This pattern mimics the desktop version, reducing engineering effort.

"I wish there was a button that said, 'done' or 'go' to lock in my selection. After selecting I am not sure what to do now" -User quote
‍

USABILITY TESTING INSIGHT 3
Ticketing Information Location is Confusing
To help users find ticketing information, I proposed a collapsible sheet fixed at the bottom of the screen. My hypothesis was that users could toggle the bottom sheet at any point while scrolling the event detail page to view ticketing info.

Toggle Component

90% of participants missed the toggle! "Was this there the whole time!?" - User quote

Final - Ticket Info Block

Users preferred to have ticketing information at the top of the page. This pattern mimics the desktop version, reducing engineering effort.

Standardization

RESOLVED PROCESS
Component Standardization
As we neared completion of our designs, and prepared to hand off designs to engineering I raised concerns about inconsistencies among designers' work.

Between the visual designer and myself there were differences in spacing, text token usage, image aspect ratio and so on. To lower the level of engineering effort and to create a unified design across the entire website, I audited and created standardized components for our most used UI components, ensuring a cohesive user experience.

Final Designs

Home Page

Event Detail Page

View Location Bottom Sheet

Event Listing Page

Event Filtering Bottom Sheet

Event Calendar Bottom Sheet

Key Learnings

📚

This is a Library, NOT Tinder!

In my visual design process, I defaulted to familiar styles from past roles, like those I used at Tinder. However, my approach clashed with the educational nature of the Film and Television Archive's branding. Feedback helped me understand the need for a more academic tone rather than trendy aesthetics. This taught me the importance of adapting design styles to fit each project's context.

📐

Prioritize Structure Over Visuals

As a new team member, I was eager to impress with my design skills. However, I often jumped ahead in the process, focusing on design system details instead of user needs in low-fidelity wireframes. This led discussions with stakeholders towards color and visuals rather than content or interaction. Realizing this, we shifted focus to low-fidelity prototypes, ensuring user needs were met before diving into visuals.

✍️

Iterate, Iterate, Iterate!

I appreciated the opportunity for numerous design iterations in this project. Unlike my design classes where we often stick with the first idea, here we iterated based on feedback from stakeholders and users. This taught me the value of testing various solutions and refining based on feedback rather than being wedded to the initial concept.

📧

Let's build something impactful together!

Email me at
Contents

Problems

Solutions

Design Process

Usability Testing

Standardization

Impact

Lessons Learned

Copyright © 2024 Michael Elizarraraz · All Rights Reserved.
Linkedin