Redesigning a website to attract funding
Free the Need
Timeline: 2.5 weeks
Team: 2 people
My role: As part of a close-knit, two-person team, we worked together on every aspect of the UX design process. I took the lead on crafting research questions, conducting competitive analysis, user flows, site map and wireframes.
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 can better position themselves for larger funding and sponsorship opportunities. Also, their current website doesn't capture what makes them unique - their values, their work and the people who carry out their mission.
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.
Understanding the competitive landscape
Successful nonprofit websites tell stories and share information on their impact, their team and sponsors.
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.
How the solution will impact the user journey
Charting each user's journey revealed their experience on the current site. Incorporating research insights into the new website showed how the users' confidence grows as they discover the information they need.
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
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.
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 ambiguous 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.
Below, are a subset of wireframes that demonstrate Free the Need's impact, the organization's processes and the people involved.
To match Free the Need's brand, we recommended a conversational, yet competent tone. We also demonstrated how the content on each page matched the needs of each user type (volunteer, donor and sponsor/funder). We explained the two different page structures (story-based and informational) and broke down the function of the different titles and headings.
Our recommendation to Free the Need was to begin creating content for the site and working with a 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.