SHARED GARDEN TASK MAP

By Erica Hicks

________________

California State University Monterey Bay

CST 499, Computer Science Capstone

________________

Client: Trellis for Tomorrow

Faculty Advisor: Jesse Cecil

December 2021
 1

EXECUTIVE SUMMARY

Shared Garden Task Map for Trellis for Tomorrow

By
Erica Hicks
Bachelor of Science in Computer Science
California State University Monterey Bay, 2021

Trellis for Tomorrow is a nonprofit organization that builds shared gardens run

predominantly by volunteers. The volunteers grow organic produce in the gardens that gets

donated to local food pantries. Trellis for Tomorrow has 20+ partner sites where they have

installed shared gardens. Each garden currently uses its own method of communicating with

volunteers, but these methods are mainly old-school whiteboard and pens rather than a modern

web-based project management software. Hence, the main goal of this project was to increase

productivity at the garden sites by providing a better way to communicate tasks to volunteers and

provide them with more resources in a format that is easily searchable, trackable, and shareable.
 2

TABLE OF CONTENTS

PART I 4
BACKGROUND AND APPROACH 4
INTRODUCTION 4
PROJECT NAME AND DESCRIPTION 4
ISSUE 4
SOLUTION 5
EVIDENCE OF NEED 5
PROJECT GOALS AND OBJECTIVES 6
GOALS 6
OBJECTIVES 6
ENVIRONMENTAL SCAN 7
STAKEHOLDERS AND COMMUNITY 7
ETHICAL CONSIDERATIONS 8
LEGAL CONSIDERATIONS 9
FUTURE ENHANCEMENTS 9
PART II 10
DESIGN REQUIREMENTS 10
APPROACH AND METHODOLOGY 10
FUNCTIONALITY REQUIREMENTS 11
USABILITY TESTING PLAN 13
USABILITY TESTING EVALUATION 13
PART III 13
FINAL DISCUSSION AND REFLECTION 13
TIMELINE AND BUDGET 13
TIMELINE 13
BUDGET 14
FINAL IMPLEMENTATION 15
DISCUSSION 16
PROBLEMS 16
LESSONS LEARNED 17
FUTURE 17
REFERENCES 19
APPENDICES 21
 3

APPENDIX A 21
APPENDIX B 24
APPENDIX C 27
APPENDIX D 28
 4

PART I

BACKGROUND AND APPROACH

INTRODUCTION

PROJECT NAME AND DESCRIPTION

Trellis for Tomorrow is a nonprofit organization that builds shared gardens that rely on

volunteers for virtually all aspects of the care and cultivation of the organic produce grown. The

volunteers bring a disparate range of horticultural experience and knowledge to the garden, and

are seldom able to provide their labor on a consistent schedule. This creates logistical challenges

in running the garden. My project, Shared Garden Task Map, aims to increase productivity at

garden sites by improving communication between head gardeners and volunteers, and between

the volunteers themselves.

ISSUE

When a volunteer arrives at the garden, how do they know what tasks need to be done,

and how do they share status for the tasks they worked on before they leave? How can head

gardeners direct volunteers remotely and effectively at a growing number of distant garden sites?

Currently communication is mediated in various ways. One promising method that is in

use is a physical whiteboard located on site with pending tasks written on magnetic labels that

get placed on a bird's-eye drawing of the garden. This solution is nice and intuitive but comes

with limitations. It is subject to failure when there is wind, rain, accidents, vandalism, etc. There

is also no way to restrict who has permission to move or reorganize the board. Another issue is

that it requires resources (whiteboards, pens, laminated paper, etc.) that are wasteful and

expensive. There is also no record of when a task was updated or marked complete. This requires
 5

head gardeners to be on site regularly to update and monitor the board which is inconvenient,

time consuming, and inefficient.

SOLUTION

The shortcomings of existing solutions can be mitigated or eliminated entirely by

replacing the physical whiteboard with a web-based digital version that not only provides

immediate and up-to-date status, but will also feature links to resources (eg, how to care for a

tomato plant) and a forum for asking questions and reporting problems. A digital whiteboard will

enhance communication and dialogue with 24/7 remote access which should reduce the

workload for the head gardeners by helping volunteers be more independent. The head

gardeners, volunteers, and even the plants will all benefit from improved coordination of

