Danielle Villa-Agustin
UX Designer & Problem Solver
Exit button
Youth Garden
How might we increase Youth Garden’s outreach, engagement, and retention through establishing a more intuitive design.
Youth Garden is a program under Second Chance, a San Diego based nonprofit organization, that aims to serve young leaders (ages 14-21) from marginalized communities. Interns gain hands-on urban agriculture experience and participate in job readiness workshops. The local community can support the program by purchasing the interns’ garden produce through the weekly Farm Stand or by joining the Community Supported Agriculture (CSA) Program, where produce is delivered on a monthly subscription basis. All revenue generated from sales feeds directly into the program and helps provide stipends.

Though Youth Garden serves a worthwhile cause, they have yet to transition from the traditional pen and paper/word-of-mouth application process. Their current website fails to outline the relationship between the Interns, CSA Program, and Farm Stand making it challenging to expand their outreach. Our redesign breaks down this relationship while making the most crucial information easily accessible and maintaining an engaging experience.
Timeline: 16 weeks
Design for America, To Be Designed (TBD) Project
Second Chance’s Youth Garden
Final Product:
Youth Garden website prototype that makes it easier for community members to get involved by encapsulating the program’s impact and digitizing their outreach process
Throughout the research process, I was mainly responsible for formulating/narrowing down questions and conducting the interview with the former Youth Garden intern. Each team member was also responsible for conducting their own secondary research by reading articles and reviewing other nonprofit websites.

During the design stages, I developed wireframes and mapped out the site architecture. I created UI elements and iterations of the Quarterly Membership Schedule. Though I was mainly responsible for prototyping the interactions on the Home Page and developing the horizontal scroll feature on the Recipe Section. Each team member conducted their own user and A/B tests.

As  one of the main points of contact for our stakeholder, I initiated contact through email and led biweekly feedback sessions.
Original Website
Simple one page that presents basic info through text, brief description of the program.

• Not engaging: call to actions unclear doesn't specify how to apply as an intern

No strong information architecture: Pumpkin Soup Recipe and COVID-19 Protocols randomly listed, no context given
Target icon
Secondary Research
We looked to 7 nonprofits, both big and small, to trace patterns and discover what makes a successful organizational website.
Logos of seven nonprofits that we researched
Through our research we identified 3 key factors that we would like to implement in our design.
1. Consistent Branding: Maintaining a cohesive brand identity across a multitude of platforms establishes credibility, leaves a lasting impression, and makes them easier to identify
2. Engagement Opportunities: General outreach, social media links, and newsletters captivates target audience and appeals to potential members + incredibly easy to donate
3. Numbers: Quantifying success with specific statistics and metrics to showcase program impact
Target icon
User Research
User Research was divided into a 2 part process to get a holistic overview of Youth Garden and understand the relationship between the parties involved.
Youth Garden Intern: Interview
We interviewed a former intern to gain a more personal, first-hand perspective of the Youth Garden experience. Though they were very enthusiastic about the program and its impact on their interpersonal skills, she admits that she went through hoops to get involved. She was referred to the program by a cousin, who was previously an intern, and experienced an extensive application process that required multiple phone calls and emails.
There was no clear application process. I only gained access to the online application after getting the Program Manager’s phone number from my cousin and calling her.
Start quote
End quote
Even after completing the program, she finds it challenging to keep up with Youth Garden events. Since graduating, she has only attended one Youth Garden event, which she only discovered because Youth Garden directly reached out to her.
CSA Member: Surveys
We took advantage of the existing email list and conducted a survey among CSA members to collect a more quantitative data set. The survey consisted of multiple choice, likert scale, and optional short answer questions so participants weren’t too overwhelmed. Click the image on the left to expand for details.

We sought to understand how they found out about the program, why they joined, and if they understood the program’s impact.
We found that knowledge of the Youth Garden and CSA Program were dependent on chance encounters. Results were spread out and indicate that the Youth Garden website is not a reliable source for outreach.
Pie chart indicating how people found out about Youth Garden program
The newsletter does a good job of informing me about the Youth Garden. I love it all - recipes, facts, and learning more about the youth!
Start quote
End quote
60% of participants check the Youth Garden less than once a quarter and rarely use the online Farmstand. Though, all of the CSA members we surveyed were vocal about the physical newsletters they receive with their monthly produce boxes and enjoy seeing their impact.
Target icon
Initial Ideation: Sketches & Low Fidelity Prototype
Each team member developed their own wireframe sketches and hierarchy of information to encourage a variety of iterations, determine what patterns occur and why.
Screenshots of wireframe sketches
From there, we met as a group to discuss the strengths and weaknesses of each design until we landed on a model for our site architecture. Though we only had time to produce a low fidelity (lofi) prototype of the landing page, we presented this website directory and got approval from our stakeholders.
Projected Youth Garden site architecture
We aimed to tell a story through our landing page by establishing an initial impression, giving a brief overview, then prompting our audience with a call to action.
First Impression
First section of low fidelity Home Page establishing a first impression
Program Overview
Second section of low fidelity Home Page summarizing the program overview
Call to Action
Third section of low fidelity Home Page initiating a call to action
Mid Fidelity & Testing
We continued to build off our low fidelity prototype and branched into the other pages through our mid fidelity (midfi) prototype. While we value the storytelling incorporated in our Landing/About page, we felt that the scrolling was a bit excessive and divided our sections among the other pages moving forward.

We decided to perform user testing on our midfi since it was more fleshed out, familiar, and easier for participants to understand compared to our lofi. We conducted 2 rounds of testing with 7 users:
Icons representing 3 Interns (ages 14-21) and 4 CSA Members (ages 22+)
Graphic displaying order of tests and iterations: Mid Fidelity, User Testing (round 1), Iterations, A/B Testing (round 2), High Fidelity
Establish a clear understanding of program logistics
Original Midfi
3 out of 7 participants thought that the schedule was difficult to read and visualize
Original Seasonal Schedule Midfi does now put emphasis on important dates
A/B Testing
We devised two different iterations of the membership schedule that emphasize important dates by representing time within the design.
Identify crucial information with minimal clicks and scrolls
Encourage participation
Establish a more memorable and consistent brand
High Fidelity Prototype
Outside of the changes we made through our user testing, we also included features based on our user and secondary research. These features aim to keep users engaged and address CSA member needs.
This project, while rewarding and socially impactful, presented many challenges and lessons to carry with us. Navigating through such a large problem space, given the number of pain points from our stakeholder, proved to be a formidable challenge. Therefore, if I could do this project again, I would organize our thoughts more. I would spend more time in the low-fidelity stages, where decisions are more low stakes, then foster a more iterative approach in subsequent phases.

If given the opportunity to extend this project, I would like to get feedback and conduct a final round of user testing. I would also be interested in refining the mobile view and Farm Stand page to increase accessibility.

In response to Youth Garden’s eagerness to implement our prototype, we referred them to Triton Software Engineering to make these updates and perform possible beta testing.
Youth Garden design team at gardenYouth Garden design team with staff
DFA high fidelity prototype displayed on mobile and desktop browser screen
How might we celebrate DFA's accomplishments through their website to reach potential members, mentors, and community partners
Spotify CarPlay high fidelity prototype displayed on CarPlay screens
Spotify CarPlay
How might we redesign Spotify CarPlay to establish a more efficient and safer usability experience on the road
Impact App high fidelity prototype displayed on iPhone screens
How might we encourage young folx to get involved in their community and create positive social change