Data analysis | Data-Driven Display | UX Exploration | Usability Test | UX proposal | Implementation 

Group Project

Jai Sawkar | Jialu Li | Asadali Sheikh


Adobe After Effect | Adobe Illustrator


3 Weeks

My Contribution

  • Uncovered insights to inform design decisions.

  • Sorting complex data.

  • Extrapolate key patterns in data.

  • Executed design from scratch to high-fi.

  • Implemented key interactions with tech lead.

  • Visualized research insights and presented to client.

Atlantis Hub Data-Driven Display

The project is to design a transportation display for the Atlantis Hub at the San Juan Islands. The display contains up to date multi transportation schedule and exchange information while promoting the "PTF pass" for the Hub. Through the display render, our users can quickly find their desired destination, and subsequently, understand where they need to go, the steps they need to take to get there, and a projected ETA. Moreover, we used animation to display real-time updates, change in status, and, as the day goes by, departed flights will transition into upcoming flights on the board.


In order to better understand whom we are designing for, we conducted an analysis of our three personas, one stakeholder and two users


Elizabeth Duarte

Transportation Director of the Municipality of San Juan Islands


  • To promote the value and flexibility of the PTF pass


  • Sell more PTF passes & encourage regular travel in the San Juan Islands



  • Gain more tourism on the San Juan Islands

  • Make traveling information easy to spot on the

  • displays.

Indirect User

George Shimko

Property owner and retired resident of San Juan Islands


  • Use PTF for both himself, but mainly his family & grandkids

  • Allow easy, straightforward travel to the Orcas Island and Stuart Island

Use Case

His grandkids may be indecisive in terms of where they want to go

  • Display should allow a variety option at once


His grandkids may be traveling alone

  • Make the display inviting & very easy to read


Direct User

Patrick Mulvaney

Environmental engineer who makes weekly trips to the islands for work


  • Using the PTF Pass for on-site meetings

  • Using the PTF to decrease travel time

  • Would like to be aware of possible status changes

Use Case

Patrick arrives to the Hub in a hurry

  • Should be able to quickly know how he can get to his destination and how long it will take


Bad Weather

  • Display should update real-time & in a manner that alerts Patrick easily


  • Advertise the PTF Pass

  • Promote flexibility of the PTF Pass

  • Gain new customers of the PTF Pass

  • Make transportation data easy to display

  • ​Affordance to view multiple options

  • Allow versatility in scheduling day

  • Be made aware of current conditions & Status

  • Ability to understand schedule at a glance

Data Analysis

At the same time we were given our personas, we were also given a daunting spreadsheet full of data regarding the Atlantis Hub & its transport. Our task to filter the data that would be useful to the personas, and explore how we can organize the data accordingly

Dissecting the Data

Combining Data + Personas

Our group first looked at the data given to us and organized all points of information by creating a hierarchy of how we wanted to present the information. Once we organized all points of data, we then moved to decide what pieces of information we decided to exclude from the display.

In addition to analyzing the data given to us, we also analyzed the needs of the personas to graph where they stand on a concept map of speed vs. flexibility. From there, we identified what each of the personas would need to see in a display, and also determined what information did not need to be included in the final display.

We then began to illustrate different possible scenarios that our users may face, and began to decipher what exact information they might need.

User journey map.jpg

Data Studies


Map Study

From the data study, we explored, through a diagram, how we could group different types of locations by illustrating modes, and how they all connect with each other.

Location relationships.PNG



We then began to explore aspects of our user-filtered data and began incorporating in precedent of current organizational practices (ie train time tables, etc). We then began initial low-fidelity models of a clearer visualization.


Transportation Cont.



With our data sorted, it was now time to begin deliberating in what way can we best deliver our designs to the users

  • Categorize the data

    • By Destination, then mode, then time of departure

  • Eliminating data not needed by users

  • Mark the transaction point and options clearly

  • Set clues for the users to adapt to the display

We designed the display tackling our stakeholders' needs:

  • Dichotomy between PTF and Non-PTF options

    • Creates advertisement opportunity for the PTF

  • Grouping by destination, then by mode

    • Allows users understanding at a quick glance

    • Emphasizes flexibility by showing all the different modes of transport to one destination

  • All while creating a pleasurable experience



Initial Digital Iteration

Once we had the groundwork for our initial display, we created a digital version to help us understand not only the content but how the content reads.

After consolidating our data, we knew we wanted to sort our data Destination first. Our initial, low-fidelity model illustrates just that, with a map for context center-focused on the display.

We presented this to our peers and understood that though this was a good start, we still had a way to go. Some of the feedback included that there were not enough options listed; moreover, not all of the travel destinations were listed at the same time, making a user have to wait for the display rotation to restart.

firstdraft (2) copy.jpg


Digital Iterations

Our next iteration addressed some of the issues the first iteration ran into.
Our feedback from our peers and professor included that though the current state of the display works okay, when we begin to introduce the layovers to reach certain destinations, our organization might run into some problems.

One of our biggest challenges was designing from the smallest details upward. As seen on the right, we iterated numerously on how to illustrate both the individual transportation and how to group by destination.

AI File AH 2 ps copy.jpg

Final Dsiplay

On the right is our final design for the display. Through this render, our users can quickly find their desired destination, and subsequently, understand where they need to go, the steps they need to take to get there, and a projected ETA. Moreover, we used animation to display real-time updates, change in status, and, as the day goes by, departed flights will transition into upcoming flights on the board.

Screen Shot 2020-01-06 at 11.47.33


Possible Control

Towards the end of the project, we were given the option of adding a simple control to the display. We explored different options, including the one to the right, in which a user could use the simple toggles to switch through different, extended schedules.