resources. What’s more, the food banks receiving the harvests, and hence the food recipients

visiting the food banks, will benefit from the increased productivity of the gardens.

EVIDENCE OF NEED

The Shared Garden Task Map project is especially needed to increase productivity now.

The COVID-19 pandemic caused a shortage of volunteers and the ensuing economic downturn

reduced donations. At the same time demand is higher than ever for the food Trellis for

Tomorrow’s gardens produce. With head gardeners overworked, volunteers need to work more

independently and any new volunteers need to get up to speed as fast as possible which means

communication is paramount.
 6

PROJECT GOALS AND OBJECTIVES

GOALS

● Help Trellis for Tomorrow accomplish their mission of fostering compassion and

resilience in people, and inspiring them to build sustainable communities

● Help Trellis for Tomorrow’s Food for All program produce more food for food banks

● Help Trellis for Tomorrow’s partner sites run smoothly with greater independence

● Improve communication between head gardeners and volunteers, and between the

volunteers themselves

● Minimize the amount of oversight volunteers need

● Minimize the amount of time head gardeners spend directing volunteer efforts on site

● Improve productivity at the garden sites; increase size of harvests while reducing

resources used

● Reduce the cost of managing the gardens

OBJECTIVES

● Create a digital garden map for tracking garden tasks for the Dornsife garden site

● Make tasks clickable to see details

● Create an intuitive user interface to create new tasks

● Create an intuitive user interface to move tasks around using drag and drop

● Create a page where harvest weights can be submitted and viewed

 7

ENVIRONMENTAL SCAN

There are many gardening apps available. For example, there are garden planning tools

for mapping out where to plant everything with the help of a drag and drop interface that

automatically prevents crowding and incompatible neighbors by enforcing placement rules and

showing red or green indicators between neighboring plants (Garden Plan Pro). Other apps

enable automated garden task reminders to be set based on what crops are currently growing in

your garden and which growth stage they are in (Garden Manager Plant Alarm). Other apps are

more akin to journals for tracking what has already been done in the garden and how well each

crop is going (Garden Journal, n.d.).

The key difference in my Shared Garden Task Map project is that it will be focusing on

improving the coordination of volunteers’ efforts in the garden. Other volunteer coordinator

applications, like Volgistics, focus on scheduling volunteers whereas the Shared Garden Task

Map app will focus on scheduling tasks not people (Volgistics, n.d.).

Existing tools for scheduling tasks with a Kanban board include project trackers like

Asana, Jira, Monday.com, and Trello. These lack an intuitive interface that maps the tasks to the

actual garden design. They also require subscriptions to get premium features.

STAKEHOLDERS AND COMMUNITY

One of the primary stakeholders is Trellis for Tomorrow who are hoping to have more

successful gardens. Other stakeholders include the head gardeners and the volunteers working in

the gardens. They all stand to gain from greater productivity. Through this increased

productivity, more food can be grown in the gardens. And more food directly benefits those in

need living in surrounding local communities who are experiencing food insecurity.
 8

ETHICAL CONSIDERATIONS

A fundamental requirement of this project was to provide a technology solution to a

current problem, but using technology is easier for some communities than others. In any

transition from a hardcopy to a digital format, there is a risk of losing less digitally-connected

users. Less tech savvy volunteers may also struggle to make the transition. This boils down to

two primary issues: some people won’t be able to access it period; and some people will have a

harder time using a digital format.

At this point, the gardens where the product is being tested have volunteers who have

smartphones and data plans. A lot of work was done on the GUI to make it as intuitive as

possible. Simple written instructions were also included at the top of the screen. Through testing,

a level of intuitiveness should be reached that users should not need training on how to use the

software.
 9

LEGAL CONSIDERATIONS

Any application that collects user data needs to follow laws regarding user data privacy.

Currently, no user data is collected because the create account and reset password features have

not been implemented. In future releases, the app will collect user emails as needed to create a

user login and reset a password. This information needs to be protected by using encryption

among other security policies. The application is hosted on Heroku which uses the HTTPS

protocol for transmitting data and has Automated Certificate Management. Since the application

is built using the Spring Boot Java application framework, it has built in web security features to

prevent attacks like Cross Site Reference Forgery (Raible, 2018).

FUTURE ENHANCEMENTS

