Green thumb
PLACE: Freelance Work, Henderson Beck LLC
CLIENT: 6BC Botanical Garden
DURATION: 2021
ROLE: UI/UX Designer and Front-End Developer
OVERVIEW
The problem
In New York City, there are over 100 volunteer-led GreenThumb community gardens. Many of these sites have complex pasts and celebrated community involvement. GreenThumb allows NYC residents to get involved in their local community garden and discover the history of these sites and the unsung heroes involved in their creation.
A Solution for Outreach and Education
An educational app where locals can sign up for garden workdays, explore the history of community garden sites, and stay updated on upcoming events.
Stay connected:
Find accurate hours and updated events at community gardens
3. Stay Updated:
Enable reminders allow you to sign up for local volunteer days and garden events without fear of forgetting.
2. Uncover Local History:
Learn about the unique history of community gardens and their cultural significance in New York’.
RESEARCH
Understanding the Problem
Many community gardens are understaffed and underfunded. By creating an accessible platform for connecting with these sites and their histories, the goal is to incentivize local residents to get involved in their community garden.
The existing GreenThumb website is not centralized. Interested potential volunteers are asked to “visit the garden during open hours or contact the group. GreenThumb gardens have a sign posted with contact information for the group.”
I interviewed members of my local community garden to see their incentive for getting involved. Based on the interview responses I received from my local community garden, I found that many of the residents stumbled into volunteering by walking past the garden or by word of mouth.
These are some of the questions I asked:
Why did you get involved in volunteering at X community garden?
What do you know about the history of this site?
How does X community garden reach out to potential new volunteers?
DEFINE
Empathy Maps
I generated three uniquely different types of users based on the client kickoff interview.
PERSONAS
After empathy mapping, these three personas were used to help understand the users' needs, goals, and pain points, ensuring that we were on the right track with our design decisions.
Coming Up with Ideas and Solutions
To design for user engagement is to design for convenience.
Most community gardens have unorganized and outdated event calendars for hours of operation, volunteer events, and site histories. Thus, to design for user engagement was to more design for convenience. Based on the journey map below, I made my best assumptions to try identifying these other pain points that provided opportunities for my design.
ROAD MAPPING
Based on the current website, I created a site map to give a bird's eye view of the product and visualize existing pain points in the interface. it shows how pages are prioritized, linked, and labeled. The current design is full of redundancies. With this in mind, I explored roadmaps with a more simple and clean design.
DESIGN
Brainstorming
At the beginning of ideation, I focused on sketching the user process of finding a garden and registering for an event. I generated multiple ideas for the map and search function. Some of these preliminary sketches are below.
DESIGNING + PROTOTYPING
Sketching for Efficient Flows + Visualizations
I started to look at different UI to design the best visualization of mapping community gardens and events. Google Maps, CitiBike, Citizen, and mapping/educational apps were sources of inspiration!
ROUND OF TESTING AND IMPROVEMENTS
Learn about your community garden should be easy and exciting!
During my user testing, I reached out to multiple NYC residents NOT involved in community gardens and also asked for feedback on the functionality and clarity of my prototype. Overall, the feedback was very positive! Only then a few UI changes came about:
Adding a Contact feature for connecting with fellow volunteers
Adding a section on site history within the map
Adjusting colors for accessibility
Final Design and Prototype with added revisions
Style GuiDe
Prototype
DELIVERY
The delivery process consisted of making sure all the elements and high-fidelity wireframes were prepared to be handed over to the developer.
A key step in this process was creating the style guide and clearly defining all added tools or revisions. While the development team consists of web developers and not application developers, the outline will be given to the application developer once they are contracted from the team.
TAKEAWAYS
As a designer, it’s important to be mindful of various real-world constraints. While working with the client, I did not have the opportunity to work directly with other community gardens to understand their competing needs and interests.
Future Steps
Due to development time constraints, an MVP version of the app is being developed from the delivered assets. I am working with the client development team to get the rest of the functionality up and running.