Cousteau is an interactive installation about the deep sea.

Introduction

We designed a fun, interactive way for children to learn about the deep sea. The app is targeted at primary-school pupils and can be set up in a museum as well as at home. We designed it to use a dual screen setup and built a working prototype.

Goals

We wanted to create an explorative interface that is visually appealing and rich in information. It should offer a quick glimpse into the deeps sea, but also contain enough information for detailed exploring.

Challenges

We had many discussions about using a two-screen setup: Would it confuse the users to much, would they be distracted? In the end we decided to go for it. It proved to be the right decision, providing an immersive experience. To keep the distraction minimal we kept each screen as simple as possible.

What I learned

Since we built a working prototype we were able to observe how users interacted with Cousteau at an exhibition. We noticed that while adults sometimes had problems coordinating between the two screens, children were far more secure. Controlling the depth by tilting the iPad came natural to them and the interface was understandable without explanation. Kids as young as three years managed to control the system and were intrigued by discovering new fishes.

Porthole

The large screen displays the view through the window of the submarine where fishes and plants are passing by. There are minimal displays for depth and pressure that appear only when they are needed. This part of the app is not for learning, but for discovering and experiencing the deep sea environment.

User Interface

The iPad’s accelerometer is used for intuitive steering: Tilt the iPad forward to dive down and backward to dive back up.

As the submarine dives deeper cards representing elements that are displayed on the large screen start to appear.

The cards displayed can be filtered by category.

The user can tap a card to display more detailed information. The large card shows an image gallery, interesting facts in a table and text.

A photograph of the illustrated fish is shown on its large card.

The header is used to either display a timeline or the scientific classification.

If the user wants to get to a certain depth faster the depth display can be tapped and held …

… a scale overlay is shown and the submarine can be moved up or down by pulling in either direction.

Move your mouse over the hotspot to start a tour through the interface!

To make the UI appropriate for our target audience we minimized it down to a single, natural-language interface element. It can be used to filter for specific content types and control the depth of the submarine.

Because we wanted the users to be able to watch the view through the porthole while descending into the depth the main interaction for controlling the depth doesn’t need eye contact: Tilting the iPad forward makes the submarine sink, tilting it backwards makes it ascend.

The greater part of the screen is filled by little cards. Everything that the user sees on the large screen at a moment is represented by one card. When the user wants to get more information about something she can tap the card. Then a bigger card is shown that includes an image gallery, a table with interesting facts and a long form text that a parent or teacher can read.

Illustrations

Ceratias Carunculatus
Ceratias Bispinosus
Cottunculus Microps
Halosaurus Machroir
Trachichtys Traillii

We tried many different graphic styles but in the end settled for a low-poly look. We didn’t want the app to look too childish, but also not too serious and boring. We figured that illustrations that were representative of the actual fish, but not too naturalistic, were the way to go. I created illustrations of several fishes and animated their fins and mouth.

Process

We developed a native final prototype running on an iPad. It streams to the second screen via an AppleTV (the iPad does the processing for both screens). We developed the prototype in Apple’s Swift language (which had been introduced less than a month earlier).

We tried lots of different technologies and styles throughout our process – for a while we settled on a 3D world built with Unity – but in the end we decided to go all 2D and use Apple’s own game API SpriteKit.

My role

My focus in this project was on screen design, illustration and prototyping the underwater world.

Meta

This is a student project created during summer semester 2014 as part of a course in Interactive Communication Systems by Roger Walk.

Team partners

Aaron Abentheuer
Sarah Mautsch