Parken App
Parking utility web app that reminds users to move their car for Alternate Side Parking (ASP) street sweeping. Designed using Shadcn UI Library.
Table of Contents
I. Discover.
User Needs
NYSDoT ASP API
II. Define.
User Flow
Technical Constraints
MVP Parameters
III. Design.
Brand Design
Shadcn, Wireframes
Hifi Mocks
User Problem: Alternate Side Parking (ASP) Street Cleaning
In major cities like New York, drivers who park on the street must move their cars for street cleaning on specific days at designated times. This presents two problems for drivers: 1) keeping track of where you last parked and 2) remembering when it’s time to move your car for street cleaning. Because few city drivers have access to garages or driveways, this can become a time-consuming and expensive problem—especially as parking tickets accumulate.
I. Discover:
What was I aiming to understand?
I wanted to understand the problems this user set faces and what resources already exist for them, so that I could design an MVP to test with users.
User Needs
Q: Who are the primary users?
A: Busy, time-constrained city dwellers who own a car and must park on the street. While there’s no published driver demographic information, NYC’s data suggest the average age of residents who drive are in their “prime working years,” 25 to 54 years old.
Q: What purpose will this serve?
A: Remind users where they parked and when they need to move their car for ASP to avoid parking tickets.
A: New York State Department of Transportation (NYDSoT) Open API, Twilio, and Shandcn UI Design Library.
Q: What do we need to make it work?
Q: How will we determine success for the MVP?
A: The app can record and store the user’s parking information, send a notification with ample time for users to move their car, and skip notifications on suspended/not in effect ASP days.
New York City Department of Transportation (NYCDoT) Open API and Additional Resources
The NYCDoT provides public access to various data through several APIs, including information on ASP activity. Additional free resources—such as NYC311 for daily ASP status and suspensions calendar, and NYCDoT Signs for street cleaning schedules—provided additional context and product guidance.
Using NYCDoT [API Documentation] and Twilio, Mae Capozzi (engineer) built the backend and database to record and store user input and to trigger text notifications, alerting users when they need to move their cars.
II. Define:
How should we solve the problem?
For the MVP, the priority features should allow users to save their parking locations and set up personalized ASP street cleaning text reminders.
Key Context:
We chose to design a web application with NYC as our pilot region for this app, as we’d be able to easily test the product ourselves before sending the link with the BETA version to our local network. Our aim is to eventually scale to a mobile app that can work in other major U.S. cities like San Francisco, Chicago, Boston, etc.
Set-up Parking Reminder Flow
Product Roadmap:
What features do users need to ensure the product functions and that users can complete the primary flow? What can I add to make the product more enjoyable? The priority features were validated by stakeholder goals and market research.
MVP Priority features:
Daily ASP Status Hero: provides the date, daily ASP status, and Park Car CTA.
Upcoming suspensions module: next 4-5 scheduled ASP suspensions, link to full suspensions calendar
Parking Details Form: collects driver details, car location, and street sweeping sign details.
Reminder texts: using data collected from, alert users the night before and the morning of when they need to move their car. Ideally, it will also notify users when unscheduled suspensions occur.
Footer: Contact CTA and privacy policy
Future features:
Web App >> Mobile App: push notifications, easy access on homepage.
User Profiles: Create accounts, save favorite/usual spots, store users’ contact info, multiple vehicles, etc.
Find My Integration: Users can link their AirTags so they don’t have to enter address details.
Photo Scan Parking Details: use their phone camera to read and save ASP sign details.
III. Design:
What should it look like and how should users interact with it?
My north star for the designs was “how do we make this app as quick to reference and use as possible?” Content should be minimal and clear, contrast should be high, and our primary flow should be immediately accessible.
Brand Identity
Much of the UI component layouts were determined by Shadcn’s design library, but the brand identity informed how those components were styled.
I wanted to develop a dynamic brand identity that reflected the hustle of NYC street parking. To do so, I built a UI palette around colors like traffic yellow and asphalt. I chose Overpass Mono for buttons, eyebrows, and the logo as it is used in some street signage. I chose Poppins as the complementary typeface for paragraph text because it is a sans-serif, geometric font with lots of versatility and roundedness that contrasts well with the utilitarian vibe of Overpass Mono. Lastly, the logos and icons reference the semiotics of traffic—in this case, double yellow lines. They’re also a tongue-in-cheek reference to some New Yorkers’ workaround for moving their car: double parking across the street until sweeping is over, so they don’t lose their prime spot.
Wireframes + Reusable Components
Using Shadcn’s Figma UI Kit, I designed the architecture for the main screens. I prioritized the key functions the app provides users: at-a-glance daily status and parking reminder set-up.
The initial view immediately shows users’ ASP status and a CTA that starts the Park Car flow.
After that, a list of upcoming ASP suspensions allows users to plan ahead. We also wanted to link to external NYSDoT resources for even more detail. Future iterations will host simplified versions of those resources in-app.
The Park Car CTA takes users to Parking Spot Details form. The form collects contact information and street parking details.
Secondary field labels cue users to review street signs for street sweeping and parking restriction details. Manual entry of parking details is not ideal, but sufficient for an MVP.
A confirmation badge is added to the initial view of the web app to validate task completion. It includes date users will have to move their car for street sweeping, so that the text reminder notification is not the first time they’re encountering that information.
Hi-Fi Mocks
Test the Beta App
Key Takeaways
Identified a real pain point for NYC's drivers: the time-consuming and costly challenge of tracking street parking and ASP schedules.
Conducted discovery research to understand user needs, evaluate existing city resources (NYCDoT API, NYC311, NYCDoT Signs), and define MVP success criteria.
“Quick and easy to use” was the north star that led to prioritizing minimal content, high contrast, and an immediately accessible primary flow.
Designed reusable wireframe components using Shadcn's Figma UI Kit, then iterated through to high-fidelity mocks. This accelerated design and simplified developer handoff.
Developed a cohesive brand identity inspired by city streets and focused on readability. The brand consists of high contrast colors like traffic yellow, asphalt tones, and double yellow line iconography; Plus, intentionally selected typefaces like Overpass Mono (used in street signage) for buttons and logo, and Poppins for body text to balance utility with approachability