AfA Coalition Website Redesign
Introduction
(Feb 8 – Mar 14)
I led a comprehensive redesign and development for Asia for Animals to improve donations, grow membership, and streamline resource access. My role covered every UX phase—from discovery and user research to final interface design development.
Project Goal
Create a user-centric, visually cohesive website that clearly communicates AfA’s mission, encourages recurring donations, and supports Network Member Organizations (NMOs) with easily navigable resources.
Initial Observations
After reviewing the existing site, I recommended:
More prominent mission-focused messaging on the homepage.
Simplified navigation to guide users to “About,” “Donate,” and “Membership” pages.
Unified branding and improved accessibility (e.g., color contrast, alt-text).
Consistent calls-to-action to boost engagement and encourage donations.
Research Phase
1. Secondary Research
Competitive Analysis: Reviewed WWF and ASPCA to identify successful donation funnels, recurring-gift options, and cohesive branding.
Best Practices: Found that user segmentation (donors vs. NMOs) and transparent fund usage drive engagement.
Key Opportunity: Develop a robust resource library and clearer calls-to-action to convert casual visitors into active supporters.
2. Website Metrics Analysis
Traffic Growth: +20% site sessions and +15% unique visitors (last 30 days).
Top Sources: Direct, Google (organic), and Facebook (organic).
User Geography: Most visitors from Taiwan, the US, the UK, India, Vietnam, and Indonesia.
Engagement: Avg. 6m session duration, 1.5 pages per session, ~68% bounce rate.
High-Performing Pages: “Conference 2025” and “Primate Cruelty Exposed” blog post attract the most views and longest time-on-page.
3. User Survey
Distribution: Google Forms sent to donors, NMOs, and general supporters.
Key Insights:
Users want a clearer homepage mission statement.
Donors prefer a short, transparent donation process.
NMOs request a dedicated membership hub with resource-sharing tools.
Many appreciate AfA’s cause but find site navigation overly complex.
Outcome
These findings validated the need for a more intuitive navigation, enhanced transparency around donations, and dedicated support for NMOs—shaping the subsequent ideation, design, and testing phases.
(Research - Full Report)
(Website Metrics taken into anlysis)
(User Journey Map)
(Design system)
Ideation
Drawing on insights from my research phase, I began by developing a comprehensive user journey map. This mapped how both new and returning visitors progress—from discovering resources or upcoming events, to volunteering or donating. My aim was to optimize the site’s initial impression, recognizing that first impressions shape user perception. (Rosenthal’s 1992 study notably showed how ten-second, silent video clips of teachers aligned with end-of-semester evaluations, underlining how quickly people form lasting judgments.)
I then benchmarked sector best practices by reviewing the WWF website and aspacnet.org. These references, combined with my research into global design trends of 2025, informed a layout strategy that’s flexible, culturally inclusive, and easy to navigate—vital for an international audience.
Next came technical refinements—expanding AfA’s original color palette into a complete design system with:
Typography: A clear font hierarchy to spotlight critical information.
Layout & Spacing: Consistent margins and padding for a clean, modern interface.
Buttons & States: Bold shapes and swift hover transitions to enhance interactivity.
By pairing data-driven user journeys with forward-looking design principles, I ensured that users would grasp AfA’s mission almost instantly—boosting trust, clarity, and meaningful engagement on a worldwide scale.
Design Phase
Building on the insights from the ideation phase, I began by creating low-fidelity wireframes. My primary objective was to eliminate clutter, ensuring that every on-screen element served a clear purpose. This “less is more” mindset guided each iteration—prioritizing simplicity, visually distinct calls-to-action, and concise content blocks.
By reducing the number of competing elements in each view, users could focus on key messages—like AfA’s mission statement and calls to donate or join. This early wireframe stage also allowed me to test layout fundamentals—hierarchy, spacing, and navigation flow—before refining visuals and interactive details. The result was a design blueprint that balanced minimalism and impact, clearly directing user attention toward the most critical information and actions.
(First Version of Prototype)
(Low-Fidelity wireframes)
After conducting an initial test phase, I discovered that users wanted to feel more central to the experience, with a website that was visually engaging and deeply reflective of its Asian roots. The initial wireframes, while minimal, didn’t fully capture a memorable sense of place or culture.
To address this, I looked for universal references to Asian culture that could resonate with a broad audience—young and old alike—and found inspiration in the Kung Fu Panda aesthetic: simple, iconic, and instantly evocative of Asia. Drawing on this idea, I updated the background to a more playful motif and introduced lightweight animations that invite visitors to immerse themselves in AfA’s mission. This shift ensured users immediately feel part of the coalition, bridging empathy and familiarity from the very first interaction.
Final Prototype & User Testing
For the final prototype, I incorporated the revised Asian-inspired visuals and playful backgrounds, aiming to draw users into AfA’s mission as soon as they landed on the site. I also added light animations and a welcoming tone to encourage deeper engagement.
To validate these choices, I conducted a user testing round (see report details) focusing on key tasks—like finding “Meet the Team,” donating, and checking “Taipei 2025 Conference” info. The test results confirmed that:
Donation Flows were praised for clarity and simplicity.
Visual Updates successfully conveyed a stronger Asian spirit, making the site feel more inviting and culturally resonant.
Content Discoverability needed refinement in some areas (e.g., “Podcasts” or “Meet the Team” placement).
In response, I adjusted navigation labels, improved readability on certain pages, and surfaced critical features (such as conference details and team bios) more prominently. These incremental updates further aligned the design with user expectations, ensuring that even first-time visitors immediately feel connected, informed, and ready to support AfA’s cause.
(User Test Report)
(Final Prototype Version)
Development Phase
After finalizing the prototype, the next challenge was implementing changes on a live website without disrupting daily visitors. Certain sections had legacy code that was risky to modify outright, so I preserved stable areas that wouldn’t hinder the user experience, while selectively integrating new components aligned with the prototype. This approach minimized downtime and maintained a consistent user flow throughout the transition.
The entire development cycle—including coding the updated UI, optimizing animations, and merging new elements into existing infrastructure—took about one week. Despite these constraints, the final build remained faithful to the prototype, successfully capturing the revised design vision and ensuring users experienced a smooth, visually engaging site throughout the process.
(Website home - for full website visit - https://www.asiaforanimals.com/ )
(Homepage Before Redesign)
(Homepage After Redesign)
KPIs Post-Redesign
After launching the updated site and integrating the new design elements, key performance indicators showed notable improvements:
Overall Traffic
Site Sessions: Increased by up to 66% (e.g., 2,711 site sessions over one recent 30-day window vs. roughly 1,600 in a similar pre-redesign period).
Unique Visitors: Jumped by 57% (e.g., from ~1,000 to over 1,500) in the same comparison, indicating both returning and new users found the site compelling.
Session Duration
Average session time rose from ~5 minutes to 7+ minutes, suggesting that visitors stayed on pages longer—likely due to streamlined navigation and engaging content.
Bounce Rate
Dropped from the high 60s to around 62–63%, reflecting improved user flows and more relevant landing pages. Although there is room to improve further, this is already a positive shift for a content-heavy nonprofit site.
Device & Geographic Spread
Mobile traffic consistently accounted for 45–55% of all sessions, validating the emphasis on responsive design.
Top countries (e.g., Taiwan, the UK, the US, Vietnam, Indonesia) continued to see growth, affirming that the updated visuals and content resonate with a global audience.
Engagement with Key Pages
Pages like “/conference-2025” and the homepage saw the largest traffic spikes—up by over 200% in some periods—indicating successful promotion of events and more prominent CTAs.
By combining better navigation, culturally resonant visuals, and transparent calls to action, the redesign encouraged users to explore more content, stay on the site longer, and return more frequently—all core indicators that AfA is better serving its mission through an enhanced digital experience.
(Some of the Analytics highlighted)
Conclusion
This project was both technically demanding and personally enriching. The core challenge lay in bridging a diverse international audience, ensuring that the final website felt relevant and welcoming to visitors from Taiwan, the UK, the US, and beyond. Working solo heightened the complexity, since every phase—ideation, design, testing, refinements, and development—fell under one person’s responsibility. To tackle this, I expanded my knowledge through in-depth reading, conversations with people of varying cultural backgrounds, and completing a Social Psychology course—all to fully grasp varied mental models and design preferences across demographics.
Ultimately, my biggest takeaway is that empathy-driven design goes beyond interface polish; it requires listening to real users, recognizing cultural nuances, and adapting solutions accordingly. By aligning technical solutions with global perspectives, the project improved engagement, attracted new audiences, and deepened support for AfA’s mission. This experience showcased the power of inclusive, user-centric approaches—and reaffirmed the importance of continuous learning and open-mindedness when serving a worldwide community.