Responses by Upperquad.

Background: The COVID-19 pandemic and resulting quarantine have been two of the few truly global experiences of our lifetimes, a period that every individual, community, city and country has felt deeply and grappled with in their own way. Through moments of isolation and inspiration, we found a certain comfort in knowing that we were all experiencing and evolving within this situation together. At Home is an effort to document this unprecedented moment in time; it’s a collection of stories from people around the world, designed to help us connect, empathize and support one another through this surreal experience.

Over the course of twelve weeks, we conducted more than 60 interviews with makers in four cities. In this effort, we broadly defined a maker as anyone who creates and takes pride in their craft: painters, nail artists, business artists, mixologists, beekeepers, musicians and creators, among others. We started at home in Berlin and expanded to San Francisco, London and New York City in subsequent editions.

Core features: Smooth, editorial design. As a storytelling platform, we knew we wanted to take an editorial approach to the site. You’ll notice that the site scrolls horizontally, an intentional break from the normal vertical scroll that serves to reinforce the unique moment we’re in. We stack each city horizontally on the right like the spines of a book, each offering a new chapter of this pandemic story. Scrolling or clicking opens the chapter to reveal seven featured makers in that city with animations taking you seamlessly from one to the next.

Bold, intentional features. The gravity of the situation had a large impact on the design. The grand scale and placement of the name, “At Home,” is meant to feel grounded—almost ominously or overwhelmingly so. The landing page is intentionally stripped back of everything, allowing our core question “How are makers experiencing the effects of the global pandemic?” to linger with a pause. You’ll notice an asterisk element that appears subtly throughout. This small feature is representative of the virus, matching the sharpness of the headlines set in Cirka. An alarming bright red was chosen as an accent color and is often paired with the condensed Right Grotesk font to exude a sense of discomfort.

Photography. We were lucky to work with talented photographer Helge Mundt to capture portraits of the Berlin interviewees. With his help, this allowed us to provide a real, visual look at the situation in Berlin. Each maker was photographed from a distance either from the balcony or window, at home or in their private workspace.

Favorite details: The heartfelt, human stories are really the magic of this site. We feel very proud to have created a space where people felt safe enough to share their stories and express themselves fully. There’s a lot to discover: humor and sadness, hope and despair, and creativity and stillness. Individually, each story offers a new perspective, told through a distinct voice and lived experience. Together, they create a beautiful time capsule effect, a portrait of a moment in time.

Challenges: The rapidly evolving nature of the pandemic and its sheer unpredictability presented a challenge that is certainly not unique to this project—but a challenge, nonetheless. To ensure that the site felt relevant and meaningful, it was important to launch each chapter in a timely manner. By nature of how the virus spread and the way that different governments responded, each city experienced the peak of the pandemic on a different timeline. Getting in touch with makers at the right time and getting interviews out quickly was consistently top of mind.

The pandemic was also not the only force that was shaping this moment in time. The mass movement for justice began about six weeks into this project and led us to have some important conversations about our focus, our place and what we hoped this effort would achieve. While this project began with the question about how makers were adapting to the quarantine, Black Lives Matter and the broader movement for justice added another layer of meaning to it; documenting experiences and sharing stories at this moment in time felt particularly powerful. So we made some sweeping, immediate changes, reframing our project to focus less on the pandemic itself and more on its effects on the moment as a whole. Through language shifts in our interview format and our outreach, we took care to balance the project’s roots and origins with its evolving present and future.

Technology: The site was built on top of the Vue framework Nuxt.js with lightweight Markdown content files in lieu of a CMS. Our standard stack uses React, but we embrace internal projects as opportunities to experiment with other technologies. We did, however, generally stick to our usual preference for creating custom solutions from scratch—on the main overview page, we custom coded the majority of the complex “layered” horizontal-scrolling system, using GSAP sparingly to support implementing navigational transitions. Though it took extra work to create a custom cross-browser scrolling solution, it enabled us to get things exactly the way we wanted, which would have been much more difficult with an external library. Likewise, all of the site’s animations from page transitions to text hover effects were custom coded.