top of page

Farming Hope

The Challenge

Our team has observed that the organization's existing website isn’t effectively communicating the impact donors directly have, thus reducing potential donations and support.

​

The Goal

This project aims to redesign their website and encourage individuals to donate through an accessible layout of information and motivational imagery based on user research.

​

My Role

I collaborated with the client and conducted user interviews. Furthermore, I brainstormed with our team to create the prototype and presented the project after 4 weeks of development.

FH - Cover.png
Research
For the community!​
​

Farming Hope is a non-profit organization that offers unhoused and formerly incarcerated individuals employment in their kitchens. Due to the pandemic, many people struggled to find jobs. Our team wanted to give back to the community and help people get back on their feet. 

User Research​
​

 We needed to understand how people felt about volunteering or donating to local non-profit organizations. We conducted 5 interviews with individuals who have donated time or money multiple times in a year. 

Our research objectives were: 

1. To discover the main factors that inspire individuals to donate (time/ money) to an organization

2. To figure out how people normally find organizations to support (Through work, word of mouth, searching online, etc)

3. To find out if people are influenced by values when volunteering/ donating?

quotes.PNG
Client Interview​
​

We interviewed the executive director to find out more about their organization and their needs. We discovered that the website didn't portray their image as well as they would like it to be. They wanted the website to have more images and focus on story telling to educate potential donors on their organization. They also wanted to promote donations more than volunteer opportunities.

Online Survey​
​

We wanted more data for our research so our team conducted a 9-question survey. We received an overwhelming amount of feedback from the 144 participants. We found that the most important factors to promote user donations were knowledge of where the money was going and how the contribution impacted the organization.

Survey 1.PNG
Through our interviews and surveys, we found that...
​

Donors need more information about how they can directly make an impact on the organization and a compelling website that shows their influence on the community to be more interested to donate and support the cause.

User Persona​
​

Below is the persona created after gathering insights from our interviews and surveys.  Having a better understanding of who our target audience was helped our team make better design decisions to satisfy the users' needs.

User Persona.png
Competitor Analysis​
 
After gathering data from the interviews and surveys, we then analyzed at our potential competitors and compared their features with the expectations of the interviewees in mind. ​

 

​

The following 5 competitors were selected. We noticed that almost every organizations include statistics and videos on their sites.

After comparing the websites, we discovered that the weaknesses of Farming Hope website were:

1. More text than visuals.

2. Site wasn't engaging due to lack of visual layout (not enough pictures)

3. Not many client success stories (only two)

4. Didn't not include annual report.

Competitor Analysis 3.png
Feature Prioritization
​

We created a feature prioritization matrix to prioritize the features based on our interviews and surveys. ​ We found that users wanted a website with compelling visuals (photos or videos) of real people (participants and staff), an annual report, and an online ordering platform to support and order from their kitchen.

Feature Prioritization Matrix (3).png
Design
Our Opportunities​
​

How might we improve Farming Hope’s digital representation so that more donors are willing to support their mission based on number of new monthly donors and increase of returning donors?

User Flow​
​

There are 3 main features we created for our user flows based on the features we selected from our feature prioritization. 

1. Donate: Users will be able to donate and help support the organization.

2. Catering: Users will be able to order catering services from the website.

3. Subscribe: Users will be able to subscribe to their newsletter and stay inform about the organization.

The user flow below highlights an essential feature in our website that allows the user to easily donate to the charity.

Farming Hope User Flows.jpeg
Wireframes​
​

We created our sketches based on our user flows and transformed them into low-fidelity wireframes. We wanted to lessen the amount of clicks the users have to do while going through the website. After brainstorming as a team, we decided to go with a one-page layout. We then conducted user testing using our low fidelity prototype.

sketch.PNG
1.PNG
User Testing​
​

We conducted three user tests for our low fidelity prototype. The goal of these tests were to determine if users could navigate through the website smoothly and feel more compelled to donate to the organization. There were 3 main tasks that we tested:

1. Locate a news article on their site

2. Subscribe to their newsletter

3. Donate to the organization

​

Overall, we received positive feedback on the one page layout where they could keep scrolling to see other section of the website. They didn't like having to click on a different section every time they wanted to view another section.

Some common issues we found throughout the testing were:

1. Donation: The layout of the donation page was confusing. So we took out some of the repetitive information and reformatted them. 

2. Press: Press was originally located under the "Subscribe" section. However, some users didn't realize that it would be under that section. So we made “Press” its own section on the navigation bar. 
3. Support Us: Some users were confused what "support us" meant. They would rather see the word "Donate".

Frame 34.png
Style Guide​
​

The goal for this app was for users to feel hungry and eager to learn more about the organization. We added additional colors, which were red and yellow, to complement their existing brand colors, which were orange and green. According to our research, the color red tends to make people feel passionate and hungry, while yellow evokes a feeling of comfort. The icons on our mobile app were simplified and we included the name of each icon below to avoid any confusions. These colors passed the contrast color testing accessibility. 

FH styleguide.PNG
Refine
Last but not least...​
​

I am proud to present our redesigned Farming Hope website. I hope to be able to develop this website in the future and help others get back on their feet. As we were redesigning the website, we took in consideration on our users feedback from the low fidelity testing.  For our final high fidelity prototype, we focused on providing easier access to the donation page and resources about the organization. 

Final Product​
​

Our team designed high-fidelity wireframes based on our research and testing. After many iterations, we were able to create our final product.

​

Moving Forward
​

There is still a lot more to explore with Farming Hope. 

Some of the features we want to include are

1. Developing the “Eat with Us” page

2. Creating an annual report microsite

3. Building out the mobile application

​

Success Metrics​
​

To measure success, we will track:

1. Number of donations

2. Percentage of visitors that donate

3. Amount of users who subscribe to the newsletter

4. Number of orders made through the website

Devices
Before and After​
​

This website was redesigned in the hopes of informing and attracting more donors.  We made the product more vibrant, included meaningful stories and images to incorporate white space, as well as redesigning the site map. Our team believed that a one-page site is easier for users to navigate and access information due to minimal clicks. We placed the "Eat With Us" and "Donate" on the top navigation bar because these functions have the greatest user interaction. We added a side navigation bar to provide information about the organization. Lastly, we developed a mobile webpage that coordinates with our redesign.

Frame 36.png
Reflection​
​

With many design projects later, I found myself making more strategic design decisions based our intended market’s wants and needs. We designed pages that were more informed by research, rather than visual design trends. Improving upon the Research Phase also helped us brainstorm more ideal paths, and critically examine the product's market viability. Through this phase, we identified areas of improvement in quality and made changes to design that lead a successful product.

mobile.PNG
bottom of page