PDFDisplay+Shadow

PTF Terminal Display

Role: Visual Design, Interaction Design, Information Architecture
Timeframe: 3 Weeks
IXD Studio Class - Carnegie Mellon, 2017

Role: Interaction Designer

Mockup of PTF display

Project Summary

I designed an environmental display for an airport. Throughout the project, I was considering the following constraints:

  • Two personas with different needs. One is a newcomer to the islands, that needs to reliably get to his father's house. The other is a frequent business traveler that needs to prioritize efficiency.
  • Ensure a public audience at a transportation hub can reliably read and comprehend upcoming local embarkments.
  • Allow individual users to interact directly with a display to better understand their transportation options while ensuring the screen is always still readable for other guests at the terminal.   

Personas

Project Persona - Elizabeth Duarte
Elizabeth Duarte
Transportation Director

Educates the public about the ease with which travelers can make itineraries by combining plane, train, and ferry trips through her new program, the PTF Pass.

George
George Shimko
Property Owner - Retired Resident

Regularly invites his children and grandchildren to his house on San Juan Island and intends to give them PTF passes.

He wants to be able to use his home on San Juan Island as a base so his guests can plan fun tourist itineraries.

Patrick
Patrick Mulvaney
EnCo Environmental Engineer

Spends an average of three days per week visiting drilling and wind power sites throughout the San Juan Islands.

Uses PTF program to purchase multiple trips on planes, trains, and ferries so that he can optimize his travel on-the-fly, to accommodate changing weather conditions.

The Data

PTF Transportation Types
PTF Connection Types

A PTF pass can be used to access any of the San Juan Island locations. Train tickets, flights, and ferries are all covered under the price of a pass. Some destinations can only be accessed by ferries, or trains (Left). Some Destinations can be accessed via a direct flight, while others require a train ride from Roche or a ferry from Friday (Right).

The client provided data in the form of timetables. Our team needed to dig through this data and find the columns that were relevant to our stakeholders and personas' goals. We also needed to drop the irrelevant data.

We did some visual exercises to explore how the relevant data associates and relates. We also tried to find patterns in recurring flights and ferries. Lastly, we dropped any data that wasn't a San Juan destination, to ensure our display was optimized specifically for local travel.

The client provided data in the form of timetables. The team needed to dig through this data and find the columns that were relevant to our stakeholders and personas.

Sketching

I brought some initial sketches to my team. I was inspired by subway maps. I was also thinking a bit structurally, and created tree maps corresponding to transporation connections. This was all an attempt to resolve the problem of multiple connections and multiple transportation options.

I brought some initial sketches to my team. I was inspired by subway maps. I was also thinking a bit structurally, and created tree maps corresponding to transporation connections. This was all an attempt to resolve the problem of multiple connections and multiple transportation options.

I brought some initial sketches to my team. I was inspired by subway maps. I was also thinking a bit structurally, and created tree maps corresponding to transporation connections. This was all an attempt to resolve the problem of multiple connections and multiple transportation options.

I brought some initial sketches to my team. I was inspired by subway maps. I was also thinking a bit structurally, and created tree maps corresponding to transporation connections. This was all an attempt to resolve the problem of multiple connections and multiple transportation options.

Sketch1
Sketch2
Sketch3
first iteration of data display

Early Design Iterations

At this point I was focused heavily on interaction design while my teammates were focused on information architecture and product requirements. The design on the left was an early iteration. The destinations paginated, so only half of them were visible at any point.

At this point I was focused heavily on interaction design while my teammates were focused on information architecture and product requirements. The design on the left was an early iteration. The destinations paginated, so only half of them were visible at any point.

At this point I was focused heavily on interaction design while my teammates were focused on information architecture and product requirements. The design on the left was an early iteration. The destinations paginated, so only half of them were visible at any point.

We learned that alphabetizing the destinations wasn't necessary. It was also possible to show more destinations at once.

An alternative design I tried at this point was one that sperated planes, trains, and ferries. While the layout was visually satisfying, it wasn't providing a coherent user experience.

An alternative design I tried at this point was one that separated planes, trains, and ferries. While the layout was visually satisfying, it wasn't providing a coherent user experience.

An alternative design I tried at this point was one that sperated planes, trains, and ferries. While the layout was visually satisfying, it wasn't providing a coherent user experience.

Design2
Airport2_Comp3

My teammates worked on information architecture, and improved the organization of tabular data seen above. I worked on visual design as well as more macro information architecture issues. This included incorporating a map into the design, as well as visual cues to better correlate and assocate data. Destinations on the left were "warm" and "cool" on the right to better orient users. Flight destinations were put on the left side of the table, and ferry only destinations were on the right. They were geographically sorted also. Ferry connections followed local train connections. This was all in opposition to alphabetizing, which wasn't necessary for such a small number of destinations.

Interactivity

Interaction was a critical part of the final deliverable. The goal here was to ensure that a user could walk up to the public display and use it for their own purposes. I thus designed destination points so that they could be interacted with one at a time. This was also echoed in the timetable. The result is that users can click a destination and see next routes easily, with no expense to other viewers.

Case Study Data Driven Display
testing the display for legibility on a screen

Testing

We did some tests to ensure that our display worked at the correct resolution and color contrast. We also ensured the scale was such that interaction was feasible without interfering with other people's ability to look at the map. 

Results

The display works as designed. For smaller spaces it has an interactive component, with an engaging point of entry. The functionality is clear and needs-validated. For larger spaces it provides both a readable view, as well as a real-time view of outbound flights and trains.

PTF_Airport
Touchscreen Comp

Case Studies

Emburse CardsUX, Visual, & Interaction Design

Interactive Transportation DisplayInteraction Design Project

Surfacing NASA Technician KnowledgeResponsive Design / Prototype

Campaign ManagerUX Case Study

Evolving Methods of PerceptionArt and Machine Learning Final Project

Share and TearProduct Design