How graphical prescriptions enable real estate developers understand building constraints

Company Buildrz

Project Date 2020

Role Lead Poduct Designer

Buildrz is an application that makes it easy for urban planners and real estate developers to understand the urban fabric and how the city's zoning and legal rules affect what can be built.

The Challenge

Urban regulations are oftentimes fraught with incomprehensible judicial jargon. These documents can be a tough read even for urban planners, more so for real estate developers, as rules and the interpretation of which may differ from each city. The primary aim of this project, therefore, is for developers to better understand the regulations in the city they are building in through a legible 2D map. This allows them to analyze the constraints and make building projections quicker.

The original design was overwhelming due to the lack of hierarchy (each prescription shown at once) and poor color contrast. It also didn’t have a solid identity that distinguished it from competitors. The objective then was to make the map legible while also keeping a distinct aesthetic look that exemplifies the product.

Product in a snapshot. Redesigned Buildrz home page where the map design is integrated in the application.

Research

The initial step was to understand how cities currently create these rules in zoning documents.

Figure 1. Zoning plan: Les Lilas

Figure 2. Zoning plan: Montreuil

As shown in Figures 1 and 2, there is no strict standard on visual encodings and its corresponding meaning. For example, zone demarcations is done through a color fill in Les Lilas (Figure 1) whereas the same information is encoded using a border in Montreuil (Figure 2). Les Lilas focuses more on differentiating the zoning while Montreuil considers zoning as a secondary information. A real estate developer who's interested in starting a project in either cities will find it difficult to understand these two documents, much more if a multi-city project is involved.

While no guidelines are available when designing these maps, there are some commonalities and patterns that city planners happen to abide by. For example, forest and natural areas are encoded in green.

The Process

As the sole product designer in the team, I was involved in the full development cycle – from discovery to delivery. As part of discovery, I had conversations with urban planners and with the CEO, who is an urban planner himself, to understand how urban rules work and how it is essential in real estate development. I had to go through each rule and structure in the most sensible way given the context. I also led the prototyping efforts, which involved getting my hands dirty on Leaflet.js and Geoserver. I then tested different solutions on the qualitative level by looking into aesthetic (look and feel), readability (contrast among styles), and relevance of rules shown.

Figure 3. This graph shows the number of prescriptions in each city. On the x-axis, the type of prescription (simplified with a code) and on the y-axis, the frequency of that prescription.

Solution

The map is conceived to help urban planners and real estate developers better understand building and city constraints through graphical prescriptions on the 2D map.

Figure 4. Map design integrated in the application

The primary pain point is the unreadability of graphical prescriptions that caused inefficiency in decision making and overwhelming users with immense information at once. This has been addressed in the following ways:

Each graphical prescription has a corresponding style. A style can be a color or a geometric property (line, circle, and so on). Prescriptions that have a similar relationship, indirectly or directly, are grouped in one color system. For example, parks and protected forest areas use green but with different shades, and sometimes, style.

The colors also work in harmony so that at each level, it is not confusing to distinguish among prescriptions.

The prescriptions are shown at varying zoom levels (see Table 1). Only prescriptions relevant at that level appear. For example, it makes sense to show areas where construction is not possible when the scale is closer to the parcel itself, instead of showing it from afar.

There is a prior technical constraint where these prescriptions cannot be enabled on or off on demand as they were not implemented as vector layers.

Table 1. This is the master file of the styles used showing a prescription on each row.

While there are no strict standard on the style set by French cities, it was still essential to consider these to remain consistent on urban planners’ mental model.

Conclusion

Overall, the resulting map was perceived as more legible in comparison with the previous implementation. It also has it own character that suits well with the product’s brand of simplicity and professionalism. There is work to be done on accessibility, however, such as combining different colors and having it contrasted enough to pass at least the AA standard on this regard.

On a personal note, I understood the complexities and challenges of cartography through this project as well as the issues both from a judicial and technical perspective.