Long term as the application gets used across multiple seasons and years, it will need

additional features such as an archive and the ability to edit the layout of the garden beds

themselves. Currently, the application has only been developed for one garden, but in the future

it will be deployed at many garden sites. The method for building the garden bed layout needs to

be streamlined. Ideally, it will be editable by the user instead of statically built out by the

programmer. Other features requested by the client include a notice board where announcements

can be posted on the homescreen or on specific gardens. Data analysis techniques could be used

to improve the efficiency of the gardens. Over the course of years, an AI feature could start

automatically recommending when to do certains tasks.

 10

PART II

DESIGN REQUIREMENTS

APPROACH AND METHODOLOGY

The approach I followed in communicating with my client was weekly Zoom meetings

on Tuesday mornings at 10:30am with email and Slack as backup modes of communication

during the week. The project milestones were tracked using a Google Doc where features and

bugs were recorded.

To implement the product, I relied on technologies used in previous course projects. In

researching the project, I referred to previous coursework and course material, Stack Overflow

(Stack Overflow, n.d.), W3school (W3Schools, n.d.), and MDN documentation to troubleshoot

(MDN Web Docs, n.d.a). The web application was hosted on Heroku which provides free

web-hosting for MVPs (minimum viable products) (Heroku, 2021a) rather than AWS (Amazon

Web Services) because AWS limits free accounts to one year. The web application was built with

Spring Boot Java for a backend framework (IBM, 2020). Spring Boot Java, as covered in CST

438, was used as opposed to NodeJS, as covered in CST 336, so the server side code was written

in Java instead of JavaScript (Chapter247, 2020). For the frontend, the CSS framework Bootstrap

was used to style the pages and give them a professional feel (Bootstrap, n.d.). Bootstrapalso

provided shortcut methods for adding tooltips, popovers, and modals to help users find

information easily. The database used was a MySQL database hosted on Heroku using the

JawsDB addon because it has a free version called Kitefin (Heroku, 2021b). The code was saved

on GitHub to provide version control for saving code and developing new features independently

of the production version of the code deployed on Heroku. While programming, I used Eclipse

for my development environment and MySQL Workbench to create the local database for testing
 11

purposes. Debugging relied on Google Chrome’s developer tools and debugger. To test the REST

APIs built, I used Postman (Postman, n.d.).

FUNCTIONALITY REQUIREMENTS

The required functionality is as follows

User/Admin Requirement

User View Garden Map

View tasks for each garden bed

View details of a task

Mark a task as complete

Undo marking a task as complete

Submit harvest weights

Submit an issue/question that came up while working on a task

Admin Add tasks to each garden bed

Delete or archive a task

Add details to a task

Change which crop is in a bed

Unmark tasks as complete

View history of completed tasks

View table of submitted harvest weights

Table 1 Functionality Requirements

The functionality was split into two screens: the admin screen and the user screen shown

in Figures 1 and 2, respectively.

 12

Figure 1 Admin Screen

Figure 2 User Screen

 13

USABILITY TESTING PLAN

The usability testing plan was to send the heroku web app to testers along with a google

form asking for feedback on usability and desired features. Two types of testers were found:

retirees and young professionals that fall into the demographic that is typical of volunteers at

Trellis for Tomorrow’s garden sites. Testers were given a list of tasks to complete using the app

including both admin and user roles. The usability survey for the admin side of the app is

included in Appendix A, and the usability survey for the user side of the app is included in

Appendix B.

USABILITY TESTING EVALUATION

The testing evaluation was performed remotely on the testers’ own time rather than

in-person where the tester could talk through their reactions real-time. In order to direct the

testers to various parts of the app, an email was sent out with instructions; see attached email in

Appendix C.

PART III

FINAL DISCUSSION AND REFLECTION

TIMELINE AND BUDGET

TIMELINE

Figure 1 Proposed Project Timeline

 14

Figure 2 Actual Project Timeline

During development, it felt like the timeline was way behind schedule, but in retrospect it

was not far off of the planned timeline (compare Figure 1 and Figure 2). The actual timeline was

stretched by one week and more time was spent on the Admin side of the application than

planned. An issue with the proposed timeline, was no cushion was built in for debugging.

BUDGET

Resource Description Cost

Heroku Free version for "Non-commercial apps, such as proof $0

