Responses by Rikke Agersnap, account director, Hello Monday.

Background: The Bartlett School of Architecture is one of the world’s most diverse, innovative and creative places to study architecture. Every summer in its largest annual event, the Bartlett Summer Show celebrates the work of more than 700 students.

This year, due to the COVID-19 pandemic, the Bartlett Summer Show could understandably not be held in its usual format. We therefore set out to create an immersive digital show that could position the Bartlett as the cutting-edge institution it is while ensuring that students can showcase, celebrate and share their work in the best way possible.

Design core: The digital exhibition features a combination of 3-D exhibition rooms with smooth transitions to 2-D presentations of each exhibited work.

Time constraints: We created the website in less than three months, which was by far the most challenging aspect of the process. We also needed to “build the ship as it was sailing” because the site needed to collect work from more than 700 students, so we needed to create work pages first and then develop a setup that would enable the content management team to start uploading content while we worked on the implementation of the site.

Navigation structure: In order to create an experience that felt authentic, we considered how the Bartlett Summer Show is normally physically navigated and abstracted these elements to their fundamental shape and function for use in a digital context.

The resulting digital building blocks enabled us to create a virtual showcase reminiscent of the physical experience without being a literal translation of it. On landing, vertically stacked “floors” represent the different programs and units, each one acting as an entrance to its own exhibition “room” that users can freely explore.

Technology: The site is a hybrid of traditional 2-D technologies and WebGL. The WebGL portion of the site is powered by three.js, which is primarily used to display 3-D exhibition spaces. We also took advantage of Cinema4D to design and layout the walls in the exhibition space, which were later brought in via GLB files. On the back end, we used Contentful to manage the more than 600 student projects seen in the entire exhibition. We also utilize the multiuser component pusher in the 3-D rooms, so you can watch other users move around and view the variety of projects in real time.

Special features: One of the things that makes this site special is the blending of the 3-D world with the 2-D pages. Making a full 3-D experience is fun for users, but combining that with digestible content in a more traditional form was a challenge. For example, once a user selects a project, they are seamlessly brought into a traditional 2-D scrolling page and vice versa. The marrying of these two worlds and making it feel effortless took quite a bit of precision and 3-D math to get perfect.