You are in the city with your car and looking to do what people in cities like - drink bottomless mimosas at brunch, claim your spot online for the latest Supreme drop, or meet up with your friends for dinner at a Food Network-featured Michelin-star restaurant. Before you can enjoy any of these activities, you have to find parking.

Our survey of city drivers demonstrated that 77% need help finding parking quickly. Finding a spot can take anywhere from 5 to upward of 49 minutes.

Research Insights

User Pain Points/ Opportunities

To see a visual representation of our process, please see our figjam.

By tapping into our networks, we surveyed 12 participants and, subsequently, interviewed 3 of the participants. From the survey results, we discovered four high-level pain points that we frame as opportunities in the problem space of parking for city drivers.

I need to find parking in high-traffic areas
I need to find parking when I am out to have fun
I need parking for life admin activities
I need to know the parking rules

During the review of the survey results, we identified many pain points. We decided to focus on a specific one - I need to find parking downtown. From this point forward, we identified 3 survey participants and interviewed them to elaborate on their challenges finding parking downtown. These interview revealed the following painpoints in this area.

I need to know the rules when I park

I need to know the parking rules
I need to know when to move my car so I don’t get a ticket

I need to know the parking conditions where I am going

I need to know the estimated time to find parking in the area, so I know if I should look elsewhere.
I need to know how competitive the search for parking is at my intended destination based on the time of day.
I need to know how long it will take to walk to my intended location after I park.

I need to claim temporary ownership of a parking spot

I need to claim a parking spot when I was first to arrive without honking.

I need to know where I can park my car

I need to know when people are leaving their spots
I need to know where I can find parking near my location

When looking for parking, I need to know if moving my car from my location is a good idea.
I need to know if waiting for parking is worthwhile or if I should look for another spot.
I need to know where there are open spots in case there is no availability in my current location.
I need to be close to my intended location, especially in particular weather conditions.

Ultimately, we addressed the sub-pain point: “I need to know where there are open spots in case there is no availability in my current location.”

Solution Explanation

Based on our target users’ pain points, we identified four user stories to address but ultimately zeroed in on two. Those stories are the following:

As a city driver, I want to know where parking spots are closest to me so that I can avoid driving around in circles.
As a city driver, I want to easily navigate to the spot without getting lost and minimize the possibility of losing out on a parking spot.

Armed with these two user stories, we dreamt up Parkinn, which uses localized parking meter data to identify available parking meter spots near the driver in San Francisco. Once the city driver selects a place to park, they choose it location and press start, which navigates them directly to the spot.

Lofi & Hifi Mockups

Iterative Design Learnings: We learned that their feedback was overwhelmingly positive. Many users expressed excitement about our new features, noting that they effectively addressed their specific pain points. They found the design intuitive and user-friendly, praising its ease of navigation and clear visual hierarchy.

However, we also discovered a few areas where improvements were needed. Some users mentioned that specific interactions were less responsive than expected, causing minor frustration. Additionally, a small subset of users suggested additional customization options to tailor the experience to their preferences.

The user feedback reinforced our confidence in the prototype's direction and validated our improvements based on previous iterations.

Technical implementation

Where is it hosted?

