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.
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.
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.
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.
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.
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.
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 focus in this project was on screen design, illustration and prototyping the underwater world.
This is a student project created during summer semester 2014 as part of a course in Interactive Communication Systems by Roger Walk.