National Alliance for Volunteer Engagement: A website to reflect a new iteration of volunteer engagement

This project was completed during Develop for Good’s Fall 2021 cycle.

Develop for Good
4 min readMar 22, 2022

Develop for Good is an intercollegiate 501(c)3 nonprofit organization that pairs, trains and supports student volunteers as they develop technical product solutions for nonprofits. Some of our most notable partners include UNICEF, the World Bank, and the World Health Organization. Learn more at https://www.developforgood.org/!

Project Summary

The National Alliance for Volunteer Engagement

As an organization, The Alliance aims to “inspire and equip philanthropic, organizational and community leaders to prioritize, advocate for and invest in strategic volunteer engagement.

What They Needed

The Alliance was seeking an innovative approach to a new, cutting-edge website that reflected a new iteration of volunteer engagement. This site needed to appeal to funders, leaders, and volunteer engagement professionals across all sectors. Visually, The Alliance wanted something with a fresh feel — including whitespace and interactive elements. Accessibility and ease of navigation were also top of mind.

Project Objectives

Success criteria for this project were as follows:

  • A complete website prototype characterized by The Alliance’s fresh feel
  • A new logo
  • Video hosting functionality
  • Improved navigation and interactive elements

Research and Design Decisions

User Stories

In creating user stories for each of The Alliance’s three main audiences, the team came to the following assumptions:

Funders: philanthropists and organizations aiming to financially support strategic volunteer engagement. What they needed: a quick and accessible way to donate.

Leaders: heads of organizations (corporations, nonprofits, government, small businesses) who relied on volunteer workforces. What they needed: resources and researched advice regarding how to support their volunteer workforces.

Volunteer Engagement Professionals: individuals who manage volunteer-based people, programs, and projects. Some of their responsibilities include managing budgets, projections, timelines, sorting conflicts, and volunteer retainment (ensuring they feel satisfied and recognized). What they needed: resources and researched advice on how to support their team of volunteers.

Wireframes

A screenshot of black-and-white wireframes created in Figma. The wireframes include ‘home’, ‘about us’, ‘meet the team’, ‘contact’, ‘research’, ‘call to action’, and ‘statements’ sections.
Preliminary wireframes for the proposed website.

After establishing the information architecture for the proposed website, the team created low-fidelity wireframes to establish layouts and potential interactivity. This wireframe included a navigation bar to allow users to move between pages. Interactive elements allowed users to sign up for emails, watch videos, attend webinars, and access The Alliance’s social media profiles.

Prototypes

A screenshot of the fully-styled prototype created in Figma.
A fully-styled prototype of the proposed website.

The team created high-fidelity, interactive prototypes of the website incorporating a new style guide for colors and typography. This prototype was based on the previous wireframes, and now included individual sections for Funders, Entity Leaders, and Volunteer Engagement Professionals. Icons from Icons8 were incorporated.

Solution

Logo

In order to reflect The Alliance’s fresh feel, the logo was redesigned as follows:

The original logo for The National Alliance For Volunteer Engagement, featuring purple and red typography.
The redesigned logo for The National Alliance for Volunteer Engagement, featuring a stylized violet/blue/yellow circle.
The original logo (left) and the redesigned logo (right).

Navigation

The navigation bar was redesigned to be more easy-to-follow, creating more simple transitions between pages.

The navigation bar for the new website. The “Useful Info” tab is currently highlighted, expanding to show options to view “Case Studies” and “Statements”.
The new website’s navigation bar.

Home Page

The redesigned homepage.

About Page

The redesigned “About” page.

Team Page

The redesigned “Meet The Team” page.

Research Page

The redesigned “Research” page.

Resources

The redesigned “Resource” pages.

Impact

In the end, the team was able to create a cohesive design and style for the website to catch the attention of multiple types of users.

This project will impact the volunteer community as a whole, in addition to companies and organizations that need to bring volunteers together for leadership and support.

The Team

Special thanks to the team members who spearheaded this project:

Product Manager: Alison Yim (Lehigh CSB ’24)

Front-End Developers: Anna Nguyen (Cornell ‘23), Diya Chakraborti (UC Berkeley ‘24)

Designers: Emily Zheng (University of Maryland ‘22), Clarissa Fong (UC Santa Cruz ‘21), Rohini Chatterjee (Rutgers ‘22)

--

--

Develop for Good

Volunteer students and recent graduates creating digital tools for nonprofit organizations.