San Diego Zoo: Web Tools Redesign
Summer 2020 — Fall 2020
Develop for Good is an intercollegiate technology/design organization that aims to generate social good by providing web app and development services with non-profits. Some of our most notable partners include UNICEF, the World Bank, the Nature Conservancy and the World Health Organization. Check us out at https://www.developforgood.org/!
Project Summary
The goal of this project was to design a website that allows users to (1) search for the natural occurrences and institutional collections of different plant species in California, and (2) keep track of and update the users’ institutions’ lists of the plant species that they have already collected and plan to collect.
We have created a Figma prototype, a video demo of this prototype being used, and a document explaining the features of the prototype. We have also created a document that details possible solutions for how we might develop this website and allow it to communicate with The San Diego Zoo’s plant species database.
The Challenge
Users of this website will primarily be members of institutions (such as The San Diego Zoo) that collect plant species. Thus, users need to be able to find information on existing collections/occurrences of certain plants, as well as maintain their own institutions’ lists of already-collected and soon-to-be collected plants.
During the design phase, our first challenge was to first unite the functionalities of three separate, existing websites: one that allows users to search for plant collections at institutions, one that allows users to search for plant occurrences in nature, and one that displays plant collection information on a map. Our next challenge was to create a functionality where users from specific institutions can compile and maintain their institutions’ own collection lists.
The three separate, existing websites mentioned above do not currently communicate with the database to show updated information to the user. Instead, these websites store the data themselves, and are manually updated at regular intervals so that their data is current. Our main challenge on the development side has been to integrate the database with our new website so that the website can pull data directly from the database without requiring someone to manually update the website. Furthermore, the website must restrict read and write access to the database to only certain institutions and users.
The Team
Julia Jorgensen — Stanford ‘21
Yifei He — Stanford ‘22
Athena Tang
Eduardo Esteban
Megan Lin — Carnegie Mellon ‘23
Sean O’Connor — Stanford ‘22
Shijing Zheng — Brooklyn College ‘20
Our Solution
To solve the development challenges, we decided that the website would need a front end (coded in React JS) and a back end (hosted on Firebase), in addition to the database.
To first access the website, a user would sign in with her institution-provided username and/or password. This would give the user read and/or write privileges to the database. Later, when the user makes a request to see certain data from the database (e.g. she searches for collections of a specific plant species), this request, along with the user’s institution/privilege information, would be passed from the front end to a function on the back end. This backend function would decide based on the user’s institution/privilege information whether the user is allowed to access the data she has requested. If so, this backend function would use an API key to retrieve the requested data from the database and then pass the data back to the front end, where the user would see it.
Similarly, when a user makes a request to update the database (e.g. the user has collected a plant, so the database needs to reflect this new collection), the request, along with the user’s institution/privilege information, would be passed from the front end to a (different) function on the back end. This backend function would decide based on the user’s institution/privilege information whether the user is allowed to update the database. If so, this backend function would use an API key to update the database with the given data. The function would then return a success message for the user to view on the front end.
Calls between the front end and the back end and between the back end and the database would be executed via HTTP protocol.
These solutions would allow specific users to read and write directly to the database.
Demo Video
Our Impact
First, the implementation of this website will make it easier for institutions that collect plants to compile, organize, and update their lists of the plant species that they have collected and plan to collect.
Second, by combining the three existing websites, our website will reduce redundancy and increase efficiency in the process of searching for plant occurrences and collections.
Finally, by communicating directly with the database instead of maintaining a static store of data that must be manually updated, our website will both lessen the workload of employees of The San Diego Zoo and ensure that the plant data accessed through the website is always up-to-date.
Christa Horn, our contact at The San Diego Zoo, said that our work has “provided fresh perspectives to [the] project, improving elements of the project and expanding [The San Diego Zoo’s] vision of what might be possible for [the zoo’s] new map-data interface.”
