Rooted in the Phish community, The Mockingbird Foundation required a digital presence that honored its history while modernizing its grant-giving capabilities. This project involved a complete website redesign to improve performance, outreach, and donations. We designed a vibrant, volunteer-friendly website featuring a custom plugin to manage and display decades of charitable data.
Modernizing a Nonprofit Digital Presence.
The primary goal was to reimagine the Mockingbird Foundation’s digital footprint, transforming a text-heavy archive into a dynamic, accessible platform. We faced the unique challenge of streamlining decades of historical content and charitable impact data into an intuitive content architecture that users could easily navigate.
- Revamping Content Architecture: We reorganized extensive historical resources to streamline navigation, making decades of charitable impact easy to explore.
- Strategic Brand Alignment: The new design bridges the gap between the Phish community’s unique culture and a broader audience of prospective donors, strengthening the Foundation’s visual identity.
- Custom WordPress Development: To improve engagement, we engineered custom tools—including a specialized plugin for sorting and displaying Grant Recipient data.
- Optimizing User Experience: We prioritized performance and inclusivity, ensuring fully responsive, seamless accessibility across all platforms and devices.
Streamlining the Information Architecture.
The first step was restructuring the site’s content architecture to enable users to effortlessly find information. Key content areas were identified, including:
- About the Foundation: Detail its mission, history, and leadership.
- Grant Application Process: Explain the grant application process and how organizations qualify.
- Grant Recipients: Demonstrate the foundation’s broad impact on music education for children.
- Projects: Showcase projects including The Phish Companion, Sharin’ in the Groove, Print Commissions, The Runaway Open, Wine Tastings, Yoga, Art Exhibitions and more.
- How to Get Involved: Encourage donations, hosting of benefit events, and volunteerism.
- News & Events: Highlight the latest updates, grant recipients, events and other initiatives.
- Ways to Donate: Provide information on the numerous was to donate.
This organization improved navigation while making the website’s purpose immediately clear to visitors.
Designing a Visual Identity Around an Existing Logo.
Building upon the Foundation’s established iconography, we crafted a cohesive digital environment that balances professional credibility with artistic flair. The redesign transforms the organization’s static brand elements into a living, breathing interface that creates an immediate emotional connection with visitors:
- Immersive Visual Aesthetics: Drawing inspiration from the improvisational energy of Phish, the interface utilizes bold typography, dynamic layouts, and a warm, inviting color palette to capture the spirit of the fanbase.
- Strategic Brand Cohesion: We extended the visual narrative beyond the logo, using custom graphics and curated imagery to visually reinforce the Foundation’s commitment to music education and community impact.
- Fully Responsive Design: To maximize accessibility for donors and fans alike, the site is engineered for performance, ensuring a flawless and intuitive experience across desktops, tablets, and mobile devices.
Custom WordPress Plugin Development.
A standout feature of the project was the creation of a custom WordPress plugin, developed by Kathleen Glackin. This plugin provides users the ability to explore the foundation’s grant recipients with ease:
- Dynamic Results: Real-time filtering ensures an engaging and intuitive browsing experience, calculating the percentage of total grant dollars based on the filters selected.
- Sorting and Filter Options: Visitors can sort grant recipients by Type, Category, State, and Year, making it simple to locate relevant data.
- Share Data with Custom URLs: Filter and share data using custom URLs, allowing for targeted marketing campaigns and outreach.
Delivering a High-Impact Digital Platform.
The launch of the new website marked a significant turning point for The Mockingbird Foundation’s digital strategy. By replacing legacy systems with a modern, scalable framework, we transformed their online presence from a static archive into an active engine for donor engagement and education:
- Streamlined User Journeys: We improved usability by creating clear, intuitive navigation paths, encouraging visitors to explore deeper into the site and engage more meaningfully with the mission.
- Data-Driven Transparency: Through the custom Grant Recipient plugin, we unlocked the foundation’s data, giving users powerful tools to sort, filter, and visualize the history of their charitable impact.
- Authentic Brand Connection: The refreshed visual identity bridges the gap between professional credibility and fan culture, fostering a stronger emotional connection with the audience.
Conclusion. This redesign illustrates the pivotal role of thoughtful UX and custom functionality in the nonprofit sector. By prioritizing accessibility and brand alignment, the new Mockingbird Foundation site sets a benchmark for how organizations can effectively communicate their mission in the digital age.
Looking to redesign your nonprofit’s website? Let’s talk.
