Phipps Bricks
January 2019 - April 2019
Role: Lead Developer / Experience Designer
React JS + Algolia + Heroku
Tasked with accurizing and digitizing over 6,000 donation records for Phipps Conservatory and Botanical Gardens, a two-part web app was developed to first help volunteers record the locations of each donated brick, and then display the locations to visitors in a lightweight interface.
Stakeholders
Phipps Conservatory
Goal: Create a way for Phipps employees to easily log new donations in the system, with the locations of where each commemorative brick will be placed in the garden.
Visitors
Goal: Enable lightning fast donation lookup. Find the exact location of a donated brick on a phone or tablet, instead of a several-thousand row spreadsheet.
For Donors
Donors can search for bricks either by Donor Name or by Inscription. Once a record is clicked on, users can see the exact location of a brick. The secret sauce behind this powerful, error handling search mechanism is Algolia’s full text search API. It breathes intelligence and a Google-esque search capability to this massive dataset.
For Phipps Employees
Upon logging in with their credentials, Phipps employees are taken to the “Edit Bricks” page, where they can see information on all 6,000+ bricks in the database. The bricks can be updated by simply selecting one, tapping a location on the map, and submitting the new location to the system. Each entry to the Algolia database is timestamped and attached to a user record, for analytics and tracking.
Process - Ideation
Brainstorming
A number of approaches of varying feasibilities were proposed to accurize and display the GPS data in the brick garden. Ideas like extracting GPS metadata from drone image captures, and then using computer vision to read inscriptions on the bricks. The suggestion for Amazon’s Mechanical Turk was also thrown around, to expedite a manual logging process. Eventually, it became clear that we would need to create a custom GPS logging tool and manually log each brick, in order to ensure 100% inscription accuracy, and maximum GPS accuracy.
Brick Logging
As a team, we organized multiple volunteer brick logging sessions. After several weeks of brick logging, over 6,000 bricks had been manually recorded, and we achieved 100% accuracy for the entire brick garden. The process was painstaking, but highly accurate, and turned out to be the best approach.
Prototyping
Low-Fidelity
Figma proved to be immeasurably useful in rapidly prototyping this web application. With live collaboration, instant workflow linkages and mobile demos, we could quickly test and iterate our mockups with our board members and stakeholders.
High-Fidelity
Once final mid-fi prototypes were approved and development began, we received approval for high fidelity prototypes. We then implemented CSS styles on the React application with updated button and list styles, as well as new image frames.