Explainer video – Storyboard

The explainer video aims to demonstrate how we envision the Interactive Transparent Display will work in the ‘Zoo’ and ‘Meeting Room’ scenarios. It will consist of the animations and interface prototypes created by the team members.

This storyboard provides a general outline of how these artefacts will be put together to create the video.


Zoo UI Prototype

Here’s a link to the HTML zoo prototype which is planned to be used to demonstrate the UI design but also for user acceptance testing to find out if the UI achieves what users would expect in the zoo environment.


Couple of key notes

  • The display is designed to be on a screen size of 1920 x 1080 or larger. It can be viewed on smaller however the experience would not be considered accurate
  • Please allow a short time for the background video to start working.

Zoo environment design



The enclosures used in zoos are usually just variations of glass tanks with frames. As visitors generally include children, the displays need to be accessible to them as well.

Example of reptile enclosure at a zoo
Example of reptile enclosure at a zoo

The proposed design places the Interactive Transparent Display directly in front of the glass case housing the animals and a gap is left between the display and the glass. In theory this should reduce potential distress caused to the animals by the noise from touching or knocking on the display.

Zoo environment design.002 Zoo environment design.003

Zoo display design

In regards to enclosures with curved glass such as those for aquariums, the display would still sit in front of the glass.

Aquarium tank
Aquarium tank

Zoo environment design2.001

However, the law of refraction will need to be taken into consideration to ensure that the visitor does not see an overly distorted version of the contents of the tank.

Zoo UI Design

First Wireframes of the Zoo Interactive Transparent Display design. The idea is what the user will see if at a sea world centre watching a killer whale underwater. The concept could be transferred to a vast number of different animals on land or at sea.

Initial Log on screen once user interacts with screen

zoo_wireframe_0000_StartOriginal Design displayed content on users left in order to continue to view the animal in question

zoo_wireframe_0002_Size zoo_wireframe_0001_Main InfoHowever will need to identify whether the content could be to much of a distraction in this location, therefore an alternative method is created displaying the content below the main attraction.

zoo_wireframe_0004_Horizontal Location zoo_wireframe_0003_Horizontal Main InfoThe next possible step is to create an HTML mock-up prototype of the UI for user testing. This will hopefully identify a number of potential issues and resolutions including colour over different backgrounds, whether left display or bottom display is better, is the content generally a distraction or not etc.