web hosting of concepts, MVPs, and personal projects." (Heroku,
2021a)

JawsDB MySQL Free Kitefin version $0

Database Leopard version (Heroku, 2021b) $10

Spring Boot Java Free, open-source framework (IBM, 2020) $0

Framework

Bootstrap CSS Free, open-source CSS framework (Bootstrap, n.d.) $0

Framework

Total $0
$10
Figure 3: Project Budget

The project expenses went over the planned budget. The area where cost went over

budget was the database. The issue was the Kitefin version limited the application to 10

connections per hour. For running the application this was enough, but for editing the database

using MySQL Workbench more connections were needed. To avoid the slow-down of waiting an
 15

hour when I ran out of connections, I paid for 15 connections per hour by upgrading to the

Leopard Shark version of JawsDB.

FINAL IMPLEMENTATION

As shown in the screenshots in Appendix D, the home screen has a list of Trellis’s

Garden sites. Right now there is only the Dornsife garden, but eventually there will be all 21

Trellis Garden sites to choose from. After signing in, the Admin can see the garden map and a

list of tasks they can add. Clicking the harvest button, for example, adds a green harvest task

circle to the screen which the Admin can drag and drop onto a bed. Left-clicking on the task

circle brings up a form so that the Admin can add a description or notes to the task, see Figure 4.

Left-clicking on the bed number brings up a form so that the Admin can edit the name of the

crop currently growing in the bed. To delete a task, the Admin can just drag and drop the task

circle into the recycle bin.

Figure 4
 16

After logging in, the User can see the garden layout and the tasks assigned to each bed.

They can either go by the color codes, or left-click on a task circle to see what type it is. For

example, yellow is a Weed task. Left-clicking on a task circle also shows any notes about the

task. For example, on a Weed task it might say, “Wear gloves.” They can also view the list of

crops that are growing in each bed by clicking on the Crop List button at the top of the garden

map. To mark a task as complete, the User left-clicks the task circle which brings up the

task-info popover which includes a “Mark Complete” checkbox and a Submit button. When the

task is marked as complete, the task circle becomes grayed out but stays on the bed. If the task is

a harvest, they are prompted to enter a weight. The User (and Admin) can see the completed

tasks and submitted harvest weights by going to the Task History and Harvest Weights pages,

respectively.

DISCUSSION

PROBLEMS

Problems that appeared during the design phase were not understanding how the

application was going to be used. For example, how often the Admin would want to go in and

edit the tasks, how to archive a task or view archived tasks, and whether tasks should be

recurring. These questions were never resolved, so will be addressed in future releases. The

answers to these questions will take extensive user feedback to resolve.

Problems that appeared during the implementation phase were not knowing how to

implement the interface, specifically, if I should use <svg> elements or <div> elements for the

task circles. First, I tried using <svg> elements, but clicking and dragging didn’t work like

normal on <svg> elements. I found a library called GreenSock (GreenSock, n.d.), but it just kept

creating problems that I was using <svg> elements, so eventually I went back and had to start
 17

over, redoing the entire user interface using HTML <div> elements. That way, I could use

normal click events and drag-and-drop events.

During debugging I had an issue using Ajax calls because I wanted to set a variable in the

Ajax call’s success function that I was going to use immediately after. However, Ajax calls are

asynchronous, which means they send a request to the server and then continue code execution

without waiting for a reply (SagarPPanchal, 2014). During debugging, I discovered my variable

wasn’t being set, so I had to set the asynch variable to false. But that is deprecated because it

stops execution of all other Javascript on the page which is detrimental to the user experience, so

instead I plan on using Javascript promises (MDN Web Docs, n.d.b). I did not have time to go

back and fix this implementation detail yet, but right now the application can still be used despite

this flaw.

LESSONS LEARNED

One of the lessons I learned is that I could prototype quicker by using W3School’s “Try it

Yourself” environment to test out frontend features before adding them to the app (W3Schools,

n.d.). I also learned the hard way to avoid project creep, to promise less, and deliver more when

working with a client. Another lesson learned about working with a client is to make sure I had

something new to show at every meeting or else reschedule the meeting. Also to keep the client

in the loop on weeks I didn’t have any visual progress, it would have been helpful to share the

current state of my to-do list on Asana’s project management site used by Trellis, as originally

