Dynamic Travel Display


Lead UI/UX Designer


Zhuoying Lin

Fengyi Zhang


Travelers to the San Juan Islands need to get to their destination without missing their scheduled departures, in a terminal that hosts multiple means of transit


San Juan Islands, WA




A dynamic travel display that highlights boarding times and separates destinations and means of transit, and provides printable cards to take information on-the-go. 

The San Juan Islands, 60 miles from Seattle, provide a scenic retreat from urban life in Northwest Washington. However, with no ground transportation available to the Islands, residents and travelers rely on trains, planes, or ferries to travel from or between them. With that, the main transportation hub of the San Juan Islands tasked our team with designing a data-driven display to get passengers to the right gate or platform on time. 

With almost a quarter of the population over the age of 65, we needed to consider accessibility as a key parameter to design around. Additionally, because most of the islands are not self-sustaining, there is a lot of travel between them. Finally, the Islands provide a tax-subsidized pass for residents and travelers, the PTF (Planes, Trains, and Ferries) Pass, that offers access to various transportation options and local attractions. 

The transportation hub's data management team provided us with a lot of data that we could choose to include in the travel display. To sift through the data, we identified categories of data to exclude—things like fuel hours aboard, the maximum take-off weight, or the vehicle manufacturer were not important to travelers. After determining what we needed to include in the display, we created primary and secondary groupings to determine what was most important. We also identified implicit categories that may not have been reflected in the data management team's set, including live boarding times and current weather. 

ddd data grouping.JPG
ddd data priority.JPG
ddd iteration 0.JPG

In our initial design sketches, we took a lot of cues from existing airport displays. With the amount of flights at most airports, these displays prioritize showing as many entries as possible, using in-line entries laid out alphabetically. We employed these methods but learned that with the various methods of transit the hub accommodates, this method made it difficult to communicate these ideas without displaying too much information at any given time. 

In our next iterations, we introduced a card motif, which evolved our designs further. In user-testing, this motif helped users access the most relevant information in a short amount of time. Additionally, we revisited our intent with the display to also highlight daily attractions given the high tourist traffic through the area. 

iteration 1.jpg
ddd iteration 3.JPG
iteration 2.jpg
ddd iteration 4.JPG

For our final iteration, we sought to include more information. We also needed to address a complexity in the data, which predicated that ferries do not travel directly out of the transit hub. Passengers traveling by ferry would need to connect by train or plane to Friday Harbor, Yacht Haven, or Roche Harbor first. To do this, we grouped trips by their methods of transportation and destinations. We also prioritized information about the PTF pass. Finally, given certain peak travel times and the frequency with which flights, trains, or ferries depart, we needed to display more information about boarding trips. 

dynamic travel display-01.png

By shortening the cards in the boarding section, we were able to include more information. We also used coloring to call attention to boarding or canceled trips. 

dynamic travel display-02.png

We highlighted the complexities with ferry destinations: the fact that they're available by transfer and that they travel from Friday Harbor, Roche Harbor, and Yacht Haven out to the other islands. 

dynamic travel display-03.png

We also highlighted local attractions and the PTF pass to cater to the tourism aspect of the region. 

To display the information in a conducive way, we used animation techniques to transition between screens. Referencing Disney's principles of animation, we used acceleration and anticipation to animate the cards. This helped ease the transition while providing a sense of delight. 

Finally, we recognized a need to provide travelers with information on the go, given the amount of transfers and the details about local attractions and the PTF Pass. To reinforce the design elements on the screen, we created printable handouts positioned directly under each card that give travelers important information about their destinations, transfers, schedules, and attractions. This gives people something to take with them that's both helpful and memorable. 

ddd print.JPG
ddd print out.JPG