Loading ...

Responses by Matt Nicholson, director and creative technologist, Olson.

Background: This is a living archive of stories from UK-based National Health Service (NHS) key workers bearing the brunt of the COVID crisis. The site encourages others to share their accounts of the pandemic or to better understand the impact it has had on these workers—and as a result, to help support their needs.

Larger picture: As a voluntary initiative, the role of the site was really to enable these stories to be heard. The site itself supports a book of accounts that we have put together in order to create a snapshot of this moment and remember the sacrifices they’ve made during this crisis. However, there is also a larger narrative about mental health, both for NHS workers and for society in general; the project doubly raises awareness of the impact that stress and pressure is having on our mental health and, as such, how we interact with each other in our community.

The site also provides resource information to other organizations working in the mental health space, as well as for campaigns that improve NHS pay. There have been recent announcements stating that, despite the sacrifices these essential workers have made during COVID, the NHS would only increase their pay by 1 percent.

Design core: The set-piece interaction of the site is an infinite canvas of quotes from the contributors’ stories. You can drag and scroll the canvas infinitely in any direction. This “infinite wall of emotion” was designed to create a sense of the scale and impact of the accounts, as well as to reflect the number of the many untold stories that will never be captured. The site is minimal and pared back, giving presence to the accounts themselves.

In places, the site has a book-like quality—wherever possible, it echoes a printed book that has been produced alongside the website—and relies heavily on typography to create structure. The design benefits from a beta release of the typeface Castling by independent UK-based type foundry Souvenir Typefaces, who donated it to the project.

Favorite details: The site exists largely as a container for these remarkable stories. As such, the strongest feature is the ability for the design to sensitively honor these accounts and not try to overembellish them. There is a restraint and a humility to the design, enabling the stories to take center stage. The infinite canvas engenders immersive interactions and evokes emotion without being overly playful, which is important when dealing with powerful content like this.

Challenges: Collating the stories, interviewing the contributors, and preparing, editing and proofing all the content has been in progress almost as long as the COVID crisis itself. The project is the culmination of a huge amount of behind-the-scenes work by the small editorial team to capture the accounts and prepare them for publication.

Time constraints: It was important to complete the launch the site around the one-year anniversary of the United Kingdom’s first lockdown, a poignant reminder to people that although society has been fatigued by COVID restrictions and desperate for the next opportunity to socialize, the NHS workers have been on the front line of the crisis this entire time.

Divergent paths: It might be interesting to explore a way of letting visitors submit their own accounts live or anonymously to contribute to the wall of emotion in real time. But it would be a challenge to balance live content with editorial moderation and ensure that the site retained its tone and deference.

New lessons: Perhaps not a lesson but a validation that less is often more. Let the content do the talking.

Navigation structure: The main navigation is very straightforward, but the infinite grid of quotes was intentionally more immersive. We wanted people to get lost in the raw accounts and be moved by the stories. By loading random quotes in all directions, this infinite wall of emotion reflects the scale and severity of the crisis. When expanding the stories, we wanted them to be loaded modally so as not to lose the user’s position in the canvas, enabling them to return there and continue exploring.

Technology: The site uses Primsic, a headless CMS to store the growing archive of accounts, then renders those using a React front end. Framer Motion manages and orchestrates transitions, and the React UseGesture and use-spring hooks capture interactions and translate those into fluid motions when moving the infinite grid.

frontline.site

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In