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.

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.

After finalizing the content structure from our low-fidelity wireframes, we focused on the website's interaction design for both mobile and desktop.

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.

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.