Redesigning an old parking map tool
2023
What were the problems?
iParkit was paying a costly monthly expense to use the Google Maps API for this tool.
The iParkit garage management team frequently accessed this tool from their phones, but it was difficult to navigate since the original tool was not responsive.
The old Live Occupancy UI was outdated and cluttered.
What were the solutions?
I created new PNGs of the maps to be used as static backgrounds so Interpark can stop using the Google Maps API.
I made the tool responsive for mobile devices.
I redesigned the UI elements to reduce clutter and modernize the look and feel of the tool.
New map UI
Old map UI
Looking at the old Occupancy maps
These maps were not responsive
All maps had a 1x1 aspect ratio, no matter which screen they were on. This example shows the unused whitespace to the right of the map when viewing on a modern monitor.
Cluttered pins
In order to view all of the pins without them overlapping, I had to zoom in pretty far. If you were to look at this map while zoomed out, the pins would overlap, and you wouldn’t be able to read all of the information.
Updated Map Drawings and Pin Styles
The old maps used the Google Maps API, which means iParkit was paying for these maps to be displayed. There was also a lot of useless information and functionality within the maps. The garage management team didn’t need to see each street name because they know where everything is, plus the pins have the garage names on them, which I was told is more than enough information.
For this project, I drew the maps in a simplified manner. This decluttered the UI and made it easier to read at a glance. Also, by using PNGs for the maps instead of Google Maps, Interpark no longer has to pay to use the Google Maps API, saving them a lot of money.
Redrawn map for Minneapolis, MN
Redrawn map for Savannah, GA
Pin variants for the developers
For the maps that are densely packed with garages, like the Chicago map, the pins still overlapped on the static maps. To solve this problem, I created variants of the pins that could be flipped upside down, allowing for more pins to be placed in close proximity.
Mobile Responsive Maps
Here’s a screenshot of the redesigned Live Occupancy tool in production on a mobile device.
A mobile responsive design was a top priority for this project since the garage management team always checked this tool on their phones. Plus, it was nice to bring this tool into the modern era.
Users can choose which city to view from the dropdown at the top of the screen, and there’s a carousel of garage cards at the bottom of the screen that carries the same functionality as it does on desktop. When a pin is selected, the carousel rotates to the corresponding card and highlights it.
Live Occupancy in Action
Check out this video of the newly redesigned Live Occupancy tool in production.
MY ROLE
Product Designer
THE TEAM
2 Product Designers
1 Product Owner
2 Developers
THE DELIVERABLES
Grayscale Wireframes
Hifi Prototypes
Screen Mocks
TOOLS USED
Figma
Adobe XD
Google Suite
THE COMPANIES
Steele Consulting Inc: My employer where I worked as Product Design consultant.
iParkit: A subsidiary of Interpark, iParkit owns and operates over 100 parking facilities across the US.
Redesigning an old parking map tool
2023
What were the problems?
iParkit was paying a costly monthly expense to use the Google Maps API for this tool.
The iParkit garage management team frequently accessed this tool from their phones, but it was difficult to navigate since the original tool was not responsive.
The old Live Occupancy UI was outdated and cluttered.
What were the solutions?
I created new PNGs of the maps to be used as static backgrounds so Interpark can stop using the Google Maps API.
I made the tool responsive for mobile devices.
I redesigned the UI elements to reduce clutter and modernize the look and feel of the tool.
New map UI
Old map UI
Looking at the old Occupancy maps
These maps were not responsive
All maps had a 1x1 aspect ratio, no matter which screen they were on. This example shows the unused whitespace to the right of the map when viewing on a modern monitor.
Cluttered pins
In order to view all of the pins without them overlapping, I had to zoom in pretty far. If you were to look at this map while zoomed out, the pins would overlap, and you wouldn’t be able to read all of the information.
Updated Map Drawings and Pin Styles
The old maps used the Google Maps API, which means iParkit was paying for these maps to be displayed. There was also a lot of useless information and functionality within the maps. The garage management team didn’t need to see each street name because they know where everything is, plus the pins have the garage names on them, which I was told is more than enough information.
For this project, I drew the maps in a simplified manner. This decluttered the UI and made it easier to read at a glance. Also, by using PNGs for the maps instead of Google Maps, Interpark no longer has to pay to use the Google Maps API, saving them a lot of money.
Redrawn map for Minneapolis, MN
Redrawn map for Savannah, GA
Pin variants for the developers
For the maps that are densely packed with garages, like the Chicago map, the pins still overlapped on the static maps. To solve this problem, I created variants of the pins that could be flipped upside down, allowing for more pins to be placed in close proximity.
Mobile Responsive Maps
Here’s a screenshot of the redesigned Live Occupancy tool in production on a mobile device.
A mobile responsive design was a top priority for this project since the garage management team always checked this tool on their phones. Plus, it was nice to bring this tool into the modern era.
Users can choose which city to view from the dropdown at the top of the screen, and there’s a carousel of garage cards at the bottom of the screen that carries the same functionality as it does on desktop. When a pin is selected, the carousel rotates to the corresponding card and highlights it.
Live Occupancy in Action
Check out this video of the newly redesigned Live Occupancy tool in production.
MY ROLE
Product Designer
THE TEAM
2 Product Designers
1 Product Owner
2 Developers
THE DELIVERABLES
Grayscale Wireframes
Hifi Prototypes
Screen Mocks
TOOLS USED
Figma
Adobe XD
Google Suite
THE COMPANIES
Steele Consulting Inc: My employer where I worked as Product Design consultant.
iParkit: A subsidiary of Interpark, iParkit owns and operates over 100 parking facilities across the US.
Want to say hi?
Send me an email or reach out on LinkedIn
colddahlman@gmail.com
© Connor Dahlman, 2024
Want to say hi?
Send me an email or reach out on LinkedIn
colddahlman@gmail.com
© Connor Dahlman, 2024
Want to say hi?
Send me an email or reach out on LinkedIn
colddahlman@gmail.com
© Connor Dahlman, 2024
Work
About
My other work
Redesigning an old parking map tool
2023
What were the problems?
iParkit was paying a costly monthly expense to use the Google Maps API for this tool.
The iParkit garage management team frequently accessed this tool from their phones, but it was difficult to navigate since the original tool was not responsive.
The old Live Occupancy UI was outdated and cluttered.
What were the solutions?
I created new PNGs of the maps to be used as static backgrounds so iParkit can stop paying for the Google Maps API.
I made the tool responsive for mobile devices.
I redesigned the UI elements to reduce clutter and modernize the look and feel of the tool.
Old map UI
New map UI
MY ROLE
Product Designer
THE TEAM
2 Product Designers
1 Product Owner
2 Developers
THE DELIVERABLES
Grayscale Wireframes
Hifi Prototypes
Screen Mocks
TOOLS USED
Figma
Adobe XD
Google Suite
THE COMPANIES
Steele Consulting Inc: My employer where I worked as Product Design consultant.
iParkit: A subsidiary of Interpark, iParkit owns and operates over 100 parking facilities across the US.
Looking at the old Occupancy maps
These maps were not responsive
All maps had a 1x1 aspect ratio, no matter which screen they were on. This example shows the unused whitespace to the right of the map when viewing on a modern monitor.
Cluttered pins
In order to view all of the pins without them overlapping, I had to zoom in pretty far. If you were to look at this map while zoomed out, the pins would overlap, and you wouldn’t be able to read all of the information.
Updated Map Drawings and Pin Styles
The old maps used the Google Maps API, which means iParkit was paying for these maps to be displayed. There was also a lot of useless information and functionality within the maps. The garage management team didn’t need to see each street name because they know where everything is, plus the pins have the garage names on them, which I was told is more than enough information.
For this project, I drew the maps in a simplified manner. This decluttered the UI and made it easier to read at a glance. Also, by using PNGs for the maps instead of Google Maps, Interpark no longer has to pay to use the Google Maps API, saving them a lot of money.
Redrawn map for Minneapolis, MN
Redrawn map for Savannah, GA
Pin variants for the developers
For the maps that are densely packed with garages, like the Chicago map, the pins still overlapped on the static maps. To solve this problem, I created variants of the pins that could be flipped upside down, allowing for more pins to be placed in close proximity.
Mobile Responsive Maps
Here’s a screenshot of the redesigned Live Occupancy tool in production on a mobile device.
A mobile responsive design was a top priority for this project since the garage management team always checked this tool on their phones. Plus, it was nice to bring this tool into the modern era.
Users can choose which city to view from the dropdown at the top of the screen, and there’s a carousel of garage cards at the bottom of the screen that carries the same functionality as it does on desktop. When a pin is selected, the carousel rotates to the corresponding card and highlights it.
Live Occupancy in Action
Check out this video of the newly redesigned Live Occupancy tool in production.