planned, rather than keeping it in a private Google-doc out of convenience (and shame).

FUTURE

The features that will make this app the most useful are data collection and links to

Trellis’s Gardening Handbook so that all the info needed to accomplish the tasks is easily
 18

accessible. Both of these features have yet to be added. While there is some data collection being

done, the data is not easily accessible yet. For example, the data tables can be sorted but not

filtered. In the future I hope to add more filter options and finetune the best way to visualize the

data.

Some additional features that I would like to add are keyboard shortcuts like ctrl-c, ctrl-v,

and ctrl-z on the admin screen for ease-of-use. Other time-savers for adding tasks would be an

option to autofill a bed with all tasks or to add a specific task to all beds. To increase

communication between volunteers and head gardeners, there should be a Submit Issue form on

the user page. There should also be an announcements box at the top of the user page where the

Admin can indicate what tasks or beds to prioritize or focus on rather than expecting the Users to

click through all the tasks to see which are marked Urgent in the notes/description box. Finally,

way down the road after collecting several seasons worth of data, machine learning could be

used to generate suggestions for when to schedule tasks to help the head gardeners.
 19

REFERENCES

Bootstrap. (n.d.) Bootstrap: The most popular HTML, CSS, and JS library in the world.

https://getbootstrap.com/

Chapter247. (2020, March 17). NodeJS vs. Spring Boot Java: Which one to choose and when?

https://www.chapter247.com/blog/node-js-vs-springboot-java-

which-one-to-choose-and-when/

Garden Journal. (n.d.). Garden Journal. https://gardenplanner.territorialseed.com/journal.aspx

Garden Manager (n.d.). Garden Manager: Plant Alarm.

https://play.google.com/store/apps/details?id=com.jee.green&hl=en_GB&gl=US

Garden Plan Pro (n.d.). Garden Plan Pro: A garden planner app for iPhone.

http://www.gardenplanpro.com/

GreenSock (n.d.). Animating SVG with GSAP. https://greensock.com/svg-tips/

Heroku. (2021a). Heroku Pricing. Heroku.com. http://heroku.com/pricing

Heroku. (2021b). JawsDB MySQL. Heroku.com. https://elements.heroku.com/addons/jawsdb

IBM. (2020, March 25). What is Java Spring Boot?

https://www.ibm.com/cloud/learn/java-spring-boot

MDN Web Docs. (n.d.a) MDN Web Docs. https://developer.mozilla.org/en-US/

MDN Web Docs (n.d.b). Using Promises.

 20

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises

Postman, (n.d.). Postman API Platform. https://www.postman.com/

Raible, M. (2018, July 30). 10 Excellent Ways to Secure Your Spring Boot Application. Okta

Developer. https://developer.okta.com/blog/2018/07/30/10-ways-to-secure-spring-boot

SagarPPanchal (2014, Feb 24). Re: What does "async: false" do in jQuery.ajax()? [Discussion

post]. stackoverflow.

https://stackoverflow.com/questions/1478295/what-does-async-false-do-in-jquery-ajax

Stack Overflow. (n.d.). Stack Overflow: Where developers learn, share, & build careers.

https://stackoverflow.com/

Volgistics. (n.d.). Volunteer Management Software Solutions. https://www.volgistics.com/

W3Schools. (n.d.). W3Schools Online Web Tutorials. https://www.w3schools.com/

 21

APPENDICES

APPENDIX A
22
23
 24

APPENDIX B
25
26
 27

APPENDIX C

Shared Garden Task Map Usability Testing

Hi,

Thank you for volunteering to test the Shared Garden Task Map web app. You can
access the web app at https://gardenmap.herokuapp.com/

To run the app through its paces, please try the following:

1. Go to the admin page

a. add a task to one of the garden beds
b. add a description to a task
c. delete a task
d. edit a garden bed crop.
2. Go to the user page
a. view a task
b. mark a task as complete
c. submit a harvest weight
3. Click around and see if you can break anything as you play with the app.

Once you’re done playing, please provide feedback to describe your experience
using the admin screen and the user screen:

Admin survey link https://forms.gle/TPTUWH3cGtjo4S139

User survey link https://forms.gle/pXmG6xEEtmKBvkcJ6

Thank you again for your time!

Sincerely,
Erica
 28

APPENDIX D
29
30
31
32