London’s Royal College of Art offers one of the world’s most prestigious fine arts degrees. Each spring graduating students present their work in gallery shows, which are a crucial springboard for launching their professional careers. For the class of Spring 2020, however, COVID shut down the show.
The rapidly escalating pandemic forced the RCA to cancel the in-person exhibits and propose a virtual grad show in their place. The college’s soon-to-graduate students were upset but ultimately willing to work with a digital version of their traditional gallery exhibitions, given that London was headed into lockdown and there was little other choice. Their main concern: the college’s existing web site, they thought, was not up to the job of presenting their real-world artworks in a rich and robust virtual environment.
An ambitious undertaking
It was a reasonable concern. The existing RCA site offered a basic web page for each student with a bio and one image of their work, intended as a sort of digital calling card. How would this scale to support individual portfolio pages approximately 800 students, each one uploading up to 100 images, plus dozens of VIP guest curators hosting their own hand-picked galleries of graduate work? How would it replicate the hundreds of events that made up the traditional RCA gallery week that takes over many of London’s event spaces each spring? And could it handle the hordes of simultaneous visitors? A new site was needed to support this ambitious undertaking at scale — and it needed to be live in less than three months’ time.
The Royal College of Art called in media company Unthinkable Digital to come up with a solution. To build the site itself, the company hired MTJ.io, a three-person firm whose members had several important things in common: Each partner had previously built websites for large arts organizations and individual artists, and so knew how to handle the considerable challenge of maximizing the site’s image-handling capabilities. The agency went straight to Gatsby.
The MTJ team had to overcome some sticky problems. For one, they needed to create a large and visually rich site to replicate the art gallery experience as closely as possible. “We needed to provide that feeling that you can move and look and walk around, without any encumbering loading time or waiting,” says Alistair McClymont, the “M” in MTJ and a Royal College of Art alum himself. “For visitors to feel like they’re in the moment and can move freely between different works that catch their eye, just as they can wander at will in a real-world museum.”
There were other technical challenges, too. The need to unite multiple services and data sources, including a MongoDB database, in the site — while a totally separate team constructed the back end.
Though the site was complex, the team realized that content on these hundreds of student gallery pages would not be changing — the perfect use case for a static site. Also, the need to incorporate multiple services called for a headless approach, piping in data from the back end. And, most critically, the ability to work independently on their part of the project: “We needed a way to work where the back-end developers could work on their stuff, we’d work on our stuff, and we’d link up seamlessly.” But how to orchestrate all these moving parts? The team agreed right away that this looked like a perfect job for Gatsby.
“I had already used Gatsby for a half-dozen projects and know how fast Gatsby sites can be,” continues McClymont. “So right away I thought to make this ginormous degree show a static site, and all the bells and whistles you want with React, and stitch together all the different SaaS. That really sounded like Gatsby.”
Sanity check
While a team from Unthinkable took over the RCA site’s back end, McClymont, along with fellow MTJ musketeers Jonny Thaw and Daniel Jackson, began setting up a prototype incorporating the Sanity CMS as the transom for students to upload and manage their own artworks and pages.
Given all these stakeholders, flexibility was a core requirement. Each of the 850 graduating students would receive his or her own dedicated gallery page. The work spanned a wide variety of disciplines, from the most traditional — painting and sculpture — to cutting edge purely digital work. “One of the things we felt was quite important was to give the students control over how to present their work, instead of forcing everyone to fit their work into one single layout,” Jackson says. “So we had the idea of creating online ‘containers’ of their work. Each student could have up to 12 containers and configure them slightly differently — single column, double column, or something else — to customize their personal page layout.”
The team needed the site to be fast, in order to deliver that virtual version of the gallery hopping experience. But, with a delivery date just weeks away, they also needed the other kind of speed: development velocity. Gatsby delivered both.
“There are many ways of working with React components in general, but it was Gatsby that made it straightforward and easy for us to do, which was critical to pulling this off in time,” adds Jonny Thaw, MTJ.io’s creative technologist. “As a small team of three, we can subdivide labor quite happily. I can be working on something comfortably in Storybook, regardless of whatever work is happening at the same time with Ali and Daniel. Then we just plug it all together using Gatsby as that sort of orchestration layer.”
“It was incredible how we could all work independently. We were chatting constantly and integrating things with each other, each of us on our own piece of the puzzle,” says McClymont. “You can each work in your own little silo — but in a good way!”
Unfortunately, there were also a few of the bad kind of silos, too. “We were in control of some of the back end, but not all. Like there was a kind of legacy MongoDB thing which we had to integrate into this. That didn’t have capacity to do any of the editorial stuff, it just had student data,” explains McClymont. “But no worries because then we can grab Sanity, which is a really good fit for managing images, and stick that in. Some of our images are on Sanity, some on Cloudinary now, and with Gatsby it just doesn’t matter. It just works. And it works really efficiently and fast.”
“Gatsby makes integration of external services and multiple CMSs extremely efficient,” said Jackson. “The super fast and configurable Alogolia search integration was a particularly good example of how Gatsby was the orchestration layer we needed to mesh together all these content sources.”
Eleventh hour design
There was another unusual aspect to the project: MTJ was building the site’s front end, Unthinkable on the back end while yet a third group was actually in charge of design. A group of students, actually, who had won a contest sponsored by the college. “RCA decided it would be a really good idea to get the students to design the website to empower them, and that was a fantastic thing for them to do,” Jackson explains. “But it did mean we didn’t get the design until quite late in the project, so we had the work kind of back to front.”
The team treated it as a kind of research period. “We were waiting for the presentation layer to be defined, so in the interim we just played around with being able to execute almost anything that could conceivably be thrown at us,” explains McClymont. Ultimately, though, this ended up being a problem the team was glad to have faced. Having no notion of what the students might come up with, MTJ practiced building different versions of the site to prepare for whatever design the students would eventually present.
“It was really useful, because we found the answers to problems we would need to solve before we needed to solve them,” McClymont says. “We tried out loads of different versions of technologies and ended up stitching together two backends because of those trials.”
Having that enforced R&D period was good because the team was in some ways testing Gatsby’s limits, McClymont says. “This was not as huge as some other Gatsby sites, but there was this short window of extreme intensity. So I think we managed to break everything in different ways. Like, what is the limit of image uploading, what is the limit of Gatsby Builds, Preview. We broke Netlify, too, while we were at it,” he laughs.
As a result, the team encountered occasional event horizons where they pushed things as far as Gatsby could comfortably take them and ended up facing unexpected consequences. But whenever things got truly tricky, McClymont says, they were able to enlist Gatsby engineering help. “The day before launch, we got into quite a hairy moment,” says McClymont. “We hopped onto a video call and in about an hour we solved several major problems.”
Gallery go time
Once the RCA2020 site went live on the exhibition’s preview day, the accolades began rolling in. “The speed was massive. That was one thing that just blew us away,” McClymont says. “What the students got was maybe 10 times what we had anticipated giving them.” Within a month, one terabyte of images had been added to the site.
An estimated 30,000 viewers showed up on opening night, with many more in the months to follow. And now, instead of watching their shows dismantled after two weeks, students can count on having their sites archived for five years or longer. The college was so pleased with the site that they quickly retained MTJ for a new project. In January the trio launched a second Royal College of Arts site, one that exhibits students’ works-in-progress, using lessons learned from their inaugural project producing the RCA2020 virtual shows.
The trio’s breakthrough has brought the future not just to the Royal College of Art, but to other arts colleges in the U.K. While commercial galleries were ahead of the game in terms of developing and maintaining virtual exhibition sites, “Educational institutions have to do quite a bit of catch-up here, really,” Jackson says.
“Prior to last April, a lot of these university degree courses in the arts hadn’t really fully engaged with thinking through how to effectively bring their student presentations into the digital realm,” says Jackson. “The COVID crisis accelerated their digital evolution from what had traditionally been very physical, space-bound presentations.”
As MTJ.io launches new projects for university clients — something of a growing specialty for the firm — the team will take a second look at putting old-school back-end platforms such as Drupal and WordPress to work in a headless way. “So, we’ve kind of run full circle,” Jackson says. “But Gatsby’s staying right there in the middle.”