Next Project
Next Project
Next Project
My UX/UI Portfolio
My UX/UI Portfolio
My UX/UI Portfolio
My UX/UI Portfolio
Overview
Pastport
Pastport is a user-centric travel app that consolidates travel booking and historical flight tracking to bring the adventure of travel to a digital experience.
Project Summary
Every now and then I get inspired by an app idea and design it to have a bit of fun with Figma outside of work. As an avgeek, I love platforms like Flight Radar and airplane tracking apps. However, most of these apps serve 1 niche purpose and don't consolidate these features into one product. Pastport was my attempt to design a user-centric travel app that combined the utility of tracking apps with the joy of trip planning.
Process Overview
I iteratively designed Pastport and leveraged Usabiltiy Hub to conduct some quick feedback session on its design. Feel free to jump to sections using the skip links below.
Key Features
Overview of Key Features
Pastport provides users with a custom onboarding experience, an interactive map of their past travels, a hub to collect travel recommendations, flight tracking, and flight aggregating to book their next trip.
Onboarding
Pastport allows users to identify their home airport for easy future bookings and import their past flights from their emails, resulting in a quick and comprehensive map of their past flights.
Trips
In Trips, users can access all their upcoming trips and also add new ones. On the homepage of Trips, users' next upcoming trip is surfaced in the bottom drawer and they can quickly add a "Rec" through the shortcut on this page as well.
Profile
Through their profile, users can access their digital passport and view all their past trips, including how many trips they've taken to a country. Additionally, all their past Recs are grouped on a country basis, so they can reference them in the future if they need to.
Flight Tracking
If a user has a saved trip, their flight statuses are automatically updated in that trip. If a user wants to track another flight or say a friend's flight, they can do that through "Track."
Booking
Pastport features a flight aggregator similar to Google Flights. Users can search for flights and Pastport will return the best deals where they can buy their tickets. If a user has added their home airport, they can skip the step of adding where they're flying out from.
Animations
I spent some time thinking about the animations in this process. I hypothesized that the use of animation here could be strategic in a) differentiating Pastport's booking experience from competitors, b) confirming the user's origin and destination before clicking "search," and c) reducing user fatigue while waiting for flight results to populate.
Social Sharing
For user acquisition, I created a shareable artifact that users could share with their friends or family on social channels or via text.
Iterative UI
Iterating on Passport's Design
With Usability Hub, I tested a few versions of Pastport and iterated on its UI gradually. This resulted in a lighter color palette compared to the original and also some requested features like a shortcut to add a "Rec" from the homepage of Trips.
Version 1
With my first version, I wanted to get feedback on Passport's IA, features, and overall concept. When testing, users did not respond well to the dark color palette. They mentioned travel was something fun that the app's visual identity needed to evoke. Users also didn't react positively to trip "photos" and didn't understand why they would want to add their photos into the app.
Version 2
I switched to a lighter color palette here and also reduced some clutter in the layout. I also removed the photos feature and doubled down on the "Recs" feature, due to user feedback. After sitting with the results of the first user test, I decided I wanted to add more map visuals into the app to evoke a sense of wanderlust and adventure. Version 2 featured a map animation and map header on the booking page.
Version 3
I did another user test and socialized these mocks with some friends. A friend recommended I ditch the 2D maps in favor of 3D maps that Apple Maps had made popular. This added a lot of extra color to the experience and also paved the way for a glassier UI for the main cards. In the second test, users really loved the Rec feature and requested a way for it to be added to the home page. I added a quick shortcut and decided to add Recs to the Profile section of the app too. This way, all the Recs for a country would be consolidated to make it easier for users to reference past trips if they wanted to share something with a friend.
Prototype Video
Final Prototype
After working on Pastport for a few months, and discovering an eerily similar app called Flighty, I finalized my work with this app by putting together a fully interactive prototype. While this project didn't result in a new business idea or something I wanted to take live, it was a great way for me to sharpen my UI and prototyping skills.