UX Designer + Researcher
1001 Stories Cover.png

1001 Stories

1001 Stories

An interactive map documenting stories about water and climate change.

UI Designer + Web Developer // Spring 2019

Overview

1001 Stories is a global storytelling project started by Devi Lockwood, a current editor and writer at the New York Times Opinion section. In 2014, Devi set out on a journey to document stories about water and climate change across the world. Thus far, Devi has documented 850 stories in 20 countries on 6 continents. In Spring 2019, Devi and I connected over our interests in mapping, and we discussed the possibility of creating an interactive map for 1001 Stories. I soon joined on as a designer and developer, along with Samia Bouzid (a multimedia storyteller) and Jeff DelViscio (a Knight Science Journalism Fellow), and we worked on bringing these stories to life.

Identifying the Right Platform

First iteration of the 1001 Stories map

First iteration of the 1001 Stories map

Maps can be a powerful medium for communicating geographic context. But different kinds of maps support different stories. The project started with a bare bones map of stories Devi had collected so far. However, the map lacked a visual emphasis on individual stories and didn’t support much user interactivity.

Problem Statement

How could we better represent narratives about water and climate change in their geographic context?

Part of our challenge were the technical limitations of this project. Building a map from scratch was less feasible, given the short timeline of the project. I ended up exploring several mapping tools to figure out which one had a low enough technical barrier yet high enough customizability. After exploring platforms like Carto, ArcGIS Desktop, and ArcGIS Story Maps, I decided on using a custom ArcGIS Story Map template that was built for Esri. I reached out to developers at Esri who were kind enough to share the code and template with me.

ArcGIS Story Map builder

ArcGIS Story Map builder

Custom-made ArcGIS Story Map

Custom-made ArcGIS Story Map

Crafting an Audiovisual Narrative

The next task was figuring out the layout and aesthetics of the map. A frequent tool I use for collaborating on projects is Are.na, which allows you to build collections of images, text, and any kind of link. I created an Are.na channel and asked our team to share visuals or links so that we could begin building an aesthetic vision for the map. Taking these visual inspirations into account, I worked on selecting fonts, color schemes, and iconography that could support the visual narrative of the map.

Our Are.na moodboard

Our Are.na moodboard

We chose Amatic SC as the header font to convey a handwritten, organic quality that resonates with the content of the stories

We chose Amatic SC as the header font to convey a handwritten, organic quality that resonates with the content of the stories

Rather than using standard location icons, we used water droplets to mark each storyteller’s origin

Rather than using standard location icons, we used water droplets to mark each storyteller’s origin

 

We began with a spare amount of content for each story, which included the storyteller’s name, location, and an audio recording of their story. However, we wanted to add another layer of exploration so that our audiences could easily browse through multiple stories and pick the ones they wanted to listened to. We decided to add short quotes to the top of each story page as well as an interactive Google Street View image of the storyteller’s location for both quick and interactive explorations of the stories.

Google Street View images were added for extra geographic context

Google Street View images were added for extra geographic context

Audio recordings of the stories were embedded into the story pages. Hosting audio recordings on SoundCloud allowed us to decrease map loading times.

Audio recordings of the stories were embedded into the story pages. Hosting audio recordings on SoundCloud allowed us to decrease map loading times.

The Final Map

Final Map 1.png
Final Map 2.png

Sharing the Stories

While the map would exist online, we also wanted to spread the word at a major local event: the Cambridge Science Festival. We had the maps available on iPads so that people could easily pick it up and interact with it. In addition, we designed post cards that featured images taken throughout Devi’s journey along with a QR code + link to the story map. We shared these postcards with passerbys throughout the event — and perhaps they were shared across the world.

1001 Stories Map.png
postcards 1.jpeg
science festival 2.jpg

Takeaways

  1. Different kinds of maps support vastly different kinds of stories.

    This one might seem obvious, but oftentimes the wrong kinds of maps are used to convey information. For example, a topographic map is not the right kind of map for sharing stories about individuals. Yet because of the lower barrier to creating maps with tools and templates, it’s easy to add some data to any kind of map and call it a day. The choice and layout of a map needs to be carefully considered and should be customized to the kind of narrative you’re trying to tell.

  2. Technical constraints are design considerations.

    I like maps a lot, but I’m no expert in making them. Considering the limited time and technical resources we had, we focused more on making more iterative aesthetic changes to the map template we had rather than creating something entirely from scratch. These changes added up in the end though and led to a unique version of the map.

  3. Know the medium of display that you’re designing for.

    Considering that this map had to be shared in a public space, we had to make sure that the map worked on a relatively portable device like an iPad. Luckily, the template we were working with was already mobile responsive, but in the future, I would consider the medium for display earlier on and design more intentionally with that in mind.