On design challenges, best-practices, and process.
For centuries, maps have helped us better understand our physical world. While static maps provide a snapshot of our surroundings, digital maps have revolutionized how we interact with them— from planning entire cities, finding a dinner reservation, or ordering a car home.
For product designers, creating these experiences presents challenges that are seldom faced in traditional interfaces. In this article, I’ll discuss mapping UX heuristics, how I creatively leverage data, and apply these concepts to an urban tech issue.
Maps are Dynamic
To fully understand a map’s complexity, one should think of it as a collection of responsive features:
A map’s foundation starts with its base map, which includes contextual signifiers such as roads, building footprints, and topography.On top of this are data layers, which are used to visualize any data that is linked to coordinates — this could be points, paths, boundaries, or heat maps.At the highest level are interactive overlays, such as map pins, tooltips, or annotations, which are used to facilitate user actions or clarify information.An example of a digital map and its parts
When exploring a digital map, users continuously pan, zoom, and rotate to alter its viewport, scale, and orientation. As they do so, the map and all of its features must adapt to ensure its information remains legible and relevant to the user.
Maps are Data-Driven
Digital maps can behave in a dynamic fashion because they are powered by data. When we use a map, data is both informing and responding to our actions to help us contextualize digital space.
When I zoom in on a coffee shop, I’ll want to see the name of the road it’s on and the nearest subway station. To see the name of the neighborhood it’s in, I’ll zoom back out. In general, the zoom level I use will vary if I’m searching for dinner in Manhattan or a gas station on an Arizona highway — and so will the information I expect to see.
As designers, the more we understand the dependencies between the underlying data and what is displayed to the user, the better user experience we can craft for them.
While tools like Figma have impressive capabilities, they still don’t accommodate the design needs of map-centric or data-heavy interfaces. Prototyping with code gives the designer more autonomy where design tools fall short. Development, therefore, does not have to wait until the design is complete, but can be part of the creative and iterative process.
Case study: vacant lots in St. Louis
I gave myself the challenge of visualizing lot vacancy in St. Louis, a place I lived for four years while in undergrad. Building off my urban design coursework, I decided to explore how a digital mapping app could address some of the city’s pain points.
The St. Louis Land Reutilization Authority (LRA) is a city-level government agency responsible for managing and repurposing abandoned properties. Lots without buildings on them are the most difficult for the LRA to upkeep — they make up over 90% of vacancies, have high maintenance costs due to vegetation growth, and are less likely to be acquired by individual homeowners.
Current vacant property re-ownership process in St. Louis
A major hindrance behind lot re-ownership isn’t knowing what lots are vacant but what to do with those lots to ensure they will be valued and used by the community.
Existing tools only work on desktop devices, are fairly technical, and facilitate lot ownership through the perspective of homeownership. While they do a great job of promoting awareness, the LRA needs a better mechanism to gather feedback from the local community and target parcels that are the most difficult for them to maintain.
St. Louis Vacancy Collaborative Map
Community engagement and co-design workshops are often in-person, resource-intensive, and directed towards a singular site. A mobile-first application would still encourage on-the-ground engagement but facilitate a wider reach and easier data collection.
Design Considerations
Before diving into a prototype, it’s important to frame what questions or hypotheses the prototype will test.
A controversial design convention I’ve noticed in mapping interfaces is allowing users to interact directly with data layers. While this might cause few issues on desktop computers, applying the same logic to mobile devices raises several accessibility concerns.
Polygon shapefiles, like those representing vacant lot parcels, often vary significantly in size. When users interact with them, they bias larger, easier-to-click features. Additionally, these features’ touch target sizes grow and shrink as the user zooms in and out on the map.
This issue is further compounded on mobile devices, where smaller screens and touch-based interactions make it even more challenging to ensure consistent and reliable results.
Using map pins creates consistency as the map changes
A solution to this, which we see on Google Maps and Instagram, is to have users interact with map pins on top of the data. These pins set better accessibility and data neutrality standards as they remain consistent regardless of feature size or zoom level.
Even with this approach, several questions remain:
How large should the pin size be?How should the parcel data look underneath it?How many pins should be shown on the map if there’s too much data?What pins/parcels get prioritized in the process?
Prototyping with Data
Before building my prototype, I found parcel data from the St. Louis Open Data Portal and simplified it in QGIS. I made sure to include the “land_area” and “vegetation_coverage” properties, as parcels with more open land are more expensive for the LRA to maintain. Additionally, I ran a simple spatial operation to extract centroid coordinates so I could add map pins directly on top of the parcels.
{
“type”:”FeatureCollection”,
“features”: [
{ “type”:”Feature”,
“geometry”:{“type”:”Polygon”,”coordinates”:[[],[],[],[]]},
“properties”:{
“vacant_parcel”:TRUE/FALSE,
“vegetation_coverage”:TRUE/FALSE,
“land_area”:##,
“centroid_xcoord”:##,
“centroid_ycoord”:##,
}
}
},
…
]}
I developed my prototype primarily using JavaScript, leveraging Mapbox GL JS for the base map, Deck.gl to render data layers, and some vanilla code to handle all other control widgets.
Given the large number of vacant lots in my dataset, my main focus was on information hierarchy and legibility. Large parcels with vegetation coverage should have greater visibility, as these parcels are more critical for the LRA to repurpose.
Sliders allowed me to adjust my layer properties and observe how they rendered in real-time. If collaborating with engineers, this would help inform the style parameters or responsive logic needed in their code.
Built prototype used to test design parameters
Ensuring that the prototype could be used and modified on a mobile device was crucial. This approach allowed me to verify that the scale, interactions, information density, and hierarchy all felt intuitive and comfortable on a smaller screen.
Prototype when used on a mobile device
Reflecting on Process
The challenges faced while designing map-centric experiences reinforce learnings that are applicable to any product design process:
As technology evolves, so will design standards.
Digital mapping is just one example of how user interfaces have expanded into new territories. Other spatially immersive technologies like augmented and virtual reality introduce entirely new interaction patterns, conventions, and challenges. When learning design standards, focus on understanding the “why” — this knowledge will remain relevant as technology continues to evolve.
Designers control their tools, not the other way around.
Like artists, designers should employ different tools tailored to specific tasks. Relying on a single piece of software for all our needs can limit our creative potential and autonomy. When working with data and dynamic content, prototyping through code might be the most effective approach. While having a variety of tools at your disposal is valuable, knowing when to stop using one for another is just as important.
Product design isn’t a template.
Product design is a relatively new field, with even its name emerging only a few years ago. While core methodologies are in place, designers from diverse backgrounds are constantly redefining our processes and value. If you’re anything like me, you entered this field because you love creating, iterating, and learning. Don’t feel constrained by what you think or are told product design should be.
Designing with maps and data: visualizing vacancy in St. Louis was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.
