Zoning Translator

A web app for cities to translate their convoluted zoning ordinances to machine- readable code.

 

Following the development of Vivacity's Property Portal, the company identified the need to build a tool to simplify the complicated process of translating a city’s zoning text. I designed and built a zoning translator based on the lessons from solving and performing QAQC to NYC’s zoning code.

Project Specs:

Duration: 4 months

Development Stage: In Production

Tools:

  • HTML, CSS

  • Javascript

  • React JS

Deliverables

Web App

Excel, JSON file

Roles

UX Research

UI Prototype

UI Design

Product Manager

Overview

We built the Zoning Translator tool to help cities translate their zoning ordinance into machine-readable code. The tool supports multiple users with different roles, including admin, translator, and reviewer views. It also needed a method to track and approve changes and associate them with the original zoning chapters.

The web app outputs the translated text to a JSON file and an Excel file that cities could use to populate the data for their city’s ArcGIS Urban app.

Problems

Cities that want to convert their zoning ordinance into machine-readable need a tool to help them perform the task and keep track of changes and approvals. Zoning code has semi-standard terminology and is written in legalese, making translating a cognitive burden on the people doing the job. If the city wants to use a tool like ArcGIS Urban or Rhino, these programs ask users to provide the data as an Excel sheet, making translating even more complex and challenging.

1. Zoning text is hard to translate due to its legalese structure. 

2. Using Excel as a tool is painful and does not allow tracking, approving, or discussing changes.

3. Modern planning software expects zoning data to be represented in specific schemas that cannot be captured in an Excel sheet.

Solution

I designed the Zoning Translator to import web-hosted zoning text and provide an intuitive and easy way for city officials and Vivacity’s translator team to turn their zoning into machine-readable code.

1. Provide a simple form per zoning section to capture the values that drive the form-making aspects of zoning. Make the form flexible to adapt to different city nomenclature

2. Create a web app that can keep track of users, translation status, and chat discussions

3. Create an easy way to export the data capture into the expected output formats

Research & Development

I leveraged our experience of converting NYC’s zoning data for the design. Most pain points came from first-hand experience from the Vivacity team trying to translate zoning using an Excel spreadsheet.

I also asked Boston Planning Development Agency (BPDA) members what their major pain points were uploading zoning text to ArcGIS Urban and ArcGIS Pro; this helped me understand how to organize a Quality Control and Quality Assurance process before the data was exported to these platforms. 

The most significant finding of interviewing the BPDA was that they found it hard to translate all the conditional complexities of their zoning code into an Excel spreadsheet.

Municode

Most cities host their zoning ordinance through the web app Municode. Navigating the app to translate the text into machine-readable code is a challenge.

Dashboard Statistics

Excell was not a tool built for summarizing the state of translations and keeping track of progress.

Conditional Variations

Organizing variations of the same zone but in different conditions was impossible in Excel. This method created false entries, and it took a lot of work to track what values belonged to what conditions.

Organizing Zoning Text in Excel

Organizing the zoning text in Excel was not viable since the zoning text had a document structure that did not fit the cell and column organization method.

ArcGIS Urban Upload Method

One main complaint in discussions with the BPDA was the difficulty uploading their machine-readable code to ArcGIS Urban. No tool bridges a city’s zoning ordinance to ArcGIS Urban.

We confirmed this pain point by informally interviewing other cities at Esri’s Developer Conference.

Design

The app was designed based on Vivacity’s experience translating zoning text for New York City.

I first sketched the idea on paper to have the overall picture clear. 

I later developed digital sketches with a better idea of how the app would be organized, knowing that we would use Material UI for most components.

I supervised the Front End development team to deploy in 2 months rapidly. We tested internally and deployed a production version for the Boston Planning and Development Agency.

Sketch Ideas

The idea for the design of the translator came during an in-person meeting at Vivacity, where we discussed how we would revamp the process of translating NYC’s zoning code. 

The sketch captures the simple idea of a SaaS app that tracks translation status per zoning article and allows that status to change based on user changes.

Translator Sketch Idea

Sketch capturing what a SaaS translation system could look like.

Prototype

I translated my rough idea on my sketchbook and iPad to Adobe XD file.

I tested the design with the small team at Vivacity. The tests revealed the app did not allow users to understand the summarized value of each translation.

The idea needed to be refined and further worked out. I went back to the drawing board.

Design Revision

I returned to the sketch board with a better idea of what was needed to reorganize the content being generated by the translators and reviewed.

The sketches already had a rough representation of the components I wanted to use from Material UI. It was necessary at this stage to stay aware of the details and concentrate on whether the sketch idea fulfilled the request made by the users who tested the previous version.

To validate, I did one-on-one meetings with the small group of testers and used the sketch to communicate my ideas about reorganizing the app’s design.

Template design for translator.

Home Tab design with summary statistics of translations

Translations tab with a table that can filtering status, translators, reviewers, articles and districts.

Districts Tab with cards that summarize values and status per district

Zoning Code Tab with the content copied from the city’s municode website.

High Resolution Design in Production

I refined the final version in Adobe XD. I added a sign-in page with authentication for security purposes. The landing page and the logo for the website would follow each city’s brand.

Login for the BPDA Translator

Summary View of Translations

Translation Tab with different acceptance status.

Detail view of a translation.

Detail view of a translation commentary.

BPDA’s municode website copied to the SaaS app.

Output

The Zoning Translator’s Districts Tab organized the machine-readable code into cards that a reviewer could review. These cards helped the reviewers and translators understand the high-level status of approval and zoning articles.

The Push to ArcGIS Urban button allowed users to export the output to a JSON or an Excel sheet. All status and last update dates were saved and form part of the payload.

Production App

Summary

 

Vivacity launched the Zoning Translator app in three months. The app helped Boston translate 95% of their zoning into machine-readable code. Our first client was the BPDA.

Lessons:

  1. Leverage expert knowledge of how a process works. These insights can help you move fast in the design and execution process.

  2. Use existing design frameworks and components if the design allows it.