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

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!

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.


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.


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.



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).


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.


The redesigned “Resource” pages.


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)




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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

5 Things Digital Design

Can Design Sprint Transform The Way You Work?

The Apple Watch: A staple in usability

2 Apple watches side by side displaying different apps.

Erin Ruby of Erin Ruby Design: 5 Steps We Must Take To Truly Create An Inclusive, Representative…

No stroke of Genius

Can creativity play a key role in your business success?

Evaluating new product features with a remote, digital card sort

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Develop for Good

Develop for Good

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

More from Medium

My foray into Mentorship — Part 1/2: How I got into Mentorship

An illustration of myself dipping a toe into a pool labeled “mentorship”

2022 UX Research Tools Map

Improving Digital Signature Management with Ux Design

Look back: 14 years of the greeting card design