San Francisco Parking Solution

UI Design, Interaction Design
We know the frustration looking for a parking spot: complicated road conditions and confusing street signs are the last thing wanted on a busy day.

In San Francisco, a major city with world-renowned traffic flow, drivers need to follow complicated parking rules. For the course INF 2191: UI design, I designed an accessible solution for drivers in SF to save time, and money when they need a parking spot.
Team
Time
Tools
Methodology
Solo project
40 hours

March 15, 2021 ~
March 22, 2021
Figma
Prototyping
The Challenge
To park a car on the street in San Francisco, there are 3 things the driver needs to check: curb color, meter color, and  street cleaning schedule. If we evaluate it from a designer's perspective, there are various invisible challenges in this journey.
  • Accessibility issues: the road curbs and meters use colour codes to indicate parking type and time limit.
    Violated: inclusive design
  • Uncertainties: drivers need to look for street signs of schedules to find one matching their needs in complex physical environment.
    Violated: visibility of system status, error prevention
  • Limited information: parking meters are hard to locate on maps, and drivers need to physically check for space availability.
    Violated: match between system and real world, flexibility and efficiency of use
  • After parking, drivers need to keep a mental note of the parking time, otherwise they may get towed or fined.
    Violated: visibility of system status, error prevention
  • Overall, the multitasking process for driving while looking for a space, often through a mobile app, is dangerous.
    Violated: match between system and real world, flexibility and efficiency of use
The Need
When many of us would rely on a mobile app to look for parking, existing parking products provide detailed information of paid parking lots but do not show affordable street parking options. Nor do they show how to get to street parking in consideration of the traffic situation around.

Because of these pain points, many users try to look for street parking on their own before searching on a product for paid parking. Inexperienced drivers new to the area can have inaccurate judgement of the situation. Unaware of potential risks, they may drive on the wrong direction of a one-way or park somewhere violating the rules. Beyond the waste of time and money, frequent accidents bring high cost to the traffic administration and maintenance regarding street cleaning and routes for emergency vehicles.

Drivers need a quick access to the parking information so that they can follow rules and find affordable parking without physically looking for it.

Starting from the usability issues listed above, we can see many barriers are caused by the mismatch between the system and the real world.
Ideation

Addressing the match between system and the real can address the usability problems finding a parking spot.
Parking needs can be met in two scenarios: finding immediate parking vs finding a parking spot around a destination. It is important to support both scenarios.

The users in the two scenarios are sorted on the first screen: the map.

Users looking for real-time parking can start browsing parking lots right away by pulling up the half-hidden cards.

Users who want to search for parking in another area will enter the address through the search bar and get a list of results around that area.
If no parking space is found, users can tap on search to modify it. The app also gives a quick access suggesting users to try street parking function.
Differentiator
Street parking
With the parking schedule of every street already stored in the app, a street parking checker can give accurate information of the parking rules. Even though most street parkings are free, this can be a quick-win function that only needs the GPS signal and parking map stored in the app.

The function supports the common spontaneous parking need. It identifies the device location  drivers can follow parking schedule without leaving the car.

It improves the accessibility for colorblind and motion-impaired users and supports an all-in-one parking experience through the app. There is less monetization involved as it typically leads to free street parking. But it would contribute to a convenient and holistic experience and help the users avoid high towing costs and help the stakeholder, the San Francisco Municipal Transportation Agency (SFMTA), keep street parking in order.

Technical Implementation

The app is integrated with the infrastructure of parking meters and kiosks that detects vacancy. It allows users to search for private and public parking spaces identified as being vacant. Users can check the details of a space and reserve it. Pre-stored photos of the parking area (uploaded by other users) help users locate the spot, and the location number assigned on the parking meter is displayed in the app to ensure parking at the correct spot.

During the onboarding, the app asks for a license plate and phone number for the first-time login. In this way, users can distinguish reservations for different vehicles by plate numbers and get notified from the app or via text message at a customized time before reservations expire.

User Flow
A storyboard visualizes the workflow around the 3 main tasks.
(Click to enlarge)