Introduction

By: Pratham Gandhi (UChicago Class of ‘24)

I joined TechTeam in the Autumn Quarter of my first-year, hoping to use the technical skills I had picked up throughout high school to work on projects making a real impact in the community. Working on a TechTeam project throughout this past quarter has, in fact, pushed me to do so much more than just write code. Collaborating with other motivated University of Chicago students from across campus has been an extremely enriching experience, and I’ve been able to learn a great deal from their expertise in areas such as design, leadership, user research, and more. Because we all knew that the work we were doing was for a real-world client, we were all determined to deliver our project on time, and thus were constantly picking up and accomplishing any task we could. This meant that I was able to use this new knowledge I had gained from my peers and jump right into performing diverse roles in different parts of the project. Furthermore, working with both graduate and undergraduate students from different majors, departments, and years, I was able to be both a learner and a teacher, also helping teammates explore topics which I’m passionate about. All in all, I was stunned by how fast a group of students could get up to speed on a complicated project and begin to make an impact in their community. I’m really excited to tell you a bit about my amazing experience and the creative and technical process I had the chance to go through with my teammates.

A fundamental tenet of the CTL’s mission is expanding equitable access to tools, equipment, and information. In that spirit, the CTL aims to provide resources for makers who a) aren’t members of the tool library itself or b) need resources beyond what the tool library has to offer are still able to pursue their passions and ideas. While the CTL has always maintained what their website described as a list of “community resources, local business, and like minded organizations” for this purpose, it was simply that — a list. This list, which simply included links of resource’s webpages, was cumbersome to navigate and didn’t include enough relevant information to encourage visitors to investigate the resource further.

And this is where our project team came in. In the autumn of 2020, TechTeam partnered with the CTL to redesign and update the Library’s Resource Index page to help visitors find tool-related resources around the city. Over 10 weeks, the CTL asked us to update the code to make adding links easier but also to keep an eye out for any other relevant services that might belong on the page. So, in early October, we got to work brainstorming potential improvements to the page and their implementation strategies.

We began with the fundamentals, asking: ‘Who is our end user and what would they benefit from most?’ From conversations with members of the CTL team, we quickly formed a target user profile:

After further discussions with the CTL team focusing on the fact that users could be anybody in Chicago, we created three guiding design principles:

Having understood what specific problems our redesign would be trying to solve (both from the user’s standpoint and the CTL’s), we considered the functionalities and components which would best serve that purpose. Ultimately, we settled on three main improvements:

After designing each individual component, the last piece of the UI puzzle was, well, putting the pieces of the puzzle together. That is, we had to figure out how all of the components would fit together in the final layout of the page — creating the wireframe. We tried a few different layouts, and ended up deciding on the blocking and final layout shown below. The search bar would be in the top left of the page and (intuitively) the search results would show up underneath it. We intentionally dedicated the entire right half of the page to the map in order to emphasize each resource’s location and highlight to users that they were in fact reachable. Below the search and map complex, we tentatively left two blocks for a new resource submission feature as well as anything those working on the engineering might come up with. Additionally, we couldn’t decide whether or not to include images from each resource in its respective card (at least from a UI standpoint) at that point, so we again decided to see which method seemed more reasonable in the engineering stage.

Building out these improvements was going to be a multi-faceted process, so to tackle it organizationally, we split up into three engineering teams working on the database, the search feature, and map respectively. Before these teams began building their components, however, we needed a rigorous understanding of how they would link together.

While we initially considered building a simple storage/database and map functionality on our own (potentially connecting to off-the-shelf spreadsheet apps like Google Sheets or Airtable), we decided against it for two reasons. Firstly, we wanted a robust implementation that wasn’t so “hacked together” that it would be prone to failure due to edge cases we hadn’t seen or discontinued support of an obscure library. Secondly, we wanted industry-standard code and practices that the CTL would be able to easily understand, research, and maintain. So we started looking into third party platforms which we could use for the map and database functionality.

