UX/UI Redesign
Design Systems
UX Research
Growth & Revenue
Education
·
9 min read
9 min read

Helping movie buffs discover UCLA's film screenings

Background

UCLA's Film and Television Archive, the second-largest in the U.S., showcases its films at the Billy Wilder Theater in Los Angeles. However, the outdated website made it hard for users to find upcoming screenings.

As a UX/UI Designer, I redesigned the homepage and user flows for finding events. I also created a design system from scratch, making it much easier for film enthusiasts to find events on both mobile and desktop.

Problem/Goal

Developed design system and key screens to enhance usability and accessibility for seniors (65+) across mobile and desktop platforms.

Solution

Developed design system and key screens to enhance usability and accessibility for seniors (65+) across mobile and desktop platforms.

Impact

 *Exact numbers ommited per NDA

Header
paragraph
😍
💸
😍
💸
😍
💸
😍
💸
😍
💸
😍
💸
😍
💸
😍
💸
Header
paragraph
🙏
😀
🙏
😀
🙏
😀
🙏
😀
🙏
😀
🙏
😀
🙏
😀
🙏
😀

Client

UCLA's Film & Television Archive

Role

UX/UI Designer
Visual Designer

Team

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

Timeline

4 months

Tools & Skills

  • Bullet Point 1
  • Bullet Point 2
  • Bullet Point 3
  • Bullet Point 4

Final Designs

Home Page

Event Detail Page

View Location Bottom Sheet

Event Listing Page

Event Filtering Bottom Sheet

Event Calendar Bottom Sheet

Problems

User problem 1
Film Fans Can't Find Upcoming Screenings on Homepage
The main users of the archive's website are movie enthusiasts. They visit the Film and Television website primarily to find information about upcoming film screenings and tickets. However, the current organization of the website makes it hard for them to find these details.
Film Fans Can't Find Upcoming Screenings on Homepage
Problem
This is a where the content's paragraph copy will go. It should only be 4 lines max.
Solution / my role
This is a where the content's paragraph copy will go. It should only be 4 lines max.
Impact
This is a where the content's paragraph copy will go. It should only be 4 lines max.

💡

Key Insight

No entry points of upcoming events on the homepage

Previous home-page

user problem 2
Mobile usability is poor
The current mobile screens present usability and accessibility challenges. Small text and touch targets make it hard for our senior citizen end-users to navigate the website on mobile devices.
Mobile usability is poor
Problem
This is a where the content's paragraph copy will go. It should only be 4 lines max.
Solution / my role
This is a where the content's paragraph copy will go. It should only be 4 lines max.
Impact
This is a where the content's paragraph copy will go. It should only be 4 lines max.

💡

Key Insight

Calendar is not optimized for mobile with tiny text and inaccessible touch targets

Previous event calendar page on mobile

BUSINESS PROBLEM
Collections page is underutilized
The UCLA Film & Television Archive is the largest university-held collection of motion pictures and broadcast programming in the world. However the website's collections tab on has low engagement.
Collections page is underutilized
Problem
This is a where the content's paragraph copy will go. It should only be 4 lines max.
Solution / my role
This is a where the content's paragraph copy will go. It should only be 4 lines max.
Impact
This is a where the content's paragraph copy will go. It should only be 4 lines max.

💡

Key Insight

My stakeholders wanted to facilitate exploration of it's collections tab and showcase it's significance to our users.

7984
“Upcoming Events” Page Clicks
225
“Explore Collections” Page Clicks

Data: Jan 2019 to Jun 2023

Solutions

1
Updated Visuals
Modernize and simplify designs components.
2
Improve Mobile UX
Make access the archive’s resources quick and easy on the go.
3
Discover Events
Highlight upcoming events to satisfy our primary users.
Main Solution
Redesign the Film and Television Archive's website
Through interviews we found out what users and stakeholders wanted and needed. From that, we came up with these main goals to make sure the website redesign would be successful.
Redesign the Film and Television Archive's website
Problem
This is a where the content's paragraph copy will go. It should only be 4 lines max.
Solution / my role
This is a where the content's paragraph copy will go. It should only be 4 lines max.
Impact
This is a where the content's paragraph copy will go. It should only be 4 lines max.

😳

Mobile Homepage Before

There are no links to see upcoming events or access the archive collections. Also, the blue link blocks are easily missed or accidentally tapped because they're too small.

🤩

Mobile Homepage After

I added a horizontal carousel to showcase upcoming events and archive collections on the homepage. Additionally, I strengthed the visual hiearchy of the link blocks by wrapping them in larger containers.

😵

Desktop Homepage Before

Vague wording for block links such as "Watch & Listen Online" and "LA Rebellion" made it confusing for users to predict what would happen once they clicked on a link.

😍

Desktop Homepage After

The redesigned home page features a restructured information architecture. Insights from stakeholder and user interviews helped highlight the archive's offerings, such as film screenings, blog entries, and restoration and preservation information.

How I Started The Redesign Process

Discovery Phase
Understanding Our Primary Users' Needs
The UX team recruited frequent users of the film and television archive's website to understand their main goal for using the site.
Understanding Our Primary Users' Needs
Problem
This is a where the content's paragraph copy will go. It should only be 4 lines max.
Solution / my role
This is a where the content's paragraph copy will go. It should only be 4 lines max.
Impact
This is a where the content's paragraph copy will go. It should only be 4 lines max.

💡

Key Insight

The primary user of the website are members of the general public looking for ticketing information/ upcoming film screenings hosted by the archive.

“
I use it mostly to learn about screenings, which I find the website to be the most helpful."

- Graduate Student

“
Usually for me the first thing I really look at is the Billy Wilder Theater to just see what the screening events are.
- General Public

