Dean Dijour
Dean Dijour
lossyphipps.gif

Phipps Bricks

Attach58515_20190819_090259.jpg

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.

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.

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

giphy (4).gif

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.

20190427_130928.jpg

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

Screen Shot 2019-08-30 at 8.35.16 PM.png

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.

Screen Shot 2019-08-30 at 8.36.53 PM.png

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.