On design challenges, best-practices, andprocess.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 carhome.For product designers, creating these experiences presents challenges that are seldom faced in traditional interfaces. In this article, Ill discuss mapping UX heuristics, how I creatively leverage data, and apply these concepts to an urban techissue.Maps areDynamicTo fully understand a maps complexity, one should think of it as a collection of responsive features:A maps 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 coordinatesthis could be points, paths, boundaries, or heatmaps.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 itspartsWhen 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 theuser.Maps are Data-DrivenDigital 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 digitalspace.When I zoom in on a coffee shop, Ill want to see the name of the road its on and the nearest subway station. To see the name of the neighborhood its in, Ill zoom back out. In general, the zoom level I use will vary if Im searching for dinner in Manhattan or a gas station on an Arizona highwayand so will the information I expect tosee.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 forthem.While tools like Figma have impressive capabilities, they still dont 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.LouisI 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 citys painpoints.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 upkeepthey 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.LouisA major hindrance behind lot re-ownership isnt 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 MapCommunity 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 ConsiderationsBefore diving into a prototype, its important to frame what questions or hypotheses the prototype willtest.A controversial design convention Ive 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 themap.This issue is further compounded on mobile devices, where smaller screens and touch-based interactions make it even more challenging to ensure consistent and reliableresults.Using map pins creates consistency as the mapchangesA 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 zoomlevel.Even with this approach, several questions remain:How large should the pin sizebe?How should the parcel data look underneath it?How many pins should be shown on the map if theres too muchdata?What pins/parcels get prioritized in theprocess?Prototyping withDataBefore 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 theparcels.{ "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 controlwidgets.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 theircode.Built prototype used to test design parametersEnsuring 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 smallerscreen.Prototype when used on a mobiledeviceReflecting onProcessThe challenges faced while designing map-centric experiences reinforce learnings that are applicable to any product designprocess: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 whythis knowledge will remain relevant as technology continues toevolve.Designers control their tools, not the other wayaround.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 isnt 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 youre anything like me, you entered this field because you love creating, iterating, and learning. Dont feel constrained by what you think or are told product design shouldbe.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.