Responses by Studio Meta.
Background: Authors Victoria and Tom Styrbicki went on a 2,300-mile relay down the Mississippi River in 120 days. They built their journey around the concept of radical listening, learning and connecting with the communities living along the river. After listening to all these communities and these voices, their goal was to find the best medium through which to share these stories. Writing a book, creating a blog or publishing a blog were all ideas that came to the mind of the Styrbickis, but all lacked the dynamism of a human-powered journey. Thus came the concept of building an interactive website that conveyed stories with movement.
Design core: The idea of this platform was to highlight and share all the data collected during the Styrbickis’ journey through an interactive experience. We conceptualized a design language with Victoria that combines the characteristics of a travelog while keeping a scientific aspect with a focus on data.
The map view was designed as the experience’s central element, defining the concept’s identity. We worked closely with Victoria to evolve the art direction toward something minimal, going to the essence to house the content, data and stories. This search for minimalism reflects at all levels of the experience: the frames summarizing the days, the graphic style of the map and the layout of the stories to offer a consistent result and an immersive journey.
The animation of the title with particles draws inspiration from the alluvial soil deposited by surface water along rivers, floodplains and deltas like the Mississippi. The menu has an interesting feature: since it has an inverted superposition on the map that passes in pitched view, it can look very different depending on where you are in the river.
Time constraints: Designing the page in 120 days proved an interesting challenge. We had to give Victoria flexibility in her reporting to allow for the variety of content—text, testimonials, images, videos and audio clips—in an original, attractive fashion. So, we imagined a horizontal navigation that evoked the flow of the Mississippi. To house the broad variety of content, we designed an extensive library of components that adapts to the different types of stories as well as different devices.
Challenges: A technical challenge was translating the enormous amount of GPS-coordinate data into a fluid, curved path that goes along the riverbed of the Mississippi and gives the exact locations of where stories were gathered.
Navigation structure: For this project, we imagined two complementary ways of navigating between the stories. The first is set in time and space by retracing Tom and Victoria’s journey and presenting the stories day by day. For this, we created a minimalistic map that scrolls along the river’s curves using the GPS data from their travels.
The second has a more data-oriented, scientific approach. Our idea was to show how the river connects stories and communities by gathering content into themes. It is in a more dreamlike, infinite navigation—almost like diving deeper into the river—where the user discovers the social subjects the Styrbickis encountered on their journey. In this way, we created a network between stories to improve the navigation experience on the platform.
Technology: We build the front end with Nuxt. Everything on the map was done using mapbox-gl, and coordinates calculations and manipulations were done with Turf.js. The title animation is done in three.js, and the content is provided from a WordPress back end using the Rest API.
Browse Projects
Click on an image to view more from each project
#Relay #Voices #Communication #Arts
