Danielle Villa-Agustin
UX Designer & Problem Solver
Youth Garden
How might we increase Youth Garden’s outreach, engagement, and retention through establishing a more intuitive design.
OVERVIEW
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.
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.
PARAMETERS
Timeline: 16 weeks
Context: Design for America, To Be Designed (TBD) Project
Stakeholder: 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
Context: Design for America, To Be Designed (TBD) Project
Stakeholder: 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
MY CONTRIBUTION
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.
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.
ASSESSING THE SOIL
Original Website
Click image to expand for details.
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
• 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
GOAL: Increase accessibility and make it easier to get involved
STOP & SMELL THE FLOWERS
Secondary Research
We looked to 7 nonprofits, both big and small, to trace patterns and discover what makes a successful organizational website.
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
GOAL: Showcase benefits and positive impact to appeal to potential members
DIGGING THE DIRT
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.
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 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.
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!
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.
GOAL: Digitize the outreach process and newsletters to increase retention
UNDERSTANDING OUR ROOTS
Personas
Our team developed two user personas that concisely summarize our user research to provide context, guide our design, and make the process more personable. This way we can prioritize our users' immediate needs. Click on each persona to expand for more details.
SOWING THE SEEDS
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.
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.
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
Program Overview
Call to Action
SPRUCING IT UP
Style Guide
While we wanted to stay true to Second Chance’s existing brand, we felt that it was important to differentiate the program and appeal to the younger target market. We maintained the core color scheme, but also incorporated lighter shades to establish a more fun and youthful feel.
When asking users to describe how our brand makes them feel, during the later stages of user testing, and collected the following responses...
GROWING SEASON
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:
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:
CSA MEMBERSHIP SCHEDULE
Establish a clear understanding of program logistics
Original Midfi
A/B Testing
We devised two different iterations of the membership schedule that emphasize important dates by representing time within the design.
Prototype A
Cyclical Time
• Information for each is spread out and easy to distinguish, but user must move eyes across screen
• Symbols are a bit redundant
• Current season not highlighted
• Symbols are a bit redundant
• Current season not highlighted
Prototype B (Final)
Linear Timeline
Users showed a strong preference toward this design...
• Timeline visual is clear and familiar
• Consistent with other linear styling across website
• Highlights the current season
• Timeline visual is clear and familiar
• Consistent with other linear styling across website
• Highlights the current season
INFORMATION CARDS
Identify crucial information with minimal clicks and scrolls
Original Midfi
• Not obvious that you can hover to read more, some users tried clicking
• Hover feature is not mobile friendly
• Low contrast of text on blurred images made it difficult to read
• Hover feature is not mobile friendly
• Low contrast of text on blurred images made it difficult to read
Final Prototype
EMBEDDED SOCIAL MEDIA
Encourage participation
Original Midfi
Final Prototype
HOW IT WORKS
Establish a more memorable and consistent brand
Original Midfi
A/B Testing
We aimed to encourage people to “read more” by naturally drawing connections between the Interns, CSA Members, Farm Stand, and Donating.
Prototype A
Cycling through
Prototype B (Final)
Growing together
A NEW LEAF
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.
Featured Recipes: Recipes organized by featured produce associated with each season.
Intern Spotlights: Highlights intern stories to encourage others to join the program and show CSA members their impact firsthand.
CSA Newsletter: Preview followed by option to view the archive and subscribe to future newsletters.
NATURE DOES NOT HURRY, YET EVERYTHING IS ACCOMPLISHED
Reflection
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.
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.
.jpg)
DFA @ UCSD
How might we celebrate DFA's accomplishments through their website to reach potential members, mentors, and community partners
VIEW CASE STUDY >>
Spotify CarPlay
How might we redesign Spotify CarPlay to establish a more efficient and safer usability experience on the road
VIEW CASE STUDY >>
Catalyst:Impact
How might we encourage young folx to get involved in their community and create positive social change
VIEW CASE STUDY >>