Data Visualization
UI/UX Design
Motion Graphics
Oct 2018


The Atlantis Hub terminal display is a realtime data-driven environmental display about a fictional transport hub for the San Juan Islands, Washington. The data includes information about planes, trains, and ferries, and a local unlimited ride pass information. The value of the display is to anticipate user needs without requiring input interaction from the users. The design is primarily informed by a clear understanding of the needs of stakeholders and users.

Team Members : Kearnie Lin & Aileen Yu



To begin designing for the Atlantis Transportation Hub data-driven environmental display, the team was presented with a data content inventory and three personas with use cases. To begin the process, we identified their major goals and needs.

Screen Shot 2018-10-30 at 2.49.03 PM.png

understanding the data

Identifying which data was relevant and irrelevant to each user was the first step in organizing the large amount of information given. Additionally, we identified travel patterns and metadata from the time sheets.

Screen Shot 2018-10-30 at 2.51.19 PM.png

information flow mapping

This basic information flow chart helped us gain a better understanding of how the selected data is categorized, and how these categories interact when needed to be cross referenced by a user.

Screen Shot 2018-10-30 at 2.53.32 PM.png

The next diagrams map the necessary user thought process while looking for information from the display.

Screen Shot 2018-10-30 at 2.54.15 PM.png

The anticipated questions and answers are mostly predetermined by the user’s situation, but the design should make the visual scanning and search process as quick and easy as possible.

The layout of the display should follow the logical sequencing identified here.

Users must cycle through a series of questions and answers in order to plan a travel route. In most cases, a route to any given location consists of a direct flight, a direct train, or a combination of either a plane to ferry or train to ferry.


Island map iterations

A colored sketch using a geographical map base was drawn to gain an initial visual understanding of all the modes of transportation relative to the Atlantis Hub. To save space on the display, the team decided that an abstraction would be necessary.

Initial sketch over Google Maps data.

Initial sketch over Google Maps data.

Relatively final sketch iteration of abstract map layout.

Relatively final sketch iteration of abstract map layout.

Abstraction Iterations.


wireframes & sketches

Thumbnail sketches explored layout and hierarchy with the information flow charts in mind. A digital information-level wireframe handles layout issues with using the reorganized spreadsheet data.


table styles

Since color would be used to identify modes of transport, these iterations explored the ways of utilizing a single color to highlight information within a table. The visual style of each table went through a couple iterations before landing on result close to the final design.

Screen Shot 2018-10-30 at 3.34.19 PM.png

color iteration

By adding color the the monochrome sketch, we can begin to get a feel of the final result. With the layout and color scheme mostly complete, all that was left was to focus on the details and functionality of each mode of transportation. Color

Dash Dark .png
Dash Dark Redlines.png


Flights are organized into two tables: PTF pass flights, and Non-PTF pass flights. To improve scanning speed, the flight tables are sorted by destination first, then by departure time. By combining flight number with the airline code, a wide column in this table was eliminated, allowing for more space. The iterations explored a variety of status coloring methods and spacing. Since not all flights could be displayed at once, only flights within the next 2 hours would be shown on the screen, up until 10 minutes after departing.



The separate train tables make identifying the two distinct train routes easier. The vertical graphic to connect the rows aided in users understanding to read the chart from top to bottom. Using the star to represent Atlantis Hub to visually parallel the map helped users understand the looping path of the train.



The ferry tables needed to be handled differently, since the data does not lend itself well to horizontal rows, and has dock information that would be redundant to repeat on every ferry time listed. Unifying the titles was also a challenge due to the variety of sizes.



The remaining area for non-data based information went through more information based changes after evaluation for hierarchy, sizing, and stakeholder needs. Through peer critiques and user testing, PTF information gained presence through iterations, while the time and forecast was reduced.

ptf and clock.png

final design


The final design reflects the individual iterations on the various tables, as well as subtle enhancements using animations. These include:

  • Shifting the data in the charts when times refresh

  • Temporarily blinking any flight status that changed to Delayed or Cancelled

  • Showing a ‘live’ indication on the map of the train location by glowing the path it is currently on

  • Date and Time updates.