Last summer I had a great opportunity to work at the Baltimore Interaction Design Firm, ID5. During my time there I designed and built a virtual tour for the State University of New York at Potsdam.

The tour needed to be able to capture the experience of the school for prospective students who are not able to visit. The school also wanted to avoid the typical cliches and create an engaging interactive experience.

SUNY Potsdam Virtual Tour, Designed by Anthony MattoxScreenshot of the SUNY Potsdam Virtual Tour. Click to Enlarge.

The application was designed to be fit into the Potsdam website. It showcases the broad range of resources and opportunities and also the cohesiveness between different areas of the school. The basis of the application is a collection of interconnected concepts and components of the school. These elements exist as objects in a simulated physical system. Clicking one element reveals related topics. Each object contains images, video and other detailed information.

As you move through the tour, the system organizes itself based on the connections between elements. Users can also save particular elements by dragging them to the dock in the bottom left. Saved elements can be quickly re-opened or shared as a group to a friend.

SUNY Potsdam Virtual Tour, Designed by Anthony MattoxScreenshot fo the SUNY Potsdam virtual tour showing images and video within a node. Click to enlarge.

Technical Jazz

The tour is built in Flash (using Flash Pro CS3 and CS5 (thanks ADAA!)). A CMS, which I built with PHP and MySQL with the CodeIgniter framework, allows SUNY Potsdam to edit the tour, creating and linking nodes and adding images, video, and maps within them. Adobe Illustrator was used to design the application and create graphic elements.