Growing Chefs Web Project-UX Case Study

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.


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)

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


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)


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.

Home Page

  • The information needs to be more compelling for volunteers
  • The impact is more important than how the program works
  • Statistics & sponsors are reputable factors
  • “Where is this organization/program located
  • It looks corporate and not community/non-profit
  • Add more CTAs

Volunteer Page

  • More convincing than the home page (bold text telling what the volunteers do and what they can get out of it)

Donor Page

  • Need more narrative
  • More options for donations(online or by check etc)
  • Clear calls to action
  • Donate →help out(wording)

Final Prototype

Web —

Mobile —