The Alvarado Project

About

The Alvarado Project (TAP) is a San Francisco based nonprofit preserving Filipino American history through photography and cultural programming

Role

Timeline

Tools

August 2024 - June 2025

Figma, Adobe Illustrator, Squarespace

UX Designer on a team of two

The Problem

While the organization’s work is deeply impactful, its legacy website did not reflect that value. The site was difficult to navigate, unclear in its messaging, and challenging for the internal team to maintain, limiting both user engagement and organizational growth

Key UX Challenges

  • Broken or inconsistent navigation created friction for users

  • No clear path for donations or supporter engagement

  • Content became stale due to maintenance complexity

  • Messaging lacked clarity, causing confusion about TAP’s role, programs, and offerings

Our Solution

TAP now has a scalable, easy-to-maintain website that clearly communicates its mission, highlights donation and shopping pathways, and supports long-term content growth

Key UX Decisions & Rationale

  • Separated the nonprofit’s mission and programs from Ricardo Alvarado’s artist narrative to reduce cognitive overload and resolve user confusion between organizational and individual content.

  • Created a streamlined site map with clear paths to explore programs, learn about the artist, and support the organization—helping users quickly orient themselves and take action.

  • Rebuilt the site in Squarespace to remove technical barriers, allowing staff and volunteers to keep content fresh without relying on developer resources.

  • Elevated the Donate call to action and introduced an online shop for books and merchandise to align the interface with TAP’s primary business goals and supporter intent.

  • Designed fully responsive layouts to ensure seamless access to the archive, donations, and shop across devices, reflecting how users primarily engage with nonprofit content.

Discovery & Research

Understanding our Users

Site Audit

Heuristic Evaluation Findings

  • Navigation: Key pages buried in complex, often mobile-breaking drop-downs

  • Call-to-Action Visibility: Primary donation button easily overlooked

  • Information Architecture: Organizational content and program details intermixed, causing confusion

  • Clarity & Engagement: Visitors struggled to understand TAP’s mission, offerings, and ways to support

Information Architecture & Content Strategy

Clarifying TAP’s narrative and simplifying navigation

The Challenge
The legacy site conflated organizational information with the founder’s biography, resulting in unclear messaging, diluted mission focus, and a fragmented user journey

Our Approach
In collaboration with TAP’s team, we defined two distinct content narratives to create clarity and improve wayfinding:

1. The Organization - Mission, programs, and community impact

Which resulted in nine clear navigation sections:

2. The Inspiration - Ricardo Alvarado’s personal story and archival photography

To support this separation, we conducted card sorting and user journey mapping to establish a streamlined, intuitive site structure that aligns with user expectations and reduces cognitive load.

Design

Wireframes

Option A

Option B

Design Systems

To ensure visual consistency and alignment with TAP’s mission, I established a foundational design system defining color, typography, and core UI components.

  • Color palette: Warm neutrals paired with subtle accent tones to complement archival photography and reinforce a sense of community and trust

  • Typography: Serif headlines combined with sans-serif body text to balance editorial character with modern readability

  • Calls to action: High-contrast, prominent button styles used consistently for primary actions to improve discoverability and conversion