top of page

Hulu Capstone

  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. 

Pastport Mocks 01.png
ShareMocks1.png
Trip Mocks 02.png
Trip Mocks 03.png

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.

Onboarding Mocks 01.png
Onboarding Mocks 02.png
Onboarding Mocks 03.png
Onboarding Mocks 04.png

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.

Trip Mocks 1.1.png
Trip Mocks 04.png
Trip Mocks 02.png
Trip Mocks 03.png

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.

Profile Mocks 01.png
Profile Mocks 03.png
Profile Mocks 02.png

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."

Track Mocks 02.png
Track Mocks 03.png
Track Mocks 01.png
Track Mocks 04.png

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. 

ShareMocks2.png
ShareMocks1.png
Social Artifact.png

  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.

Mocks1.02.png
Mocks1.01.png
Mocks1.03.png
RecsV1Mock.png

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.

CRV2Mock.png
Mocks2.03.png
Mocks2.01.png
RecsV2Mock.png

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.

Mocks3.02.png
Mocks3.03.png
Mocks3.01.png
Profile Mocks 03.png

  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. 

Hulu Capstone

Key Features
Iteration
Proto
bottom of page