For maps, we found the Google Maps API. This API was great because it allowed us to embed a map on our page and drop custom markers on it. However, the Google Maps API markers had to be in latitude and longitude format, whereas all of the resources’ locations were just stored as addresses. So, we had to layer on the Google Maps Geocoding API to convert the addresses to coordinates. Secondly, for the database solution, we decided to use Firebase. Firebase is a cloud storage platform (also run by Google), which has the particular advantage of having a very easy-to-use web console. The web console would allow administrators at the CTL to graphically make edits to the database on the fly, leading to longer term usability. Additionally, Firebase enabled us to write Python scripts to easily read resource data into the database from a spreadsheet. Finally, to quickly build UI components, we began with the Bootstrap UI framework, which gave us the potential to add custom CSS styling on top of existing components. So now that we’d settled on all of the technologies, libraries, and APIs which would power our project, it was time to get building.

The CTL’s website was built with the drag-and-drop “WYSIWYG” (what you see is what you get) website editor Squarespace, so we needed to find a workaround to enable us to write our own code and build our own components. Luckily, Squarespace lets you inject vanilla Javascript code into page headers and embed custom HTML components.

Over the course of UChicago’s fall quarter, our team went through a rigorous design-build-test process, integrating all the different APIs, checking in with frontend designers, and reporting progress to the CTL team. We kept moving forward smoothly until all the engineering was wrapped up, suggesting new features and introducing enhancements along the way — such as deciding to fill the bottom two UI blocks with new resource suggestion and error reporting features, which pinged the CTL team’s email when something needed to be updated or removed. At the end of the quarter, our team had developed a fully-functioning and dynamic Resource Index with brand new backend database integration and map rendering capabilities. The CTL team was thrilled with our work!

Finally, it was time to deploy our web app. All of the code we had written broke down into two categories: custom HTML elements and the Javascript code which powered their functionality. To move our work onto the CTL’s website, we were able to use Squarespace CodeBlocks for embedding HTML and the built-in header code injection tool to add in our Javascript. In addition to the deployment of the site itself, we were also extremely committed to making sure that the CTL was able to maintain and use our app and backend system for the long term, so we also wrote up two guides to help the CTL team a) understand our frontend code if there were any bugs or compatibility issues with a future Squarespace version and b) understand how to use the Firebase console and edit the information in the database.

For everyone on our own development team, building this project gave us a platform to expand our own technical skills and collaborate with students from different disciplines and backgrounds (computer scientists, political theorists, statisticians, artists, you name it). Over the course of the Fall Quarter, we were able to deliver a project to the Chicago Tool Library which we hope will build both community and opportunities for growth in Chicago, and that’s something we’re truly proud of. Regardless of the potential scale of its impact, we’re confident that our project is helping the Chicago Tool Library pursue its commitment to equity by providing all makers throughout Chicago with the resources they need to follow their creative passions.

This project couldn’t have been possible without all of the amazing developers and designers who worked on it:

Project Leaders: Dylan Jones (MS, Computer Science) and Eugene Meng (MS, Computer Science)

Project Members: Elsa Athiley (College ’23, Computer Science), Chris Brown (MS, Computer Science), Cole Bryant (MS, Computer Science), Evan Cholerton (College ‘24), Pratham Gandhi (College ’24, Computer Science and Economics), Meena Rakasi (College ’24, Public Policy and Statistics), Adam Rivkin (College ’21, Computer Science), Charmaine Runes (MS, Computational Analysis and Public Policy), Frederick Zhu (MS, Computer Science)

Related posts:

The uniqueness of every project is in the new innovation it brings or an existing problem that it solves. It all about adding value and bringing about a postive change. This article is going to…

Tentu ada beragam alasan dan agenda yang membawa Anda ke dalam organisasi masyarakat sipil. Namun saya yakin bahwa semuanya bermuara ke satu tujuan: Anda ingin ikut membenahi Indonesia. Draf Dokumen…

Let me set the context first. I am only talking about hiring programmers and software engineers here. Imagine a world where you do not need a resume for getting hired. Wouldn’t that be great ! As a…