ParkShark: Redesigning NYC’s Parking Nightmare
My Role: UX Designer | Duration: 2 Weeks | Project Status: Complete
OVERVIEW
“The early bird gets a parking spot and the next guy gets a ticket … that’s how it works for us unfortunately.” — Gary Cunningham
How many of you feel some type of way from that quote? Safe to say that we know it all too well when it comes to parking in the Big Apple — both the parking and ticket aspects. While there are tools and applications available for you to pay for street parking and garage parking, there are close to no platforms available for you to easily see which nearby parking spots are most accessible and reasonably priced based on the parking regulations for the day.
That’s why we would like to introduce you to ParkShark — a web based tool designed to make your life easier when looking for parking in New York City (NYC). ParkShark incorporates parking regulations as well as the parking signs to visibly show users which streets are open for parking at that exact instance, as well as to have visibility into the nearby garages based on the current location.
Now let’s walk through how we came up this idea and the design process behind ParkShark.
UX Process
For any good design, we know that it is crucial to conduct thorough research before jumping straight into the solution. In UX, this is often times referred to as the Double Diamond approach. The first diamond focuses on the Discover and Define stages of research and the second diamond focuses on the Design and Deliver stages of the solution.
In the research phase, we will want to speak to users directly to gather insights, patterns, and trends that can help us identify the goals and needs of these users. Ultimately, we will want to know:
- What is the problem we are trying to solve?
- Why do we need to solve for it?
- Who are the potential users? Who are the ones experiencing this problem?
- When does this problem happen?
- Where does this problem happen?
- How does this problem happen?
Answering these questions from what we can gather from the users will help us create a persona to represent the potential users for the solution.
For the designing of the solution, we need to ensure that we all sketch and think through a few ideas to see what will work best for the persona. Once decided, several iterations of the prototype will be created and tested via usability testing to ensure that the user flow is intuitive and creates a positive experience.
Initial Thoughts
To begin, we put ourselves in the drivers’ shoes and thought “well, if we were looking for parking in NYC, what are our expectations and preferences?” Then we documented our hypothesis, assumptions and initial problem statement as a starting point for research.
Hypothesis
Parking in NYC is challenging as there are limited street parking options available, many regulations that are confusing and the alternative options are expensive. Drivers need a more efficient method to help them find the cheapest available parking options.
Assumptions
- Users are frustrated with their current method of parking in NYC
- Users often get parking tickets because street signs are unreliable
- Users will usually commit up to 30 minutes to find street parking rather than paying to park in a garage
Initial Problem Statement
How might we help NYC drivers know where available parking is so they can avoid parking tickets?
RESEARCH PHASE
To gather insights, we knew that we had to conduct user interviews. However before we started, we wanted to ensure our participants were within our targeted audience, which are drivers who have experience driving and parking in NYC. Therefore, we used a screener survey to filter out those users.
Out of the screener survey results, we randomly chose five drivers for the interviews with the objectives to:
- Understand their parking habits
- Learn about their parking preferences in NYC
- Validate their need for additional tools for parking
Affinity Mapping
From the round of interviews, we gathered a good amount of insights to help us move forward in our process. We wanted to better organize the interview insights and see what were some of the commonalities shared across the participants. Therefore, we used an affinity map to visually lay out and group the observations and insights gathered per participant.
Using these groupings, we are able to further understand the main concerns for NYC drivers when it comes to parking and ultimately help us create a persona acting as the representation of the target audience to keep our team focused during the designing stages.
Some of the identified patterns and trends included:
- Users prefer parking spots that are close to their destinations
- Users waste a lot of time looking for parking and thus engage in desperate parking behaviors
- Users need clear and reliable street signs to avoid receiving tickets
- Users prefer the cheapest parking method
- Users prefer looking for street parking first before exploring the garage option
Persona
The persona we created for this project is Cathy. She is an elementary school teacher located in Harlem and she drives to work everyday from Queens. She struggles to find parking spaces each morning near her workplace as the school does not have a parking lot and the street parking signs nearby are often faded or outdated. On the days she is unlucky, she will have to park at a nearby garage for the day.
She is also engaged so she needs to be very conscious of her spending since she has an expensive wedding coming up.
To further learn about Cathy’s parking experience for work, we created a journey map to map out her morning commute.
Cathy’s journey showed that she would initially look for street parking as close to her work as possible. However, if street parking is difficult to find she will have to resort to paying for a parking garage so she can get to work on time.
Revised Problem Statement
With Cathy in mind, we revised the problem statement to consider her needs and to address her frustrations. Because Cathy wastes a lot of time looking for street parking near her workplace and almost always ends up overpaying for a spot at a parking garage anyways, the new problem statement is:
How might we help Cathy confidently save time and money when parking?
RESEARCH » DESIGN
Insights into Features
Based on the patterns and trends identified in the research phase, below were some of the potential features we explored with.
- Users prefer parking spots that are close to their destinations → Adding a search function that filters the results by destination
- Users need clear and reliable street signs to avoid receiving tickets → Including accurate and clear displays of street sign descriptions
- Users prefer the cheapest parking method → Including price ranges and any available coupons upfront for them to use
DESIGN PHASE
Features Analysis
As a result of our interview analysis, persona and journey map, we had many ideas on what to include in our design. To better organize and prioritize all the features we are coming up with, we used two methods to weigh each feature to consider whether they will be in scope. The two methods were to create a MoSCoW map and a feature prioritization matrix.
MoSCoW Map
The MoSCoW map allowed us to organize our ideas into the must haves, should haves, could haves and the won’t haves.
Feature Prioritization Matrix
The feature prioritization matrix allowed us to drill deeper into how essential the features are to the overall product with consideration with the allocated project resources, timelines and budget.
Design Studio
From the two methods, we were able to see clearly which were the most important features we need to include in the overall product. With the data synthesized from research and with Cathy in mind, the focus of the design was to create a web-based tool with a map as the main interface with visibility of street parking details and garages nearby.
The web-based tool, which we decided to name ParkShark, will allow users like Cathy to do the following:
- See recommendations for close by street and garage parkings
- See street parking details and reviews
- Find nearby garages with their lot details, reviews and available coupons
- Leave parking reviews for streets and/or garages
- Search by location
- Create an account to save user settings and add reviews
- See local alerts and advisories that will affect parking
Using a design studio for the mobile web design, our team sketched out our own ideas separately and then we came together to actively discuss which elements of the designs we liked so we can come up with a centralized design.
Mobile Web Mid-fidelity Wireframes
It did not take long before we moved the design from the whiteboard to our screens to build the mid-fidelity wireframes.
Some examples of the mid-fidelity screens below:
Link to Invision prototype:
Initial Round of Usability Testing for Mobile Web
In order to learn how easy our web tool was to use, we performed a round of usability testing. The round of testing was performed with five participants.
During each test, we walked them though what we were looking to test, observed and documented their movements and actions when completing each task. Then after the test we asked them questions to understand what their thoughts were on each task, how easy it was to complete, and what they liked and didn’t like about the design. We found this part very useful as it provided a deeper understanding on why they completed the task that way.
At the end of this round of testing, while most had a high success rate, there were a few areas for improvement. Some included:
- Green and Red Lines — Seems to have been the most confusing to the users as they were not aware that the lines were clickable to pull up the street details.
- Garage Pins— A few users were confused with the distinction between the two different “G” pins — one with a star and one without. The starred ones mean that there was a coupon available
To address the points above, our next steps is to add a legend to the map to provide information on what the icons and colors mean.
Mobile Web High-fidelity Mockup
Subsequently, the design was updated based on what we found in the initial round of usability testing and a high-fidelity prototype was created for further testing.
Some examples of the high-fidelity screens below:
Link to Invision prototype:
Click here to view the project `P2c Mobile HiFi`
This prototype brought to you by InVisionApp
invis.io
Desktop Web High-fidelity Mockup
Alongside with the mobile web high-fidelity mockup, we also created a high-fidelity mockup for the desktop web. Although it was not used for testing yet, we do plan to conduct testing once the mobile design is more finalized.
Some examples of the desktop web high-fidelity screens below:
Second Round of Usability Testing for Mobile Web
The goal for the second round of testing was to see if adding a legend will help the participants understand the design a bit better. We had hoped users would take advantage of the legend in order to minimize confusion by the icons on the map thereby decreasing the time needed to complete a task and also ensuring all tasks can be completed successfully.
Similar to the initial round of testing, we performed the second round of testing with another five participants. These are five new individuals that were not part of the first round of testing as this would help eliminate bias and provide us with new insight to the updated design.
Since we wanted to compare the results gathered from the first round of testing, we used the same usability testing guide to perform the second round. This would help us determine if the new changes we implemented are helpful to improve the results from the first round for those specific tasks. During each test, we walked them though what we were looking to test, observed and documented their movements and actions when completing each task. Then after the test we asked them questions to understand what their thoughts were on each task, how easy it was to complete, and what they liked and didn’t like about the feature. Again, we found this part very helpful as it provided a deeper understanding on why they completed the task that way.
While the overall results did improve from the initial round of testing, some of the areas for improvement remained the same. Some insights include:
- Green and Red Lines — Users were still a bit confused about the green and red lines in this round of testing too. Although we added a legend in the map as an icon, they did not immediately go in to use it.
- Garage Pins — Since the users did not go into the legend to learn what the colors and icons mean, some users were still confused with the distinction between the two “G” pins.
Overall, most participants found the website to be straightforward and something they can see themselves using for their regular parking needs.
Next Steps
In the future, we may want to experiment with using different colors to replace the green and red colored lines that represent street parking because some people already associate it with traffic. Another recommendation would be to add an animation that would prompt users to use the legend or have the legend showing on the bottom of the screen at all times. That way our users will not miss it.
Once that design iteration is complete, we will move forward to a third round of usability testing for our mobile website and fresh usability testing of our desktop website.
“Life is a journey, but don’t worry, you’ll find a parking spot at the end.” — Isaac Asimov
With ParkShark, we hope that each of our users will do as Isaac Asimov says and that they will all “find a parking spot at the end.”
