“Vanderweil” Interactive Screen

Project Description

This project is an interactive and immersive educational installation. The display, installed at the Marine Science Magnet High School displays data pulled directly from NERACOOS buoys, as well as custom information entered by students or educators.

Students can interact directly with the screens as they explore the latest developments in the world of marine science technology of the Long Island Sound.

The installation is composed of two large touch screens placed back to back. Each screen is encased with a PQ labs frame, which detects touch points. The installation runs on two independent computers, and one of these computers also acts as a server for the CMS.

Design

Navigation

This installation was split between three states of user interaction:

• Attract: At first, catch the user's eye and interest. It's at this point that you invite the user to interact.
• Engage: Once the user interacts, add some information with which the user can play a bit.
• Explore: The user can explore the experience further from there. Offer more content upon the user's request.

These are just general points as to how you get a user to interact with an installation, which we applied for our installation. Let's see how we designed this.

Design and User Journey

The original concept was heavily influenced by infographic design, with heavy fonts, flat and bright colors. To be honest, it was a bit of a mess, too many elements at once for the eye to know where to look and how to read. However, the idea was there, we simply needed to refine it into a finished product.

As can be seen in the concept images above, there is a clear disconnect between the design of the map view and the design of the infographic view. There were also lots of elements that needed not be repeated in every state, such as the temperature and other weather information.

I worked with Raed Moussa to streamline the design, keeping only necessary information. He was able to create a cohesive visual environment between the map and the side view.

As for informational elements, we opted to keep them only where they were pertinent:

• The attract view contains animated weather information over a map of the Long Island Sound area, with a clear call to action to invite people to touch the screen.
• The engage view presents people with some additional information overlaid on the same map that they saw from the attract view. All the information is relative to the map they see: water depth, buoy locations, shipwreck locations and historical events.
• The explore view contains a figurative slice view of a coastal region in the same area. Species icons are displayed in locations where said species would usually live. If the user so desires, more information on each species is available upon touch.

Water Depths

One of the scientific information that we had to overlay on the map was the water depths of the area. This information is usually printed directly on the maps or embedded into ships navigational systems. We wanted to display this information in the way topography maps display heights.

The inconvenient was that the available maps did not provide it directly. Somehow, most of the depths variations on the map were not big enough, most were simply noted by numbers.

So we had an idea: highlight all the numbers with different colors in order to create a heat map. And I mean manually highlight! At first, we ordered the physical maps, we planned on sitting at a desk with markers to highlight the numbers. We looked into how to take a high resolution photo of the map, but the depth numbers came out all blurry. It was a no go.

Finally, we were able to get the digital maps from Nautical Charts Online. From then, I took a couple of days in Photoshop with my graphic tablet to highlight all the numbers according to a range we predetermined. We were able to get a good heat map.

It was still necessary to incorporate the information of this heat map into the design. Raed was provided a vectorized topographical render of the heat map and was able to incorporate it smoothly into the map.

Transition from Map to Slice View

It was a bit tricky to think of a transition between the map view, which is a flat map of the Long Island Sound area, and the side view, which is a slice view of a coastal area. At the time I was watching Avatar: the Last Airbender cartoon. In its intro, there was exactly what I was looking for! Take a look between 0:08 and 0:12.

This was a great inspiration. Being a fan of old Final Fantasy games, I also thought of how the map was tilted back when the characters would hop onto an airship.

With the storyboard above, Francis Dakin-Côté was able to animate the perfect transition we needed between the map view and the slice view. This animation is presented when a user chooses to explore the installation more in depth, providing a logical transition between the states. The same animation is played backwards when going from the slice view to the map view.

CMS

In order to manage the content, we provided the client with a CMS (Content Management System). I believe that this project can live long and evolve according to the students' work. Rather than provide the client with a paper manual, I took the landing page of the CMS as an instruction page, and suggested how they could use that tool:

Do not think of this installation simply as a static repository of information, but rather as a dynamic space to display involving and evolving information concerning the Long Island Sound area. Rather than throwing in all the data at once, maybe there could be a theme for each week or each month.

Here are some ideas:

• A student's essay receives a great grade: if a student's essay on a subject that is pertinent to the installation (Long Island Sound area, history or sea life) is well written and worth sharing with the school, present it by adding items in the appropriate sections with excerpts of the essay.
• Shipwreck week (or month): showcase only shipwrecks in the Engage View section by deactivating all items that are not shipwrecks.
• Shellfish week (or month): showcase only shellfish species in the Explore View section by deactivating all items that are not shellfish.

These are simple examples, but it's up to you to engage students in using the installation and maybe write content for it to be shared with fellow students.

As you can see, I believe that as container as well as content creators, we may have a responsibility to inspire our clients on how to use the tools we create for them. Sometimes it's obvious (product display for business), but in this case, I thought it would be best to also guide teachers and educators. These people already have a lot on their plate, let's make sure what we create answer their needs and doesn't complicate their work.

Credits

• Original Concept: Meka, Alexandre Simionescu
• UX Design, Art Direction, Information Architecture: Mat Janson Blanchet
• Interface Design: Raed Mousa
• Transition Animation: Francis Dakin-Côté
• Interface Development: Mat Janson Blanchet
• RealMotion™ Graph Development: Bruno Gohier
• Back-End Development: WLAB, Simon Arame
• Project management: Anne Élisabeth Thibault, Géraldine Restani, Mat Janson Blanchet

All copyrights and products belong to their respective owners.