PTF Pass Environmental Display


In this project, we aim to create a display that encourages three modes of transportation, the Plane the Train, and the Ferry, by showing all possible connections from point A to point B.

For those who want to get to places ASAP, our dashboard minimizes the time that they need to make alternative plans. For those who want to explore interesting locales, the dashboard can help them get creative about their trip planning.


Challenge: How can we help travelers efficiently find the information they need and direct them to the right place in transportation hub?


SolutionDesign a dashboard that directs travelers to their destinations quickly when they already have transportation plans in mind. Moreover, it should also spark curiosity about other destinations.


Project Duration3 weeks

Team Members: Sihan Dong, Zohaib Khan

Responsibilities: User Research, UI Design, Interaction Design, Data Analyzation 




1. Information organized by destination: Based on our research, customers who physically traveled to transportation hub more than often already have the destination in mind. Thus, organizing by destination can help them quickly location relevant travel information. 


2. Minimalistic design for flights: Traveler who choose flights are more likely to be under time constraints thus we want to minimize the time they have to spend with the board.


3. Playful representation of routes for Trains and Ferries: A graphical representation is likely to engage more travelers and trigger their curiosities in exploring the islands as this is an uncommon way to display information in a transportation hub. 



Persona & Data


Elizabeth Duarte

Transportation Director


Readable presentation of data

Advertise TPF pass' flexibility 


Patrick Mulvaney

EnCo environmental engineer


Weather condition

Available alternatives 


George Shimko

Property owner and resident


Easy connection

Easy to plan ahead 




After sorting out what information we want to present on the display, we moved on to create different versions of quick hand sketches to transfer ideas from our minds onto papers. A digital version of the sketch was also created to help us butter map out the layout and information hierarchy with the correct dimension of the display.


Sketch 1: 

Travel information sorted by location, with the most common destinations higher up. Within each destination, flights are shown separately. Train + ferry connections are detailed in order to showcase the most efficient ways of traveling to a certain location, as well as promote the PTF pass’ flexibility. 


Sketch 2: 

This design features a chronological display that shows the destinations and intermediate stops of all the upcoming trips in the next 2 hours. To find the fastest connection, the user can simply make a comparison within a column. The goal is for the users to find their destinations are the next coming trips that will take them there. 


Sketch 3: 

We were inspired by a concave, floor to ceiling art installation at the Toronto International Airport. If destinations were spatially mapped (e.g. for information, a person would face east to see Orcas Island, then west to see Victoria), we could provide a much more immersive experience. Destinations are displayed based on their geographic locations, with their current weather conditions as their backgrounds.

Untitled 2.gif

Speed Dating


Sketch 1: 

Sketch 2: 

Sketch 3: 

We presented our digital sketches to students who have had experiences in transportation hubs and collected feedbacks from them in the form of speed dating. 



"It's clear in the sense that I know exactly what to do to locate the information I need. But I don't find it exciting at all. It's pretty much just what I would expect? I also would expect the destinations to be organized in alphabetical order."


"I feel like there is so much information that is thrown at me all at once. I wonder if this would be overwhelming if I have to deal with it in a real transportation hub. Oh, and it's all text. That might be why."


"The color scheme looks pretty cool. But I feel like the texts might be too small to look at."​


"Looks unprofessional. I think might be because the colors and icons used here? I think this is an interesting way to show the connections and how you can, say hop on a ferry right after you get off the train... Humm. Actually, I wonder what will happen if you have more things that need to be shown here."


"I like how you can immediately see the status of the trips. But I did not get that reach entry is listed chronologically. That was not obvious."


"I can see that you are trying to make each column stand out from each other, but honestly, I still lose track of what I'm looking at if I look up and down a column."



"I think this is a cool idea. I would love to play around with this. Comparing to the previous two designs, this one is more likely to get me interested in exploring the local islands."

"I don't really know geography but I wonder what happens if two islands overlap with each other then how the display will adapt."

"I like it. Since this is presented as an immersive experience, I almost want the display to somehow respond to my body. Maybe the perspective would change as I move through it."




The goal of our preliminary designs was to provide easily scannable information by destination.

Based on findings from speed dating sessions, the biggest problem seems to be that we focused too much on the usability, that attractiveness of our designs was undermined. In other words, they did not entice users to come up to the display and interact.

As a result, for the iterations, we aim to create a more visually engaging design while keep information processing and filtering easy for travelers. 

Iteration Ver #1

Screen Shot 2019-02-26 at 10.06.07

We introduced a different layout that features a better visualization of the train and ferry transition and landmasses that give visitors a better idea of the geography of San Juan. There was also an attempt to map out the general directions of both train and ferry routes, so that travelers can see exactly the connections between harbors and islands. 

Feedbacks via guerilla interviews:

1. Not apparent how connections are prioritized, and how we bring value to the stakeholder.

2. Lack a call to action --> it is not very clear what is important.

3. Color use seems to be arbitrary; needs more purpose.

4. Maps suggest accurate geographic mapping of locations --> not the intention here
5. “Atlantis” is a strong point of entry, and it keeps dragging the eye back to it.
6. Plane information seems de-emphasized and ad like.

Iteration Ver #2

Screen Shot 2019-02-26 at 10.06.27

Based on feedback, we made the overall design much cleaner and easier to digest. The lines between destinations showing connecting routes were changed to finer lines and chevrons instead of stylized icons were used to indicate the direction of travel. We also cut out the overly strong ‘Atlantis’ point of entry to a much more recognizable ‘You are Here’ location icon in the centre of the map.

Final Design


We made a few significant changes in our final version. The most significant change was moving flight information to the top, making it a lot more scannable, and not a part of the display that viewers neglected. The second most significant was adding a downward pointing chevron to each destination dot, creating the affordance to press the dot for more information. We also tweaked the animation to make the dot oscillate in size, aiming to strike a balance between inviting and overwhelming.

Style Guide