Frontend: The front-end, on the other hand, is hosted on Cloudflare Pages (https://parkinn-frontend.pages.dev/), as it offers a free hosting plan with efficient deployment and includes valuable features such as text compression, minification of HTML, CSS, and JavaScript, automatic SSL certification, and clean URL structures.

Backend API: Azure

What is your tech stack?

Frontend: The front end of the application is developed utilizing React and Tailwind CSS, both of which bring numerous benefits. React, as a widely-used JavaScript library for creating user interfaces, is appreciated for its component-based flexibility and reusability, making it simpler for developers to keep the codebase organized and scalable. Furthermore, React's ability to efficiently update and render components results in a seamless user experience.

Meanwhile, Tailwind CSS is a utility-focused CSS framework that provides a comprehensive set of pre-designed CSS classes for constructing custom designs with ease. It has a low-level API for styling, allowing developers to create intricate designs with minimal custom CSS, making it easier to implement and maintain a consistent design language.

Additionally, the front end is designed as a Progressive Web App (PWA) with a responsive and mobile-friendly user interface, ensuring that the app is accessible and usable on a variety of devices and screen sizes.

Backend:

ASP.NET Core (Web API): The API Backend is responsible for handling HTTP requests from the frontend, querying the datasets for data, and returning the requested data to the frontend in the form of JSON responses. C# is a .NET programming language used to write the backend logic of our application.

The API has three endpoints:

GET /parking-meters - returns all parking meters.
GET /parking-meters/{meterPostId}/rate-schedules - returns rate schedules of a parking meter.
GET /parking-meters/close-to-user - returns parking meters within a specified distance from the user.

High level journey of a request

The high-level journey of a request in the web app starts with the user accessing the front end, which is built using React and Tailwind CSS. The user interface is designed to be responsive and mobile-friendly, providing an optimal experience across various devices and screen sizes.

When the user makes a request, it is processed by the back-end, which is hosted on Azure. The backend retrieves the necessary data and returns a response to the front end.

Once the request is processed, the response is displayed on the front end, and necessary updates are made to the user interface. The journey ends with the user receiving a seamless and personalized experience, making it easy to access the information and functionality they need.

Technical challenges

What was the hardest part of development?

Front-end: It was hard to implement the map and navigation in the app because this was my first time building an app using maps and calculating the time and distance from a location to another specific location

Back-end: Getting real-time data of parking meter occupancy was a major challenge during development.

Does your app have any scaling issues?

The dataset depends on the San Francisco Data API, powered by Socrata. Therefore, any issues or downtime with the API can directly impact our app's performance.

What are some key takeaways?

Front-end: Learning may initially appear challenging, yet as we immerse ourselves in the process of exploring new concepts and acquiring new skills, our goals become increasingly clear. Over time, this journey not only expands our knowledge, but also brings us immense satisfaction and joy.

Back-end: By investing time in research, you can ensure that you're building the right solution from the start, saving time and resources and creating a better end-user experience.

Future Steps

We made a few tradeoffs to build this MVP, so possible future steps would be the following:

Continue with customer interviews to iterate the product
Expand the app beyond its use case of only metered parking spots.

Creating a three-sided platform of city drivers who are parking, city drivers who are leaving their parking spots, on-the-street parking, and owners of parking spaces (i.e. businesses, parking lots, and parking garages)

Buildout basic functionality like Account pages and relevant subpages
Buildout real-time directions to the parking spot based on the city driver’s progress toward their location

‍

‍

Learnings

Product Manager Learnings:

Muhammad Djata

I learned what it takes to build a product from idea to MVP. It takes validating a JTBD with your ideal customer, using their feedback to understand their pain points, and generating an idea to alleviate them. Once you have the idea, you work with your team to build a product that meets the user's goals via user stories. I also learned it’s essential to confirm understanding to ensure the team is on the same page.

‍

Designer Learnings:

Sanah Ahmad

Being in alignment with the team, and understanding and respecting their perspectives and contributions, is essential to creating cohesive and successful products.

Designer-developer pass-off is important. Front-end developers need to understand the design vision to create a better product. Communication and early involvement help achieve this and contribute to developer growth.

Developer Learnings:

Ismail Courr

I’ve learned the importance of putting yourself in the shoes of your potential users/customers when building a product. By doing so, you will undoubtedly gain a profound understanding of their needs and wants, which can be used to create a product that truly resonates with them.

Developers Learnings:

Zadok Joshua

&

As a developer, this project has provided numerous opportunities for growth and learning. I have had the privilege of working with a diverse team, giving me a unique perspective on the project and its workflow. This experience taught me a deeper understanding of web technologies and the product and software development life cycle.

Furthermore, this project has emphasized the value of teamwork, communication, and adaptability. Collaboration has taught me the importance of working effectively with others and the ability to adjust to changing circumstances.

Overall, I am grateful for this experience and the many skills I have gained from it.

Full Team Learning

As a team, we learned to navigate different team members' circumstances to complete our application goal. These other circumstances meant pushing meetings or having meetings without one of us not being present and getting them up to speed async.