Parkinn is a mobile app for city drivers looking to quickly and easily find a parking spot.
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.
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.
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 conditions where I am going
I need to claim temporary ownership of a parking spot
I need to know where I can park my car
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.”
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:
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.
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.
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:
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.
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.
We made a few tradeoffs to build this MVP, so possible future steps would be the following:
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.
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.
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.
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.
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.
