Custom Area -
Map Drawing Tool Integration

The problem

Customers were initially limited to using lists of Zip Codes (which fit into existing workflow) to create a geographic market of interest. Next, we built in travel time-based shapes for ways to segment the map (and data) as an Area. Eventually, the request to allow custom drawn shapes became paramount, as we had built in more layers of data, leaving the users desiring to be more precise in their market analysis.

1 Flow

Initially, we mapped out how a drawing tool might work with our tool. There are a lot of complexities due to an ordered workflow that had to be taken into consideration.

4 Sharing

One important consideration was to plan how a shape may be a created, saved and shared asset across our team schema.

2 Tools

As we worked through how this might integrate, we explored some pre-built tools that could integrate easily with our Mapbox integration. Mapbox has its own custom draw tool, but we wanted to explore how much customization may be needed to make it work.

5 Hi Fi Prototype

To provide developers with specifications, as well as validate this feature I created a simple prototype in Figma using components from our Design System. A goal was to use little documentation and iterate upon implementation as needed.

3 Low Fi Prototype

Before deciding on actual colors and styles for the different draw modes, I created a clickable prototype to walk through different use cases to validate our flow document and discuss with customers.

6 Multiple Shapes

As we worked through the design and user research, it was clear that we would soon need to allow users to draw multiple shapes. This also meant they would need to be able to focus on one at a time to compare. We immediately began to explore the implications, while I tested colors on our 4 different map styles, with many variety of data visualizations.

Highlights

There were two main custom drawing tools we looked at; one from Leaflet and the other from Mapbox. Out of box, the Mapbox shape drawing tool works quickly. I liked the fact that the user didn’t need to “close” the shape. Only two clicks and a full polygon was ready to plot. Leaflet has a lot of presets out of box, but I felt them to be overwhelming especially while trying to fit it into our already-complex environment. We will reassess in our next round of user interviews.

We also took into consideration the fact that users may create multiple shapes as iterations, or to see how they overlap, or what assets may or may not be within or outside of a market area. We decided that in V1, any shape that becomes closed would receive auto numerical name so that they were easily distinguishable if the user created consecutive shapes, and that they would not have to take time to name them. They still have the option to edit the name, and delete a shape.

Iteration

This tool has been developed and implemented into our live application environment. We are currently assessing usage, receiving feedback for this tool, and understanding IRL how it shapes (hehe) our users’ ability to analyze custom markets.