Background Context

Parking is a huge problem in major cities. Drivers spend an average of 17 hours a year searching for parking spots. The hunt adds up to an estimated $345 per driver in wasted time, fuel, and emissions.

SpotAngels is a community-based app that helps drivers find parking thanks to a live crowdsourced parking map. The app works by displaying a map with the location of all street parking spots, parking lots and garages. It helps drivers find free and cheap parking, comply with the rules and avoid tickets.

In 2018, the app was featured by Apple and Google as “Waze for Parking” among the best apps.

My Role

Wireframing, User Experience Design, Interaction Design. Tools: Figma, Principle, Mapbox Studio.

How to design a parking map?

Design a parking map to display parking information users need. Users have to be able to find free and cheap parking, filter the map by preference and locate their car.

Before I joined the company, a pin was displayed in the center of the screen. You had to move the pin and press a park button to get the parking rules. We needed to design a real map experience.

Proof of concept

When you design a map, it’s important to interact with a prototype as soon as possible: playing with something tangible, more advanced than static artboard screens, is always better. You should be able to zoom, scroll, tap icons to have a feel on how the product works.

My goal was to design an initial map as fast as possible in order to test it with users, spot weaknesses early and iterate. For that, I used Mapbox Studio. Using iconography, colors, typography, and shapes, I built the first version of our map.

1. Use the map to find the right spot

“I parked my car in a super expensive area: $7.25 per hour. While walking to my destination, I found out that I could have parked my car for free and save money!”

We could display different types of spots in various colors to help people identify quickly their best parking option.

A traffic map

In our prototype, we used green to represent a free of charge spot, orange a time limit spot, red a no parking spot, and blue a meter. When some users saw the map for the first time, they instantly thought it was representing traffic, not parking. Others mistook the colors for occupancy: green for “open”, orange for “might be open” and red for “occupied”.

Solution: Color is for price. We use green when free of charge and blue when the driver has to pay. We never use red. We use grey dots to indicate there are no parking spots. Without green-orange-red colors, it didn’t look like a traffic map anymore.

Free spots

When a parking spot is free of charge, we displayed it on the map in green with a label “Free”. Some users thought that a free spot meant an open spot, not a free of charge spot.

Solution: We never display “Free” for a spot. Instead, we display the max legal parking duration (e.g. 2 days and 16h).

Make the street tapable

Users tapped on the icons but not necessarily on the streets. Because of the density of the map, we couldn’t always display an icon on each street.

Solution: We reduced the icon size to make sure that each street had its own icon.

No data

SpotAngels is 100% crowdsourced. Some users found out about us in areas where we didn’t have coverage yet. They just landed on an empty map with no parking rules, thinking the app didn’t work.

Solution: We added a border and a city icon to the zones where we had coverage to help users differentiate covered versus non-covered areas.

Zoom in/zoom out

When users zoomed-out, the map felt overwhelming and they could not see any parking rules.

Solution: Good design is always about context. We came up with a logic to display just what the user needs on each zoom level.

2. Make the map mine

“I circled around blocks for a very long time and arrived twenty minutes late to an appointment. If I could have had an idea of the parking situation beforehand, I would never have taken my car.”

We could add filters in the app. Users would be able to know the parking situation at a specific time and for a specific duration.

Find the filter menu

The filter button was sitting in the top right corner and a lot of users missed it.

Solution: We displayed all filters in bubbles below the search bar to make the feature more discoverable.

Filter the map

When some users saved filters, they felt like nothing changed because the map remained the same.

Solution: We displayed filtered parking rules in grey to make it easier to understand which spot was filtered and which one was not.

Filters activated

Some users could not remember if filters were set or on default.

Solution: When a user applied filters, their corresponding button is styled in blue.

3. Locate my car and avoid parking tickets

“I parked my car in a city I was visiting and I could not remember where. I had to map by hand the streets I had visited, explore them one by one to finally find my car, 6 hours later…”

People often forget their car location. We could let them park their car in the app and always display their car location. If we know their car location, we can provide parking duration and alert them when it’s time to move their car.

How long can I park?

We were only displaying parking rules (e.g. street cleaning 10:00 AM), but users had to calculate themselves how long they could stay.

Solution: We updated our wording to let them know exactly how long they could park, and displayed a countdown.

How do I go back to my car?

They might have forgotten the exact location or are unsure of which direction they can take to get back to their car.

Solution: On tap on the car’s location, indicated by a little car sign on the map, we displayed a “Get direction” button that would trigger the best itinerary.

When should I leave?

We sent notifications 30 minutes before the expired duration, but it was sometimes too late.

Solution: We let users personalize their notifications. They could be alerted the day after, one hour before, or even add alerts to their calendar.

Getting notifications

Sometimes users’ notifications were turned off. They could not receive a parking alert and therefore would get a parking ticket.

Solution: We also sent an email to alert users when it was time to move their car.

Conclusion

The map is the center of the SpotAngels experience. It was essential to design a map that can provide all parking information in a clear, live and accurate way.

Even if the map is still in progress because we always iterate on it, we designed strong foundations and built the first step of a live parking map. Our mission is to help people find parking. We have to guide them through the city but also through the parking rules. Our map’s job is to provide the best parking information and make it accessible to everyone.

One of our best rewards that year was to be featured three times by Apple and one time by Google. We were very proud of it, but we all think that it is only the beginning of the journey.

This entire work was advised by Jonah Jones, our design mentor at SpotAngels. I would like to thank the amazing team who works very hard to build the product they love.