top of page

Farming Hope: Nonprofit Website Redesign

Colin McGuire - UX Designer
Sarah Pagan - UX/ UI Designer
Rena Silverman - UX Writer

Farming Hope, a non-profit organization in San Francisco's mission area, fosters community leaders through empowering jobs and career training in garden and culinary work for the unhoused and low income community. We were tasked with redesigning a responsive website that worked both on mobile and desktop.

iphone-xs-mockup-22485 (2).png
Farming Hope: Nonprofit Website Redesign: Project

I. Research

Screen Shot 2020-02-29 at 12.35.29

Heuristic Evaluation

We found the original website clean, but slightly disorganized. We enjoyed the meaningful multimedia, simple navigation, and pleasing color scheme, but we found the mission buried and the donate button so simple it was out of reach.

Screen Shot 2020-02-29 at 12.58.27


We interviewed 5 people got 28 survey responses. We asked folks what they thought of the website and how compelled they felt to get involved.  Only 10 percent said they felt compelled to get involved, which was important information.

Screen Shot 2020-02-29 at 1.15.12 PM.png

Affinity Diagram+Feature Prioritization

Affinity Diagram

The key takeaways from our affinity diagram:

1. The website's mission was not clear

2. Users were unsure how to help

3. User's were drawn to multimedia

4. Quotes and success stories evoked the strongest response

Feature Prioritization

It's always a challenge to prioritize all the opinions of stakeholders. For this we found the most important features with the most amount of impact and least amount of effort were: 

1. Prominent mission statement

2. Clear donate button

3. Strong multimedia

user persona.png

User Persona

From here we made our user persona. Cori Oliver is a 28-year-old law student in some debt, who wants to do social good in other ways other than donating money. She also wants to get closer to her community in San Francisco's mission district. She loves Apple, ThredUp and Crunch gym.

Farming Hope: Nonprofit Website Redesign: News

II. Definition


Problem Statement

We believe communicating Farming Hope’s mission in an enticing manner will attract donors, volunteers, and diners to the organization’s cause.

This will help achieve the business goal of providing transitional employment to the unhoused and low-income community.

value prop.jpg

Value Proposition

Farming Hope develops transitional employment and culinary programs that nourish those both inside and out of the kitchen.

Card sorting.png

Card Sorting + Sitemap

We had a lot to do in terms of card sorting. We remade most of the navigation.

Screen Shot 2020-02-29 at 7.10.41 PM.png

Task Flow

Our primary goal became getting users to
1. Read the mission
2. Find the food
3. Find the donation page

Farming Hope: Nonprofit Website Redesign: News

III. Ideation

Screen Shot 2020-02-29 at 7.22.25 PM.png


Next we took a look at a day in the lift of Cori Oliver, our user persona, until she discovers Farming Hope.

Screen Shot 2020-02-29 at 7.24.00 PM.png

Mobile Wireframes

We drew out some wireframes, putting our visions on paper.


Desktop Wireframes

We prepared some desktop wireframes.

Farming Hope: Nonprofit Website Redesign: News

IV. Prototyping

Desktop Wireframe prototype

Mobile wireframe protototype

Farming Hope: Nonprofit Website Redesign: News

Lo-Fi Testing Results

Farming Hope: Nonprofit Website Redesign: News

Hi-Definition Prototypes

Style Tile

Screen Shot 2020-02-29 at 10.19.29

Our style tile was fairly simple. We kept most of the colors, but added some accents like teal. We used sophia pro and overpass for the typography, as it matched most with Farming Hope's logo.

Hi-Fidelity Prototype: Desktop


Our hi-fidelity prototypes took our users into perspective first and foremost. Take a stroll through our InVision Prototype.

Hi-Fidelity Prototype: Mobile


Our mobile hi-fidelity prototype positions the mission above the fold. Here is a link to the InVision prototype

Farming Hope: Nonprofit Website Redesign: News
bottom of page