FTN cover 5-22.png

Website redesign to attract funding


Redesigning a nonprofit website to attract funding

Free the Need

FTN cover.png

Project details

Timeline: 2.5 weeks
Team: 2 UX Designers
My role: I took the lead on crafting user research questions, conducting competitive analysis, creating a site map and medium-fidelity wireframes.


Challenge

Modernizing a nonprofit's website to set the stage for growth

Free the Need distributes surplus food and clothing to low-income residents of San Francisco Bay Area and Siskiyou county. Their core team wanted a website redesign so they could better position themselves for larger funding and sponsorship opportunities. 

SOLUTION

A website that instills confidence by highlighting the organization's impact, processes and people

We designed a website that showcases the organization's impact on the community it serves, demonstrates the organization's ability to carry out its mission, clarifies how members of the general public can get involved and celebrates their staff, volunteers, donors and/or supporters.

FTN laptop.png

Process

Understanding the competitive landscape

Successful nonprofit websites share information on their impact (using both actual numbers and storytelling), their team and sponsors.

competitiveanalysis

What do users look for on nonprofit websites?

Users seek information on impact, processes and people

From our research, we found that users want to see tangible results about how their efforts and funds impact the community. They also want clarity and direction when it comes to achieving their goals, whether that's volunteering, donating or funding. Lastly, all users want to connect with the people who run and support the organization.  

Mapping specific content to user goals

Creating personas for each user type helped pinpoint their goals and identify ways to meet their needs.

Personas.png

Bringing the right structure to the solution

  • Stating the "why" - Our competitive analysis showed that most nonprofits explain the philosophy behind their mission, so we created a "Why Surplus" page.
  • Highlighting impact - We included impact information on key pages. We also designed a separate "Our impact" page with the most recent year's impact numbers.
  • Showcasing people The team and partners pages allow funders to learn more about the Free the Need team and identify current and past sponsors.

Helping users find information and take action

All pages were linked to the Volunteer and Donate pages, the primary calls to action. We also created links from key pages - Home, Why surplus, Food Day, Back-to-school, Holiday giving and Our Partners - to the "Our Impact" page so users can easily access the most recent impact information.

Iterating for clarity

  "Our impact" was initially a section, then evolved to becoming a separate page

"Our impact" was initially a section, then evolved to becoming a separate page

  "Pledge your birthday" feature was tabled due to business considerations

"Pledge your birthday" feature was tabled due to business considerations

In the initial design, we had the "Our impact" as a section on one of the pages. However, as we got into the second iteration, we decided to create an "Our impact" page because we realized showcasing detailed impact information would reinforce greater confidence.

We also included a "Pledge your birthday" feature but as we began designing it, we realized it would require additional technology and management that Free the Need was not currently in a position to invest in. So, we included it as a recommendation for the next version of the website.

 

  "Add to calendar" feature on Food Day page

"Add to calendar" feature on Food Day page

We also conducted usability testing and made the following changes:

  • Changed "Our Work" to "Programs" - Users mentioned that the label "Our work" to describe Free the Need's programs was hard to differentiate from the content in "Why Surplus?"  so we changed the name to "Programs".
  • Included "Add to calendar" feature - Volunteers stated they wanted an "Add to calendar" feature on the Food Day page to help remind them of when the next Food Day was.

 

 

 

 

Wireframes

Below, are a subset of wireframes that demonstrate Free the Need's impact, the organization's processes and the people involved.


Next Steps

Our recommendation to Free the Need was to begin creating content for the site and working with a visual designer and developer to get the site ready for launch.


HIGH FIDELITY MOCKUP

Post-project, I decided to take the design further and worked on the visual design of the home page. For a clean, modern look, I re-created the logo and applied a geometric typeface, Montserrat. I also added a green accent to their existing red and blue palette.

FTN old vs. new.png