Data Driven Environmental Display

My team and I designed an environmental display for the Atlantic Hub, a transportation hub for the San Juan Islands. We aimed to promote the new PTF (plane, train, and ferry) pass that allows for ease and flexibility when traveling between the different islands. In this project, we worked with unstructured data of varying schedules to create an informational display with motion and controls.

Skills: UI Design (Sketch, Principle), Data Modeling

05-651: Interaction Design Studio I
September 2017 - October 2017
Partners: Nishchala Singhal, Tianmi Fang

Project Goal

Data is a material that can be designed – and can be done so successfully with careful considerations about the data (casualty, time series increments, and frequency of change) and informational display (typography, composition, point of entry, and color). We were presented with raw data of plane, train, and ferry schedules to design a data-driven environmental display for the Atlantic Hub that would satisfy both user and stakeholder needs. We iterated through multiple designs, incorporating typographic and motion principles.


Data Modeling and Analysis

We began by modeling the data in a way that would help us make sense of it as well as gain new insights.

Concept Map.png

Understanding Stakeholders and Users

We then created a visual representation of each of their needs. This consisted of determining which needs were most important, as well as which were shared or different among the three people. Based on this, we then created a Venn diagram to explore how to make an effective dashboard.

Stakeholders and Users:

  • George Shimko - Property owner and retired resident of the San Juan Islands who wants his family to travel around the islands with ease and use his home on the island as a base for guests
  • Patrick Mulvaney - Environmental engineer who frequently travels for business in the islands and desires the ability to travel on-the-fly despite changing weather conditions
  • Elizabeth Duarte - Transportation Director of San Juan Islands who is in charge of promoting the PTF (plane, train, ferry) Pass, a new program that allows customers a great value and flexibility
Stakeholders and Users.png

Design Process

Preliminary Brainstorming

After modeling our data, we brainstormed and drew a few rough sketches that showed how the data could be presented to the users through an environmental display. We explored various options, including a chart organized by transportation type, interactive screen, and a map.

Digital Prototypes – First Iteration

Based on the feedback we got on our three preliminary sketches, we created our first digital display design. This included trying out different forms of maps. 

First Digital Sketches.png

Digital Prototypes – Second Iteration

We then created our second digital display design and added motion on changing screens for each route and flashing flight statues.


Digital Prototypes – Third Iteration

To better organize routes to different destinations, we played around with new card designs.


    Proposed Solution


    Features of our environmental display include:

    • Every destination’s routes are displayed on the final screen in a card-like format. Four routes are on each card, which are then flipped through every 20 seconds.
    • Routes are displayed in 3 hour time periods. 
    • PTF pass icons are used to signify which routes are PTF eligible, and the green indicated a metaphor of speediness and convenience.
    • Each segment of the trip is displayed clearly: passengers will immediately know of the time of arrival and departure, form of transportation, and any layovers.
    • Weather is displayed next to each destination with a small icon. 
    • Neutral color scheme is used for signaling meaning. 
    • Active status ‘boarding’ is emphasized with a flashing motion. Other changes in flight status, such as ‘cancelled’ or ‘delayed’, are indicated with more visually popping colors.

    Value added to our stakeholders:


    • If one of his routes is cancelled, using the display, he can quickly explore the other options he can take. It will make it easier for him to get to important business meetings on time.
    • The weather icons may help him plan his routes ahead. 


    • He can buy PTF passes for his children who are visiting the San Juan Islands. 
    • While looking at the display, his children can easily explore which routes are PTF eligible, and then plan their trips accordingly. 

    Adding Controls

    To make the display even more efficient, we added a control to the display that would allow passengers in a hurry to flip through a destination’s routes more quickly (rather than waiting for the automatic rotation). This would involve a simple ‘swiping’ motion with one’s finger. 

    • Affordance: Small dots on the bottom of the card signify how many cards there are. 
    • Feedforward: Swiping the dots will cause the card to change. 
    • Feedback: The card flip to another when swiped. 

    The independent control give users more flexibility. Passengers in a rush can easily find their routes by horizontally scrolling through the cards. Not only do dots indicate the amount of routes clearly, but also act as a simple timeline. In addition, passengers looking to get to different destinations can flip through their respective cards simultaneously. Users do not have to waste time waiting for each other.