Back

UNSOLICITED REDESIGN

Streamlining the parking reservation experience

COMPANY

SpotHero

ROLE

UX Designer

EXPERTISE

UX/UI Design

DURATION

Oct - Nov 2023

Overview

The goal of this project was pretty straightforward: choose an app that I frequently use and explore how I can push my design skills to enhance it. For this, I chose SpotHero.

SpotHero is a parking reservation service that helps users find and book parking spots. Through its app or website, you can search for available parking spaces, compare prices, and secure a spot in advance, making parking easy and often more affordable. Many users appreciate the convenience it offers, particularly in busy urban areas where parking can be challenging.

I’ve used SpotHero frequently for events like concerts and sports games. Although my overall experience with the app has been positive, I wanted to explore ways to make it even better.

Disclaimer: This is a conceptual, unsolicited redesign and I am not affiliated with SpotHero in any way. This work focuses solely on UX, and my opinions and suggestions are entirely my own and do not reflect the views of SpotHero.

Discovery

As I began exploring the app, a few things stood out to me.

Reviews

When reserving a parking spot through the SpotHero app or website, users can view the rating for each spot, with a maximum rating of 5 stars. However, while the overall rating for each spot is visible, individual customer reviews are not currently accessible.

This image illustrates how reviews are currently displayed on the app.

Saving Parking Spots

A common question when browsing the app might be, "Can I save a parking spot?" The answer is—sort of. If you use SpotHero for work, you can save your work address as a saved place, which saves time by eliminating the need to enter your work address each time you reserve a spot. However, if there's a specific parking garage you like to park in each morning, you can't save that individual garage to your favorites.

Currently, users can save addresses, but not individual parking spots.

Sort & Filter Options

It's crucial for users to be able to easily access sort and filter options when browsing. Otherwise, users may struggle to find parking spots that match their needs. While SpotHero currently offers sorting and filtering options for search results, the placement of these features could be better optimized. Additionally, adding a sort-by-rating feature would help users find the best spots more efficiently.

SpotHero allows users to sort by relevance, distance, and price.

Reviews

I began by redesigning the reviews section, breaking it down into several key components: the review title, rating, date, reviewer’s name, and description.

Review Title: A concise headline summarizing the reviewer's overall impression.
Rating: A star-based score reflecting the reviewer’s satisfaction.
Date of Review: The date the review was submitted, providing context on its recency.
Name of Reviewer: The name or alias of the person who submitted the review.
Review Description: A detailed account of the reviewer’s experience and feedback.

Here’s a redesigned look at how an individual customer review now appears:

Next, I decided to highlight the number of customers who rated the parking spot 5 stars, 4 stars, and so on. Including the overall rating and a CTA for adding a review would also be beneficial.

With this in mind, the following section was created:

Before

Previously, users couldn't access individual customer reviews for parking spots. Without this feature, they were unable to see feedback from real customers, which might include details not covered in the parking spot description.

After

By adding these components, I've created a comprehensive review section for the spot details page. This aims to provide users with valuable insights into each parking spot, help them weigh the pros and cons, and make more informed decisions. Ultimately, this should result in fewer dissatisfied customers.

Saving Parking Spots

As mentioned earlier, users currently cannot save or favorite individual parking spots. However, they can save frequently used addresses. On mobile, these saved places are located within the user's account settings.

For saving parking spots, I determined the best place to incorporate this feature is directly on the individual parking spot card. Given its current layout, a button allowing users to save spots can be positioned next to the existing "Book Now" button, making this a subtle yet useful addition.

Here's what saving a parking spot now looks like in action:

Before

Previously, users couldn't save individual parking spots to their favorites. While this feature isn't absolutely essential, it would be a nice quality-of-life improvement for both desktop and mobile users.

After

Users can now easily save frequently visited parking spots with a simple click. The feature is subtly integrated so it doesn't significantly alter the parking spot card's structure, yet remains visible and easily accessible.

It’s also crucial to provide a dedicated space for these newly saved spots. I chose to rename the "Saved Places" label in account settings to "Saved Locations." This tab now allows users to toggle between "Saved Places" (addresses) and "Saved Spots" (individual parking spots), consolidating all saved locations in one place.

Sort & Filter Options

The SpotHero app currently offers several interactive options on the Find Parking page, including quick access to the self-park filter, all filters, map/list view, and sort functions.

Self Park: Allows users to filter search results to show only self-parking options.
Filters: Provides access to a range of filtering options to refine search results.
Map/List View: Lets users switch between a map view and a list view of parking spots.
Sort: Enables users to organize search results based on criteria such as price or distance.

I noticed that the sort button was positioned differently from the other interactive options on the page. Additionally, the map/list view buttons could be made more prominent.

To address this, I designed a new component to be placed at the top of the Find Parking page. This new layout features a top row dedicated to frequently used filter options like parking type, location type, and amenities. Users can access additional filters by clicking the filters icon on the left.

Below the filters, I've enhanced the sort functionality. In list view, users can sort results or switch to map view. In map view, users can choose different map types or return to list view.

By moving the sort options to the same area as the filter and map/list view selections, all user actions are now consolidated in one central location.

Here's how this updated design looks in action:

I applied a similar organizational approach for filters on mobile to the desktop version. Users can quickly filter results by self-park, uncovered lot, or touchless options, while still having access to all filters through the filters icon.

In addition to showing the number of results on desktop, I also added the option to sort by rating. This feature allows users to easily find parking spots that best match their needs.

Final Design & Takeaways

If I were to further develop this project, I would explore:

Introducing different map types, such as satellite, light, dark, and street views
Adding a price range filter to help users refine their search within a specified budget
Enhancing customer support with a "report issue" feature

My main goal was to subtly enhance the SpotHero experience without significantly altering the app's structure.

As a designer, working within constraints—such as time, budget, or design limitations—is crucial. Hopefully, this project demonstrates how a few small adjustments can significantly improve the overall user experience.