A React Native mobile app that used contextual, card-based UX to guide travelers through reservations, gate access, shuttle tracking, and loyalty rewards — all from a single adaptive interface.
Park 'N Fly — one of the largest off-airport parking providers in the United States — reached out to Digital Scientists to build a mobile app that would transform the traveler parking experience. The app needed to handle a surprising amount of complexity: trip reservations, gate barcode scanning, parking space tracking, real-time shuttle wait times, Apple Wallet integration, and a multi-tier loyalty program.
Our approach started with a comprehensive Product Blueprint: a 6-persona journey mapping workshop, competitive analysis of 14+ travel and utility apps, and detailed wireframing of every screen and state. The central design insight was a contextual card-based interface — a single screen that automatically adapted to show exactly the right information at each stage of the parking journey.
Built with React Native for iOS and Android, the app launched in March 2018 alongside Park 'N Fly's 50th anniversary web redesign.
The Parking Journey — 8 Stages We Mapped
Plan Trip
2+ weeks out
Pre-Departure
2 days out
Day Of
6 hours out
En Route
2.5 hours out
Arrival
At PNF lot
Pre-Return
1 day before
Return
Back at PNF
Loyalty
2 weeks after
Airport parking apps don't get second chances. Travelers are stressed, on a schedule, and need every feature to work the first time. Our challenge was to compress a complex, multi-step parking transaction — involving reservations, payments, gate access, shuttle coordination, and loyalty tracking — into an interface that felt effortless.
A single parking trip involves 16+ distinct user activities — from reservation creation through gate scanning, space tracking, shuttle hailing, and post-trip review. Each needs to surface at exactly the right moment.
The system needed to serve six distinct user types: prospects, customers, shuttle drivers, shuttle dispatchers, location managers, and platform administrators — each with different needs and devices.
Gate codes, shuttle wait times, and parking confirmations have to work in real time. A failed barcode scan at the gate or a missed shuttle ETA isn't just an inconvenience — it's a missed flight.
The experience needed to be identical on iOS and Android while integrating platform-specific features like Apple Wallet for gate passes and Google Maps for location services.
Instead of forcing travelers through a maze of screens, we designed a single reservation view powered by contextual cards. Real-world triggers — a reservation date, a gate scan, a geofence — automatically transition the card to show exactly the right information at each stage of the parking journey. Click through the states below to follow a traveler from booking to receipt.
GPS auto-detects the nearest airport and pre-fills the location. Three simple steps: select location, choose lot & services, review & checkout. Returning users get pre-filled payment and vehicle information.
State 0 — The starting point
Every card state mapped to its real-world trigger
Click any screen above to see its details — Scroll horizontally on mobile
Before writing a line of code, we ran a comprehensive journey mapping workshop with the Park 'N Fly team. We mapped six distinct personas — from first-time prospects to shuttle dispatchers — across every touchpoint in the parking experience.
We studied 14+ competitive apps including Delta, Starbucks, Uber, TripIt, and FastPark to identify the best patterns for high-utility mobile transactions. The result was a 113-slide Product Blueprint that defined every screen, state, and interaction before development began.
The reservation process was distilled into three clean steps: select your location (auto-detected by GPS), choose your lot type and services, and review & checkout. Returning users get pre-filled payment and vehicle information for even faster booking.
We worked with the Park 'N Fly team to design a loyalty experience that rewarded regular travelers without adding friction. The Frequent Parker Card is fully integrated into the app — travelers can view their membership tier, track days until their next reward level, and see their earned free parking days.
The loyalty card doubles as a scannable barcode for gate exit, meaning the same feature that rewards the customer also speeds up their departure. Points are automatically calculated after every trip, and award days are clearly displayed with a history of redeemed rewards.
React Native
Cross-platform mobile
Ruby on Rails
Backend API
Apple Wallet
Gate pass integration
Google Maps API
Location & geofencing
iOS
App Store
Android
Google Play
Product Blueprint
113-slide strategy document with personas, journey maps, wireframes, and competitive analysis
iOS & Android App
Single React Native codebase for both platforms with native integrations
Reservation & Payment System
GPS-powered booking with 3-step checkout, coupons, and saved payment methods
Loyalty Program
Multi-tier Frequent Parker Card with point tracking, reward redemption, and gate integration
Location Finder
Map-based PNF lot discovery with filtering by airport, services, and availability
Visual Design System
Full component library for the 50th anniversary brand refresh across app and web
“Amazing company and knowledgeable staff. They assisted us in our app re-write and produced top quality work. Would recommend!”
Ken Schirrmacher
CTO / Sr. Director of IT, Park 'N Fly
“We've seen an increase in customer activity, downloads, and satisfaction overall. Digital Scientists effectively implemented solutions that significantly improved our previous app.”
Vice President, Marketing
Park 'N Fly
The fully functional app launched to iOS and Android app stores in March 2018, giving travelers improved access to accounts, gate codes, shuttle wait times, and loyalty program information. The card-based design meant travelers could complete their entire parking transaction without navigating away from a single screen.
Park 'N Fly reported an increase in customer activity, downloads, and overall satisfaction, with the app significantly improving the previous mobile experience. Alongside the app, Park 'N Fly launched their updated web experience as part of their 50th anniversary celebration, emphasizing a bold new look and feel across all digital touchpoints.
Let’s discuss how Digital Scientists can help bring your vision to life with expert product design and development.
