28/10/2017

The Stories Behind a Line: A visual narrative of six asylum seekers’ routes to Italy

 

By Federica Fragapane, Information and Visual Designer and Alex Piacentini, UX/UI and Information Designer

 Believing in the communicative potential of data visualization, Federica Fragapane, a freelance information designer, felt a responsibility to use this potential to tell urgent stories. Along with Alex Piacentini, UX/UI and information designer, the pair created The Stories Behind a Line, a visual narrative of six asylum seekers’ routes from their homelands to Italy. Below, Federica and Alex share how they developed the project, which they’ve separated into five perspectives.

Part 1. Six stories behind six lines

Federica Fragapane

My purpose was clear from the beginning, I wanted to tell the stories of the journeys that asylum seekers have taken to Italy, communicating these through data that shaped them: number of days spent traveling, number of kilometers, transportations. I think that these data can be as simple, yet effective, in depicting the struggles of these experiences – they are part of everyone's everyday life, easily understandable and for this reason potentially powerful.

In 2016, I got in touch with CAS Migrantes, a reception centre in Vercelli, Piedmont. I discussed my idea with the centre staff and they asked asylum seekers who were hosted their if any of them would like to share their stories.

This is how I met M.B., S.S., M.D., A.L., S.W.G. and T.K., the six people who shared their journeys with me. During our meetings they talked about their routes from their homeland to the reception center, pointing out cities and place they passed through on a map. For each place I asked them how long it look them to reach it, what transportations they used, and how many days they spent there, as well as any other comments or memories they would like to share.

They talked about their exhausting journeys, and their painful memories, while I collected every piece of information. A.L., a 17 year old boy from Guinea, told me that at a certain point he had to walk through the Sahara desert to reach Libya. And M.B., who is 18 years old and comes from Ivory Coast, talked about how he got arrested as soon as he arrived in Tripoli.

Part 2. Drawing the lines

Federica Fragapane

Once I collected the stories, I designed the visual models to show them, and – in a second phase – I contacted Alex with the aim of creating an interactive storytelling piece.

My starting points were the six traveling lines: I wanted to create six visuals, shaped by the different personal memories.

Every person is represented by their own unique line, from their hometown to Italy. These simple visual elements have a meaningful story behind them. For this reason, I was sure to give the lines their own space, showing them at first as six black paths on a white background. But to give the lines context, it is also possible to reveal the maps under the lines through the visualization’s interactive components.

The represented data are extremely personal and tell six painful stories, so I decided to show them in the simplest and clearest way possible: using an horizontal line to visualize the days spent traveling and different types of dotted lines to represent the transportations.

In addition to the line-mode, I also worked on a second visual model, stretching the path to a vertical line and adding the travelled kilometers, in order to provide a clean, graphical version.

Remember those additional comments and memories? Over the visual there are a number of clickable red dots, which allow the user to explore these more qualitative data. Each of these dots enriches the project, providing a unique window into each story. For example, a comment made by S.W.G., 26 year old boy from Pakistan, who – at the end of our meeting – told me: “My mind is quiet now. I’m quiet because I'm safe and that's why I love Italy”.

Part 3. Designing the interface and interactive experience

Alex Piacentini

This is the point when Federica asked me to join the project. As a freelance designer, my work can potentially span many different fields and sectors, but I especially value projects that have the potential to generate a positive impact.

Around the line

Following Federica’s first intuition, we decided to design the interface around the lines, to preserve their primary visual and communicative role. The default view was stripped of every other element, keeping only the essential components: line, general information about the trip, like the person’s details, place of origin, basic stats and reason for leaving; and a navigation menu.

We also took the window size into account. The line is inscribed in a way so that it takes up the entire screen without any other distracting element. For the same reason, sections snap to the top of the screen when scrolling.

Map and distances

To give the visual more depth, we develop other view modes. For example, users can toggle the map layer to see the lines in their geographic context. Or, they can pass to a more analytical view called Distances, which converts the line into a straight segment, where everything is sized proportionally to distances (vertical) and travel/stay times (horizontal).

Responsiveness

The design is built around the element of a line that is always sized to fill the screen. To ensure that this element was maintained for different screen sizes we kept a minimum limit for the height.

Navigation elements and texts continue to follow this idea and are arranged by the two main layout types: text on the left column for desktops, and text on top for tablets or smartphones.

Colour

We decided to complement the line, as the main element, with a gradient that slowly fades through different shades of blue. The idea was to convey a sense of calm that, by contrast, highlights the urgency of the topic. Plus, it evokes a sense of vast horizon, sky, and sea, and with it a hope for progression.

Part 4. Building the site

Alex Piacentini

From a developer perspective, the data collected by Federica was turned into an array of six JSON objects (the process of arranging such a delicate and personal kind of information into a json file felt weird to say the least…). Each story was coded with its own metadata, such as name, age, total distance, and days, as well as a general comment with the reason that pushed the person to leave, and, most importantly, geographic coordinates to draw the lines.

The site was built using react and some d3 modules as utilities for things like scales and reading in the data. The lines are composed of two kinds of segments (via road or sea) depending on the transport data. The majority of segments via road were built using Google’s directions API, which also returns the distances of the steps for each trip.

Part 5. After the line

Federica Fragapane and Alex Piacentini

This project aims to share the stories of the people who leave their country looking for a better life, using data visualization as a way to give them a voice – and, hopefully as a generator of empathy.

We didn’t want to give the impression that their arrival in Italy coincides with a happy ending to their journeys, because this is not the reality. Asylum requests are processed very slowly and none of the people we have interviewed know whether their asylum claims will be accepted.

We would like to keep on working on the project, visualizing what happens after each person recieve’s their response, and by adding more stories and lines.

For M.B., S.S., M.D., A.L., S.W.G. and T.K. – and for the thousands of other aslyum seekers that, like them, risked everything in search of a better life – we hope there will be good stories after their lines, that are yet to be told.

About the authors

Federica Fragapane is an award-winning Visual and Information Designer freelance. The Stories Behind a Line is a personal project she started working on in 2016, interviewing a group of asylum seekers arrived in her hometown. She strongly believes in the communicative potential of data visualization and she's constantly testing it. Follow Federica on Twitter here and explore her portfolio here.

Alex Piacentini is an Italian UI and information designer working with graphics and code. His work consists in creating novel digital and cross-media user experiences for international clients on projects that have strong innovative, research or experimental connotation for the publishing, cultural and educational fields. Visit Alex's website here.

Explore The Stories Behind a Line here.

Comments