(The prototype is available at this link!)
Similar to my "Alignment" project, I signed an NDA to assist a client in designing their nonprofit's website. Here, I've provided low-to-medium fidelity wireframes of the fake nonprofit, Novel Hope, along with some design alternatives I would have made, had I been more knowledgable about the development tools to make them possible.
(Google, Google Sheets, Adobe Experience Design, InVision)
What is NovelHope?
NovelHope is a hypothetical nonprofit seeking more volunteers and spreading news of its real-life services to a wider audience. In this scenario, NovelHope is already up and running, but believes an online presence would be more beneficial for its continued existence. 
Between the client's requests, the experience I had with UrbanOne, and deep Googling to learn about nonprofits' digital efforts, I discovered:
Storytelling is a nonprofit's greatest challenge. 
They must breakdown lofty, humanitarian-focused language with simple templates that highlight their value to a community. 
Meet Ash
 I created the persona, Ash, to define the strengths and limitations of online outreach.
For Ash and others who actively sought volunteer opportunities online, a lack of transparency (especially around funding) was the greatest concern. They wanted to see if the input of donations matched the output of community improvements, and, in turn, reflected the nonprofit's values.
Ash's Needs & the Feature List
I then made a chart in Google Sheets to address the challenges Ash faces, coming up with solutions that would potentially address his concerns and help him find an exciting volunteering opportunity.
With these problems in mind, I then used Adobe Experience Design to draft a website that would seemingly appeal to Ash, recognizing that the solutions are tentative and open to change.
Afterwards, I created a prototype in InVision to explore the flow and interaction of the site.
Home Page
The home page is simple. 
For Ash, there's not much scrolling, the descriptions are plain, and the main navigation has 5 items to explain what Novel Hope is about, without "burying" important information.
With the 'Testimonials' section cycling slowly through portraits of Novel Hope's clients and beneficiaries, Ash gets to see who he could potentially help by volunteering with Novel Hope. 
Home Page with the 'About Us' Dropdown
The 'About Us' dropdown has 4 options which, when selected, describe elements crucial to Ash, who would want more information about the nonprofit's values, as well as any internal and external influences on said values.
Home Page with the 'Get Involved' Dropdown
The 'Get Involved' dropdown only has 3 options, which describe how someone like Ash can best apply their skills to help Novel Hope. 
I thought a dropdown would be helpful in chunking the information, however, I did place each option on the same page. The ideal interaction scenario would be someone clicking on one option and having it scroll to that option on the target page. 
I also think, however, the 'Get Involved' phrasing can be changed, because it sounds a bit generic; 'Help Out' or 'Help Us Out' sounds friendlier and more engaging.
The Team Page
When Ash get to the Team Page, he sees portraits of full-time staff (real people) at Novel Hope.
The ideal interaction scenario would be Ash clicking on a circle, and seeing more detail of the person's professional background, either as a pop-up or a state change for the page.
So for example:
The Services Page
Even though Ash already saw brief descriptions of the services Novel Hope provides, he gets to read specifics of the effects on the served communities.
In this way, Ash is hopefully made clear about Novel Hope's focus without ambiguity. 
The 'Get Involved' Page
On the 'Get Involved' Page, Ash sees 3 opportunities to help Novel Hope that don't immediately require donations. Because he's short on cash in this scenario, but still wants to help, he decides he'll volunteer his time to Novel Hope, clicking on the 'Submit a Form' button.
'Submit a Form' sounds generic, though. 'Send An Application' may be a bit better.
Volunteer Application Form
This form only has 7 questions, so it doesn't take Ash much time to fill it out.
For more general use, however, it's important that this page has a secure https hyperlink. This not only helps users feel safe in parting with their information, but also shows Novel Hope protects their prospective volunteers and donors.
Volunteer Application Thank You Note
Once Ash sends in his volunteer application, he sees this 'Thank You' screen, an expression of courtesy and gratitude for wanting to volunteer with Novel Hope. 
The text would describe next steps, which would include checking his email for messages from Novel Hope, as well as when he would expect to hear back from them if things check out.
He can also return to the home page or check out the Events page to see what else he could learn about Novel Hope.
Events Page
When going to the Events page, Ash sees 3 options for 'Past Events', 'Current Events', and 'Upcoming Events'. 
'Upcoming Events' is the page default, so Ash would understand where he, as a new volunteer, would fit in future efforts, assuming Novel Hope's processing of new volunteers occurs quickly enough.
Donation Page
And finally out of curiosity, Ash visits Novel Hope's Donation Page.
He sees the progress of each funding project, how the donations will be used, and the names of recent donors, attaching real names (in some cases) to dollar amounts, as Novel Hope shows appreciation regardless of the donation's size.
So What Happens Next?
Ash walks away from the experience with a mostly complete understanding of Novel Hope and its influence in the community, excited to volunteer for an organization with ideals similar to his own.
And with a positive volunteering experience which matches the openness found on the website, he'd willingly share, whether through word-of-mouth or social media, with others about Novel Hope's positive influence in the community.
But What Else?
Straightforward UI design is only part of the solution. 
The challenge for nonprofits in this scenario is the storytelling aspect of their value to the community. They need to strike the balance between lofty, humanitarian-focused language and grounding their efforts in a concrete way. 
Because "doing good" is not a universally inherent ability, nonprofits need to do more to connect their values to actionable goals. 
Nonprofits should not assume that helping certain causes are obvious ("Who wouldn't help an animal/cancer patient/insert-cause-here?"), and should instead create the conditions where volunteers feel empowered to address these causes in their community.
Back to Top