SpotGenius is vision-AI technology that acts as “your eyes in the parking lot”, giving operators real-time, spot-level parking data and analytics. As the company's first UX designer, I redesigned how that data is shown on the map, from open-air lots to multi-level garages.
As a car enters, a fixed LPR camera captures its plate, make, model and color and relays it to the SpotGenius system instantly.
AI detects each car in its spot
Computer vision identifies each vehicle, pinpoints the exact spot it parked in and records details about the car.
Payments, reservations and permits
Paid transient and monthly/permit parking, with reservation capabilities, integrated into the same system.
Violation enforcement and alerts
Handheld enforcement
SMS and email alerts
Ticket by mail
Text with a link to pay (scofflaw)
Problem
How do you show a multi-level parking structure on Google Maps without GPS coordinates?
Open lots on the DigiMap are overlaid on Google Maps, with each spot placed precisely using GPS. Indoors, GPS can't reliably locate a spot, and stacked floors share the same footprint on the map.
The constraint was to stay visually consistent with Google Maps. The opportunity was that opacity and layering gave us room to play.
Decision
Pick a floor, don't stack them
Every floor of a garage shares the same footprint on the map, so drawing them all at once hides the one you need.
Stack floors on the map
Every floor at once; none of them readable.
Level selectorChosen
Elevator-style buttons: one floor at a time.
Why: Operators think in floors, like pressing an elevator button. Showing one level at a time keeps the map consistent with Google Maps and puts availability per floor one tap away.
A progress bar shows overall availability for the structure, so drivers and operators can decide before going in.
Proposed solution
Inside a multi-level structure
Multi-level structures needed new controls. Once inside a building, users need to pick which floor they're looking at and move between floors easily.
The level selector shows alerts on each level in real time.
A grid of levels helps users decide which level to enter.
Responsiveness
Mobile: consolidated controls at the bottom
On mobile, controls move into a single bottom bar. Operators can toggle between the grid view and the map view, and the bar adapts when switching between standard and multi-level lots.
“Park My Car” stays at the top: it only appears conditionally and it saves an action, so it shouldn't be buried with the other controls.
Operator: level selector with grid/map toggle
End user: adaptive bottom bar
Glance bar
Redesigning the glance-bar stats
The product had been built entirely by engineers. The old glance bar gave the stats very little context, and its floating icons made it feel ungrounded.
I redesigned each stat with an icon, supporting text (such as “180 spots” or “last 2 hours”) and room for longer numbers, and added comparisons like dwell time versus last week.
On mobile, stats scroll horizontally in order of importance.
Zones
Zones and zone types
A zone is an area inside a lot's property line that's designated for parking. Different zones needed different visual treatments:
Car-counting zones track the total number of vehicles in an area rather than individual spots, using the camera's field of view as a region of interest (ROI). Pickup and drop-off zones cover areas where vehicles stop briefly, such as for double parking.
Exploration
Selected design
Level switching
Switching between levels
Users needed to move between floors without backing out and choosing again. The web controls were modeled on elevator buttons.
Web level switcher
Mobile level switcher
Reflection
My time at SpotGenius
As SpotGenius's sole UX designer I presented my work at board meetings, design reviews, to developers and in front of our users. I designed new features and helped them grow over time. It showed me how much fun it is to build software with people who love software and value good design.
Password protected