Data Driven Display

Interaction Designer
IxD Studio Class - Carnegie Mellon, 2017
Timeframe: 3 Weeks
The director of transportation in the San Juan Islands is building a data-driven environmental display. There is a combination of planes, trains, and ferry options to get to destinations, as well as several connections throughout the day.

The Challenge

Create an environmental display that satisfies a port authority client, and the two users who are local residents, and business travelers respectively.

  • Show plane, train, and ferry connections from the main terminal, to the other San Juan Islands.
  • 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.   

Background

Our client provided Initial research for this project. This included a stakeholder profile and two personas.

Our client provided Initial research for this project. This included a stakeholder profile and two personas.

Project Persona - Elizabeth Duarte

Elizabeth Duarte

Transportation Director

Elizabeth Duarte is the Transportation Director of the Municipality of the Greater San Juan Islands,a division of the local government that operates Atlantis Hub. Her department is responsible for displaying transportation data on large environmental displays in the airport, train stations, and ferry docks for Atlantis customers. In addition to offering highly readable displays of changing transportation data, Elizabeth aims to educate 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, which allows customers a great value and a lot of flexibility.

George

George Shimko

Property Owner - Retired Resident

A long-time resident of the San Juan Islands, George Shimko is an avid outdoorsman who owns modest fishing cabins on nearby Orcas Island and Stuart Island. He regularly invites his children and grandchildren to his house on San Juan Island and intends to give them PTF passes so that they can travel to Roche Habour, Yacht Haven, and Friday Harbour on San Juan Islands and to his cabins on Orcas Island and Stuart Island. 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

Patrick Mulvaney, is an environmental engineer for a EnCo, a large energy company in the region. As an engineer for EnCo who is stationed in Seattle, Patrick spends an average of three days per week visiting drilling and wind power sites throughout the San Juan Islands. Because weather often influences his travel from Seattle, through Victoria, and between the islands, Patrick welcomes the new PTF Pass program that allows his company to purchase multiple trips on planes, trains, and ferries so that he can optimize his travel on-the-fly, to accommodate changing weather conditions.

Research1
Consolidating Research
The Data

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

Sketch1
Sketch2
Sketch3

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.

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.

first iteration of data display

An early high fidelity mockup. This was an attempt to minimally map  destinations and connections. The feedback we got was that the map was too abstract here. Typography also needed more work.

An early high fidelity mockup. This was an attempt to minimally map  destinations and connections. The feedback we got was that the map was too abstract here. Typography also needed more work.

An early high fidelity mockup. This was an attempt to minimally map  destinations and connections. The feedback we got was that the map was too abstract here. Typography also needed more work.

An early high fidelity mockup. This was an attempt to minimally map  destinations and connections. The feedback we got was that the map was too abstract here. Typography also needed more work.

An early high fidelity mockup. This was an attempt to minimally map  destinations and connections. The feedback we got was that the map was too abstract here. Typography also needed more work.

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

Still abstract, but more structurally formatted. Experimented with major information architecture changes here. Ultimately the whole design here was undesirable but helped us pinpoint what to do next.

Still abstract, but more structurally formatted. Experimented with major information architecture changes here. Ultimately the whole design here was undesirable but helped us pinpoint what to do next.

Still abstract, but more structurally formatted. Experimented with major information architecture changes here. Ultimately the whole design here was undesirable but helped us pinpoint what to do next.

Still abstract, but more structurally formatted. Experimented with major information architecture changes here. Ultimately the whole design here was undesirable but helped us pinpoint what to do next.

Still abstract, but more structurally formatted. Experimented with major information architecture changes here. Ultimately the whole design here was undesirable but helped us pinpoint what to do next.

Design3

The final static display incoporated a successful map, as well as successful information architecture.

The final static display incoporated a successful map, as well as successful information architecture.

The final static display incoporated a successful map, as well as successful information architecture.

The final static display incoporated a successful map, as well as successful information architecture.

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

testing the display for legibility on a screen

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.

Lightbox Mockup Free
Comp1

Case Studies

Campaign ManagerUX Case Study

Capturing Tribal KnowledgeResponsive Design / Prototype

Evolving Methods of PerceptionArt and Machine Learning Final Project

Data Driven DisplayInteraction Design Project

Share and TearProduct Design