Role: Lead UX/UI Designer · Squarespace Developer
Timeline: Sept 2024 – May 2025
Team: Me + 1 Designer/Content Editor
Tools: Figma · Squarespace
The Alvarado Project Website Redesign
I led the UX/UI redesign and Squarespace build for The Alvarado Project (TAP), a nonprofit organization dedicated to preserving Filipino-American history. The legacy site was hard to navigate, blended the mission with the founder’s archive, and required a developer for routine updates, slowing outreach and donations.
Clarified their story by separating the nonprofit’s mission from the founder’s art
Simplified navigation so visitors could easily explore programs, shop, or donate
Rebuilt the site in Squarespace so volunteers could manage it without code
The result? a mobile-friendly, self-managed site that supports fundraising and makes TAP’s mission clear.
The Problem
TAP preserves Filipino-American history, but the legacy site buried the mission, was confusing to navigate and hard to maintain, limiting the organization’s ability to grow.
Navigation was broken
No clear way to support
Content went stale
Unclear messaging
We needed to rethink the structure, clarify the messaging, and make the site easy for their team to manage going forward.
When the story gets lost, support stalls.
The Solution
A website that works.
TAP now has a site that’s easy to navigate and update, with a structure that tells the story, surfaces Donate/Shop, and scales with their content.
-
I separated the nonprofit’s work from Ricardo Alvarado’s artist story, creating clear sections for the organization, exhibits, and the archive.
-
I built a clean, easy-to-follow site map with clear paths to explore programs, learn about the artist, and support the organization.
-
Added visible Donate button and built online shop for books + merch.
-
I rebuilt the site in Squarespace, so volunteers can easily update content, post events, and manage the shop without needing a developer.
-
I created responsive layouts, so exploring the archive, donating, and shopping feels just as smooth on phones as it does on desktops.
Key user flows
Learn About TAP and the Artist Flow
Clear separation between the nonprofit’s mission and the founder’s legacy prevents confusion, builds trust, and steers people to Programs or Support instead of bouncing.
Explore Programming Flow
This is where mission becomes action, previews, dates, and CTAs route people to attend, read, or share, proving TAP’s ongoing impact and keeping visitors moving.
Donate Flow
A persistent, low-friction Donate flow on desktop and mobile converts warm intent while it’s high; clear amounts and minimal steps reduce abandonment.
Shop Flow
A clean shop with accessible checkout lets supporters contribute even if they’re not ready to donate and keeps the mission visible through books/merch.
Discovery & Research
We started by running alignment sessions with TAP’s team to understand their goals, audiences, and challenges. From this, we created two quick personas to guide our design decisions:
Personas
What Wasn’t Working
The old site was messy and hard to use:
Key pages were buried in dropdowns that broke on mobile.
The donate button was easy to miss.
The site map was confusing, mixing programs and org info.
Visitors couldn’t tell what TAP does or how to support them.
Content Strategy & Information Architecture
One of the biggest challenges we tackled was untangling TAP’s story, making it easier for visitors to understand who the organization is, what they offer, and how to get involved.
We worked closely with TAP SF’s team to restructure the site around two key storylines:
The Organization: TAP SF’s mission, programs, and community impact.
The Inspiration: Ricardo O. Alvarado’s personal story and photographic legacy.
We used card sorting and user journey mapping to define a simple, logical site structure. This led to come up with nine clear navigation sections:
Home
About TAP
Programs
Research
About the Artist
Blog
Merchandise
Donate, Contact
This new structure clearly outlines the path for visitors to learn about the organization, explore programming, and support the project without getting lost in unnecessary pages or dead ends.
Wireframes to Final Design
We started with low-fidelity wireframes to figure out the layout and content first before worrying about the visuals.
Shared early sketches to get quick feedback.
Made sure the structure felt clear and easy to use.
From Wireframes to High-Fidelity
Once the structure worked, we moved to high-fidelity mockups, adding visuals, layout, and real content so the client could see the full picture.
Setting the Visual Direction
We built a style tile to lock in the colors, fonts, and look & feel.
This made sure the site felt warm, community-focused, and on-brand.
We refreshed the look and feel to better reflect TAP’s mission
Colors
Warm neutrals with soft accents to complement the photography.
Typography
Serif headlines with clean body text for a modern, editorial feel.
Calls to Action
Clear Donate and Shop buttons to guide visitors to take action.
Style Tile
No-Code Build & Handoff
We built the site on Squarespace so TAP’s volunteer team could manage it on their own:
Reusable sections for adding new programs, events, and merch.
Training resources like walkthrough docs and Loom videos.
Built to grow with their content and community.
Final Outcome
TAP’s new website makes it easier than ever for visitors to explore cultural programs, learn about Ricardo Alvarado, and support the organization’s work. The site is clean, easy to navigate, and simple to manage freeing up the TAP SF team to focus on building community through art and storytelling.
Reflection
This project wasn’t just about fixing a broken site, it was about empowering a grassroots org to tell their story and grow.
I learned how much thoughtful structure and accessibility can impact small teams: the TAP team now has a flexible system that they fully own. I’m proud of how we balanced strategy, usability, and visual storytelling to support their mission.
Projects like this remind me why I switched into design to make tools and experiences that meet people where they are, and actually make life a little easier.
Why This Matters
Nonprofits often don’t have the time or resources to manage complex websites. We designed a solution that works for their visitors and their team, making it easier to explore, donate, and grow their impact without needing technical help.
What We Achieved
Increased engagement: Visitors now explore more pages and stay longer.
Simplified donations: A clear, front-and-center Donate button makes giving easy.
Enabled growth: Volunteers can now update the site themselves, saving time and money.
I’m proud of how we balanced strategy, design, and real-world impact, and I’m excited to bring that same mindset to my next team, helping organizations create experiences that work for people and meet business goals.
More of My Design Adventures
-
![]()
MediaQ
Product Design · UX/UI Design · Branding · Interaction Design
A simple, organized way to keep track of the movies, shows, and books you’re into. MediaQ lets you sort what you’re watching, what’s next, and what you want to share, all in one place.
-
![]()
AppointRx
Product Design · UX/UI Design · Healthcare & Accessibility · Branding
A patient-focused app that simplifies appointment scheduling and communication with independent providers and pharmacies designed to reduce confusion and improve the healthcare experience.
-
![]()
Teamfight Tutor
Product Design · UX/UI Design · Visual Design · Branding · Gaming
Your TFT companion for game-winning guides and insights, designed and optimized for iPhone and iPad to help players climb with confidence.
-
![]()
Visual & Graphic Design Projects
Client Work · Visual Design · Graphic Design · Branding · Typography · Marketing
Check out my visual design work!
