Finding Sanctuary

 

Finding Sanctuary

Background

New York is a “sanctuary city,” but what that means to 8.5 million New Yorkers defies neat explanation. In light of President Trump’s crackdown on sanctuary cities, our goal was to create a piece to better connect readers with the concept of ‘sanctuary.’ 

Initial exploration of ‘sanctuary’ for multimedia website, ‘Finding Sanctuary.’

Initial exploration of ‘sanctuary’ for multimedia website, ‘Finding Sanctuary.’

Methodology

At first, we thought the best method to define sanctuary was to follow the journeys of six New Yorkers who have found – or continue to seek sanctuary. We first thought of sanctuary as a figurative journey, a process and path one takes instead of an end in itself. We profiled six people: a Palestinian American activist, a Holocaust survivor, someone who feeds the homeless, an undocumented filmmaker, a migrant from the deep South, and someone who was born in an internment camp.

I was the product manager of the site, leading web design, front-end development and wire-framing. The goal of the website had to answer the question: “What is sanctuary?”

With this idea, we decided to visualize a figurative journey of each person with visual timelines, or map lines that represent journey paths. We mocked up designs of a visual timeline for each individual. The timeline would have 3-5 markers with stories that signified moments of “sanctuary” for that person.

Mockups of a journey map for each person profiled.  The maps would intersect where stories of those profiled had common themes with another individual. 

Mockups of a journey map for each person profiled.  The maps would intersect where stories of those profiled had common themes with another individual. 

Iterations

We didn’t end up going with this method of journey mapping. As we got deeper in our reporting and user-tested our mockups, our initial prototypes changed. We realized that while visual map might be aesthetically pleasing, it wasn’t serving the purpose for the reader to get to the root of what “sanctuary” means. We wanted to zoom in, deeper into each subject’s story, instead of zooming out on a figurative journey map. Since we were designing for mobile, abandoning this idea led to a cleaner, more friendly interface. The new homepage would show intimate profile portraits of each person, and a swipe-through menu to scroll through who you choose to read about.

Homepage. 

Homepage. 

An iteration of a character page for mobile, drawn by Stephanie Ho. Each character page starts with a video element, and automatically scrolls down to either writing, data visualizations, 360 video, or a map. 

An iteration of a character page for mobile, drawn by Stephanie Ho. Each character page starts with a video element, and automatically scrolls down to either writing, data visualizations, 360 video, or a map. 

An InVision mobile prototype of our homepage. 

An InVision mobile prototype of our homepage. 

IMG_4734.JPG

Here’s a preliminary mockup of our final product. It starts with an introduction video, and leads to a homepage, where you can swipe between each person. Clicking on each person’s name leads to his or her own page, where you can read and watch videos about their journey to sanctuary.  Each page houses its own multimedia story incorporating data visualizations, video, 360, or written text – depending on what their story required. We abandoned page 3, a video animation of a map with each person's homeland with lines to NYC. Lastly, it includes an about page.

Tools

Some stories lent themselves to 360 videos, and others to data visualizations. Digital tools we decided to use – whether an interactive map or a video – were never the end-goal themselves. Instead, tools used were the means to an end to tell each story in the best platform it required.

The final product used 360 video, standard video, data visualizations with JavaScript and Tableau, jQuery, and words.

Constraints

Time was the biggest constraint. Since this project had to be completed over the course of four months, picking and choosing what was essential to the function of the piece was a process in itself. Ultimately, we nixed excess features like drop-down menus and scroll functions. In all, less time for things outside the scope of our goals made the end result a more focused narrative journey.

Many of our teammates were new to skillsets like filmmaking and JavaScript. Our philosophy was to bring skills, share them, and learn by doing. 

Awards

Finding Sanctuary won an Emmy, two Horizon Interactive Awards, College Photographer of the Year award, and a Webby nomination. Visit Finding Sanctuary here.

Design Highlights

A map visualization showing the migration and number of people in Japanese internment camps from June 1942 to March 1946. 

A map visualization showing the migration and number of people in Japanese internment camps from June 1942 to March 1946. 

An interactive slideshow of sharecroppers in the American South. 

An interactive slideshow of sharecroppers in the American South.