Click to load

Grad Studies Virtual Tour

Client: Emily Carr University

Roles: UI Design, Frontend Development, Photograpy, Photo Editing

Team: Phoenix Oliva

Problem

A significant portion of students at emily carr university are international, out of province or outside the city. This makes it logistically difficult to get a sense of the space and amenities of the university. This has only been amplified by the Covid-19 pandemic.

Solution

Create a virtual 360 panorama tour of the space that can be viewed within a web browser. Along with information about each room, prospective students can get a sense of the school and what amenities will be available to them.

The Tour

Working with the student services department we developed a tour of the locations most pertinent to potential graduate students. This included most of the shops, labs, and equipment available to them. Hi-resolution photos were taken of all the spaces using a DSLR and Nodal Head then stitching them together.


An HTML5 tour was then built using the Pano2VR software. A custom interface was built reflecting the needs of an expansive multi floor tour. As well as being informational the tour aimed to also aid in navigation of the physical building.

An HTML5 tour was then built using the Pano2VR software. A custom interface was built reflecting the needs of an expansive multi floor tour. As well as being informational the tour aimed to also aid in navigation of the physical building.

Key Features

Information Tab

An information tab was implemented to display information about each room. This way information would be in the same spot in each location. It could also be hidden so the view of the panorama could be unobstructed.

Floorplan

A map of the university was included to aid in navigation. Each location had a selectable hotspot allowing a viewer to immediately jump there. The multiple floors of the school required buttons to switch between them.

Mobile / Responsive Interface

Of course, the ubiquity of smartphones requires all web experiences to consider these mobile platforms. In this case the map by default had to be hidden with an option to open it. Gyroscope functionality was also enabled for a more immersive experience.