Product Designer / Front-End Back to case studies

VegAvengers Marketing

Designed and built a mission-driven discovery experience to help visitors find vegan festivals, animal sanctuaries, and advocacy organizations through flexible search and responsive interaction design.

  • Astro
  • React
  • TypeScript
  • Tailwind CSS
  • Framer Motion
View Live

Highlights

  • Designed and built a discovery experience for people looking for vegan festivals, sanctuaries, and advocacy organizations
  • Created flexible search behavior for month names, dates, regions, locations, and common synonyms
  • Built an animated resource toggle so users could move between festival and sanctuary discovery modes
  • Organized results into upcoming, TBD, and past states to match how event information changes over time
  • Translated mission-driven content into responsive product surfaces with purposeful motion

Context

VegAvengers is a mission-driven platform for connecting people with vegan festivals, animal sanctuaries, and advocacy organizations. The product-design opportunity was discovery: visitors may not know the exact event name, sanctuary name, country spelling, or month format they need.

I designed and built the front-end experience around flexible searching and lightweight mode switching, so visitors could move between resource types without needing to understand the site’s data model.

The homepage frames advocacy as an active discovery path rather than a static directory.

User Scenarios

  • A visitor remembers that a VegFest happens in March, but not the event name.
  • Someone searches for UK and expects to see results from the United Kingdom, England, or GB.
  • A traveler wants to find animal sanctuaries by region rather than by exact name.
  • A supporter wants to browse advocacy projects and quickly understand which organizations to visit.
  • An event listing has an uncertain date, so the interface needs to show TBD without burying it.

Product Decisions

Flexible query handling. Search supports month names, month numbers, location synonyms, and region matching because real users rarely search with clean database terms.

Mode switching over separate pages. The ResourceToggle lets users switch between VegFest and sanctuary discovery without losing the sense that both are part of the same resource system.

Temporal result states. VegFest results are categorized into upcoming, TBD, and past events so uncertainty is visible instead of hidden.

Motion as feedback. Framer Motion supports mode changes, staggered cards, and hover states. The goal was not decoration; it was helping the interface feel responsive and alive while users browse.

Annotated artifact: the toggle makes two resource modes feel related without forcing one large combined list.
Annotated artifact: search is designed for partial knowledge, including dates, locations, and synonyms.

Interaction Details

The search system handles complex date formats, month aliases, region matching, and location synonyms. It also persists search preferences locally so users can return to a familiar query state.

Sanctuary discovery supports flexible region matching for people browsing by place rather than exact organization name.

The featured projects grid gives advocacy organizations a more editorial surface. Each card uses staggered entry, hover states, and multiple calls to action so the browsing experience stays mission-forward without feeling like a dense database.

Featured projects act as a bridge between discovery and action.

Outcome And Learning

VegAvengers is a useful supporting case because it shows product design in a public, mission-driven context. The strongest lesson was that search quality is not only about algorithms. It is about anticipating how people remember places, dates, organizations, and causes when they do not have perfect information.

If I expanded the case study further, I would add usage data around the most common queries, no-result searches, and which resource mode drives the most engagement.

All Case Studies