Youth Garden Website Redesign
Role
UX Designer and User Researcher
Timeline
Jan 2022 - Jun 2022
Teammates
Danielle Villa-Agustin, Anastasiya Markova, Azzaya Munkhbat, Esther Liu, Evan Liu
Involved Organizations
Youth Garden at Second Chance
Second Chance is a non-profit organization that aims to help youth of marginalized communities break cycles of incarceration and poverty through early intervention programs. One such program is the Youth Garden, which teaches the youth how to become leaders and contribute to the health and sustainability of their communities. The Youth learn about sustainable agriculture and experience growing and cooking their own food.
The participating youth are called interns and the subscribers of Youth Garden's quarterly food packages are CSA members.
Design for America at UCSD
Design for America is a nonprofit organization that recruits designers to design solutions for pressing problems in the community. I joined the team at UC San Diego who felt passionate about helping the Youth Garden improve its outreach.
Goals
Increase their marketability and improve access to information by:
-
Showcasing the impact of the program on the community
-
Highlighting the advantages of participating as a CSA (Community Supported Agriculture) member or intern (the youth)
-
Simplify the process of getting involved
Research
Secondary Research
The following are tips we gathered from successful non-profit organizations. We used these tips in our own design:
-
quantify success to make impact clear
-
create engaging infographics to make information easily digestible
-
maintain a consistent and unique brand identity for memorability
-
give a face to your organization to establish trust and a feeling of connection
-
embed social media links on the website to grow the network
Primary Research
Interviews
We decided to split our team in two for interviews for more efficiency. I led interviews with Youth Garden leaders and CSA members to understand their goals, motivations, and frustrations.
Simultaneously, other members of our team interviewed youth participants/interns, taking note of what drew them to youth the Garden. The youth's perspective was essential to understanding how we could improve the Garden's marketing.
Survey
We didn't have access to more than a few interns, but we took advantage of Youth Garden's email list of CSA by conducting a survey. It allowed us to collect a large quantity of data. We were curious about the following:
-
How and why they got involved
-
How they interact with Youth Garden's website and newsletter
-
How up-to-date they are with Youth Garden's activities and impact
We crafted 3 types of questions: multiple choice, likert scale, and short answer. During our brainstorming session, I encouraged my team to limit short-answer questions and keep questions clear, concise and error-free for smooth participation. I also suggested we start with a brief introduction to establish trust between us and the CSA members, and end with the personal, demographic questions.
Below are survey and interview questions we selected to ask CSA members after brainstorming.
%20(8).png)
Findings About CSA Members
1.
They rarely, if ever, visit the website because it confuses them
.png)
2.
Most discover the Garden through word-of-mouth
3.
They enjoy reading the newsletter very much, especially the sections with intern stories and recipes.
These Likert scale questions are in order of 1 (strongly disagree) to 5 (strongly agree)
There is no one unified way that information was exchanged and CSA members were updated. Most weren't even aware of the Garden's Instagram account.
4.
Findings from Intern Interviews
1.
Learned about Youth Garden through word-of-mouth (school presentations and friends)
2.
Application process is hectic and difficult (requires multiple phone calls and emails)
3.
Youth Garden has helped them develop applicable job and interpersonal skills
Personas
After interviews, we created personas contextualize our learning. We referred back to them throughout our design process to tailor our design to each stakeholder's goals.
Youth Garden Intern
%20(5)%20(2).png)
Youth Garden Director
%20(6)%20(2).png)
CSA Member
%20(7)%20(2).png)
Youth Garden Gardener & Teacher
%20(4)%20(2).png)
How Might We's
Using what we've learned from each stakeholder in our primary research and marketing strategies we gathered from our secondary research, we formulated "How Might We" questions. To collaboratively decide on these questions, we used the dot-voting method.
How might we...
-
Highlight the benefits of getting involved at the Second Chance Youth Garden as a CSA member and an intern (the youth)
-
Showcase the impact the program has on the community.
-
Simplify the process of getting involved
%20(9).png)
Sketches & Low Fidelity Prototype
Sketches
We each made our own sketches of what the website should feature and how we might navigate to those features.
%20(11).png)
%20(13).png)
Lo-fi Prototype
On the right is our favorite features we noted from the sketches
.png)
Mid-Fidelity Prototype
Website Redesign Plan
We identified problem areas in the current website and what we would change in our mid-fi prototype
.png)
Mid-fi Prototype
.png)
.png)
.png)
User Testing
.png)
Style Guide
Youth Garden leaders preferred that we stay consistent with Second Chance's branding. Since user-testing participants agreed with us that the website could use more youthful colors, we got permission from Youth Garden and Second Chance to also use brighter shades of their colors. We used only their original colors in our mid-fidelity prototype and waited to receive approval for our proposed colors before we used them in our hi-fidelity.
We used mostly simple, denotative fonts for the text to stay consistent with the rest of the Second Chance website and ensure legibility. We also increased font size according to feedback from user-testing.
.png)
High-Fidelity Prototype
A/B Testing: Choosing Engaging Graphics
Through our secondary research and user testing, we realized that infographics and pictures are an essential part of what makes browsing a nonprofit website engaging and easy to digest. My teammates and I had different ideas on how we can represent themes like change, growth, giving, and receiving in our imagery. So, we conducted A/B testing with our varying ideas
.png)
We tested Version A and Version B of our prototype with a group of peers to see which set of graphics leaves a stronger impression on them. Version B was much more successful, but they did like the linear seasonal schedule from Version A.
Final Prototype
.png)
.png)
.png)
Reflection
Challenges
Project Scope vs Client Expectation
We held meetings and presentations to transparently share our design process with Youth Garden leaders. The leaders were very happy with our website design, and our final prototype was beyond expectations . However, ultimately, there was a miscommunication of our project scope. We accepted the project as an opportunity to create a high-fidelty prototype (what we were trained on) but did not realize that this was not communicated at assignment. Understandably, they imagined a fully functioning website at the end.
To resolve this issue, We contacted a student organization at UC San Diego who were willing to develop our design. Unfortunately our multiple attempts to facilitate this collaboration were met with silence from Youth Garden.
While the project did not achieve the anticipated outcome, I consider it as learning experience. Retrospectively, I understand the importance of ensuring there is a shared understanding of expectations between the design team and client from the outset. In future projects, my commitment is to proactively address these potential gaps for more successful collaborations and long-term results. Because in the classroom setting we defaulted to a routine design process, in a real-world example, we failed to see our technical biases.