User Needs

User Research
Our users and their reasons for coming to UCLA's Film and Television Archive's site
Film Fans
want to view screening schedule
Researchers
want to access the Archive’s Collections
Peer Institutions
view the archive's programming history
Productions
are looking to license the archive’s materials
Research Analysis
Project Goals
1
Updated Visuals
Modernize and simplify designs components.
2
Lowering Friction
Make access the archive’s resources quick and easy.
3
Discover Events
Highlight upcoming events to satisfy our primary users.
4
Show Resources
Bring attention to blog, collections, archive info.

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.
Iterate, Feedback, Repeat
Problem
This is a where the content's paragraph copy will go. It should only be 4 lines max.
Solution / my role
This is a where the content's paragraph copy will go. It should only be 4 lines max.
Impact
This is a where the content's paragraph copy will go. It should only be 4 lines max.
Design Process
Low Fidelity Wireframes
I started by creating low-fidelity wireframes of key screens and reviewed these designs with other UX designers and stakeholders for feedback. Once confident with our design choices, we raised the fidelity of our wireframes.
Low Fidelity Wireframes
Problem
This is a where the content's paragraph copy will go. It should only be 4 lines max.
Solution / my role
This is a where the content's paragraph copy will go. It should only be 4 lines max.
Impact
This is a where the content's paragraph copy will go. It should only be 4 lines max.
Design Process
Mid Fidelity Wireframes
After finalizing the content structure from our low-fidelity wireframes, we focused on the website's interaction design for both mobile and desktop.
Mid Fidelity Wireframes
Problem
This is a where the content's paragraph copy will go. It should only be 4 lines max.
Solution / my role
This is a where the content's paragraph copy will go. It should only be 4 lines max.
Impact
This is a where the content's paragraph copy will go. It should only be 4 lines max.
Design Process
Branding Brainstorm
Simultaneously, our stakeholders were curious to see how the redesign's branding might look. I decided to make various mockups of the homepage focusing on color to show how the rebrand might look.
Branding Brainstorm
Problem
This is a where the content's paragraph copy will go. It should only be 4 lines max.
Solution / my role
This is a where the content's paragraph copy will go. It should only be 4 lines max.
Impact
This is a where the content's paragraph copy will go. It should only be 4 lines max.
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.
"Wait! What About Usability?"
Problem
This is a where the content's paragraph copy will go. It should only be 4 lines max.
Solution / my role
This is a where the content's paragraph copy will go. It should only be 4 lines max.
Impact
This is a where the content's paragraph copy will go. It should only be 4 lines max.

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.
A/B Test: Filtering bottom sheets are best
Problem
This is a where the content's paragraph copy will go. It should only be 4 lines max.
Solution / my role
This is a where the content's paragraph copy will go. It should only be 4 lines max.
Impact
This is a where the content's paragraph copy will go. It should only be 4 lines max.

💡

Key Insight

The bottom sheet variant out performed the horizontal scrolling.

Bottom Sheet Conversion Rate -  80%

Horizontal Scrolling Filter Conversion Rate - 20%

Next Step: Per user feedback, add "Done" CTA at the bottom of the sheet.

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
Problem
This is a where the content's paragraph copy will go. It should only be 4 lines max.
Solution / my role
This is a where the content's paragraph copy will go. It should only be 4 lines max.
Impact
This is a where the content's paragraph copy will go. It should only be 4 lines max.

💡

Key Insight

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

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.
Ticketing Information Location is Confusing
Problem
This is a where the content's paragraph copy will go. It should only be 4 lines max.
Solution / my role
This is a where the content's paragraph copy will go. It should only be 4 lines max.
Impact
This is a where the content's paragraph copy will go. It should only be 4 lines max.

💡

Key Insight

90% of participants missed the 'Free Admission' toggle, highlighting the need for a simpler design.

USABILITY TESTING INSIGHT 3 cont.
Implementing user feedback
I reused the education info block for ticketing info, aligning it with other sites' styles. This new placement matched the desktop design, reducing engineering effort and maintaining visual consistency across mobile and desktop.
Implementing user feedback
Problem
This is a where the content's paragraph copy will go. It should only be 4 lines max.
Solution / my role
This is a where the content's paragraph copy will go. It should only be 4 lines max.
Impact
This is a where the content's paragraph copy will go. It should only be 4 lines max.

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.
Component Standardization
Problem
This is a where the content's paragraph copy will go. It should only be 4 lines max.
Solution / my role
This is a where the content's paragraph copy will go. It should only be 4 lines max.
Impact
This is a where the content's paragraph copy will go. It should only be 4 lines max.
RESOLVED PROCESS
Developer Experience
I'm wrapping up standardization work and getting ready to pass my designs to engineers. I am grateful that my team embraced my ideas for user testing and standardizing designs for a better user experience.
Developer Experience
Problem
This is a where the content's paragraph copy will go. It should only be 4 lines max.
Solution / my role
This is a where the content's paragraph copy will go. It should only be 4 lines max.
Impact
This is a where the content's paragraph copy will go. It should only be 4 lines max.

Reflections

What I learned building this

Working on the UCLA Film & Television Archive redesign pushed me outside my comfort zone in ways that shaped how I approach every project since.

01

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.

02

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.

03

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.

Want to work together?

If you like what you see and want to work together, get in touch!

Contents

Final Designs

Problems

Solutions

Research

User Needs

Design Process

Usability Testing

Standardization

Lessons Learned

Copyright © 2025 Michael Elizarraraz · All Rights Reserved.
Contens of this website are not to be used for any purposes commercial or otherwise, without my written consent.
Linkedin