Growing Chefs Web Project-UX Case Study

5 min readOct 28, 2020

Non-profit Organization Responsive Web Design

Growing Chefs is an organization that aims to support urban agriculture and educate children, families, community members about healthy eating and healthy food systems,

Interviewing Project Coordinator

In the first meeting with our project coordinator Helen Stortini, who is also the executive director of Growing Chefs, our team tried to discover some of the challenges and goals their organization has at the current phase.

Scope of the Project

Our team set off with a very clear scope for this 3-week timeline project with UX & UI in a 2:1 ratio.

Increase Volunteer Sign-up
Increase Donor donations
Present Organization Value
Square Space ONLY

The client wants everything migrated onto Square Space after this project, for easier and low-cost future maintenance.

Researches

After understanding what the client wants, we send out surveys and reach out for interviews to understand these few questions.

What motivates volunteers & what frustrates them?
What motivates donors & what frustrates them?

However, the survey & interview results were very unsatisfying, based on the feedback we conducted almost nothing. We soon started diving into secondary researches on reputable sources and looked through the 100 top non-profit organization websites in 2018, and Google Analytics on the previous Growing-Chefs website. Here are the main findings →

“While motivation to volunteer can vary by age, with younger volunteers more motivated by future preparation (such as increasing skills, knowledge, and advancing careers) and older volunteers more likely to cite generatively as a reason for volunteering” (click to see original article)
People act from the heart, not the head: Yes, your nonprofit has to show that it’s a good steward of donor money and you need to impart where all that generosity is going, but your appeal must contain more than numbers and pie charts.(click to see original article)

Younger volunteer are more self-centred — secondary research
Need motivating factors for both volunteers and donors, focus on their benefit and outcome, their IMPACT. — secondary research
Position title, or detailed volunteer duty — secondary research
Donors are lacking trust in non-profit organizations — survey result
1/3 of the website visitors are young adults — Google Analytic
Over 50% drop-off rate after landing page (Home) — Google Analytic
Donation/CTA buttons everywhere — CC analysis
Clear mission and value — secondary research/survey result/CC analysis

Planning

Based on the research, we conducted → Gain Trust!

1.INCREASE traffic retention on the landing page

2. Since the majority of volunteers ages 35–53, then we will target the younger audiences and make the website more appealing to these audiences. Motivating factor for young adults are — time & location, future preparation (good position title & experience for resume)

3. Since the landing page is to Increase Volunteers & Donors, the information should be appealing for both groups of user — Organization’s mission and value, build trust, what are the impact users can make, motivating factors.

4. Re-design sign-up form, too much information and intimidating at first glance.

5. Re-organizing information architecture, each page serves a purpose. Home Page: Gain trust and storytelling, motivating factors for both. Donate Page: Gain trust, transparency, impact the donors making. Volunteer page: Gain trust, where, what, when, why, and how. Enrollment page: Detailed information on the program, location, process. About Page: Delete Gain trust, timeline, staff.

6. Using bold headers, numbers & infographics for easier reading (users tends to focus on bold number/text/image, rather than text-heavy)

Design

This is the first time UI and UX team came together for a design, the UX team gave the UI team the background of the persona,(who are we designing for) and context of our research findings (what do they want). Lastly, we reminded the UI team, design the wireframes with a Square Space template in-mind.

Just like above, each design studio last one minute. We drew freely on what we have in mind for each page, talked about our design thinking, and put pieces & puzzles of what we think are good into a mid-fidelity wireframe.

User Tests

After our first mid-fi wireframe, we wanted to test out if our information architecture is on point. We gave our users a persona (volunteer/donor) and some background context with tasks to complete.