+
+
+ {{ content }}
+
+
\ No newline at end of file
diff --git a/_projects/dd-image-tagging-tool.html b/_projects/dd-image-tagging-tool.html
new file mode 100644
index 0000000..84fb37e
--- /dev/null
+++ b/_projects/dd-image-tagging-tool.html
@@ -0,0 +1,45 @@
+---
+title: DD image tagging tool
+subtitle: An interface to the Clarifai API
+team:
+ - DensityDesign Research Lab
+year: 2018
+role: design and development
+technology:
+ - Clarifai API
+link:
+ title: densitydesign.github.io/dd-image-tagging
+ url: "https://densitydesign.github.io/dd-image-tagging/"
+thumbnail: dd-image-tagging.png
+order: 5
+---
+
+
+
The image tagging tool is a javascript interface built on top of the Clarifai API that let users tag a series of images with one of the image content recognition models developed by Clarifai.
+
+
+
+
+
Process
+
+
+
For information designers and social scientists working with Digital Methods, content recognition algorithms can be very helpful in categorizing large corpuses of images. They can be employed, for example, as a way to place images in a space based on their content similarity, or to roughly categorize and filter only the images relevant to the research.
+
This small project comes from the need of having an easy interface where researchers could use a content recognition algorithm without the burden of having to learn how to code or how to call an API. While inside the lab we had a routine set up to perform the various operations needed to label a corpus of images, this was not ideal in our teaching activities. It implied a series of scripts that took time and know-how to learn and made the passage of knowledge, especially during workshops, challenging and often not very effective.
+
The tool is specifically designed to work in combination with spreadsheet softwares as they are, most of the time, what comes before and after in this kind of research processes. This is why the interface accepts only a list of image urls in the form of a csv file and outputs another csv file with the results of the algorithm.
+
Clarifai was chosen for various reasons:
+
+
it is one of the leading artificial intelligence companies specialized in computer vision;
+
their API is easy to setup and is free within reasonable limits;
+
it has a pool of categorization models that other companies lack.
+
+
+
+
+
+
Thoughts
+
+
+
The image tagging tool works well for its intended use, but it could be greatly improved. Its aim is really focused on the specific task it was created for, making it less flexible to change. For example, a research question that requires an output formatted differently would render the tool useless.
+
As future developments we could also improve the inputs it handles by also excepting images directly instead of just csvs.
+
+
\ No newline at end of file
diff --git a/_projects/densitydesign-fsds-14ed.html b/_projects/densitydesign-fsds-14ed.html
new file mode 100644
index 0000000..d2415d4
--- /dev/null
+++ b/_projects/densitydesign-fsds-14ed.html
@@ -0,0 +1,46 @@
+---
+title: DensityDesign F.S.D.S 14th ed.
+subtitle: A website to showcase student's work
+team:
+ - DensityDesign Research Lab
+year: 2018
+role: design and development
+technology:
+ - jekyll
+link:
+ title: densitydesign.github.io/teaching-dd14
+ url: "https://densitydesign.github.io/teaching-dd14/"
+thumbnail: dd-website.png
+order: 2
+---
+
+
+
Every year, the results made by students of the Final Synthesis Design Studio run by DensityDesign Research Lab are showcased in a website that gathers all the material produced during the course. This was the redesign made for the 14th edition of the course (a.a. 2018-2019).
+
+
+
+
+
Process
+
+
+
During the course, students have to face ongoing and controversial issues – such as migration, hate speech, misinformation, climate change, etc. – by using Communication Design and Data Visualization to explore the given topic, share research methods and results and finally engage with a public. In this process, students will realize that their perspective is situated in a network of agents and relationships by which a controversy is defined and, at some point, they will also have to place themselves in this network when visually communicating the results.
+
This idea is what stands behind the course’s motto “You are here” and is borrowed from the social sciences, namely the methodological approach of actor-network theory developed by Bruno Latour and others.
+
Conceptually the redesign of the 14th edition’s websites lays its foundations on these core concepts and builds on the metaphor of the map, an imagined map where the controversy is the territory and actors and relations are the features of said map. “You are here” is both the ability to orient yourself in the map as well as the realization that you are now a feature of the map.
+
+
+
+
The inspiration for the visual elements comes from topographic maps with adaptations of grid lines, annotated borders and isohypses. The small dot wondering in the header section of the home page wants to be a reminder of the path followed by students while getting to know their controversy.
+
+
+
+
+
+
Thoughts
+
+
+
I expect next year’s version to evolve and maybe be completely different again, as this is the nature of this course. Every year it’s meticulously reshaped and adapted in order to experiment new ways and improve.
+
+
\ No newline at end of file
diff --git a/_projects/privacy-and-black-boxes.html b/_projects/privacy-and-black-boxes.html
new file mode 100644
index 0000000..d0fbd44
--- /dev/null
+++ b/_projects/privacy-and-black-boxes.html
@@ -0,0 +1,60 @@
+---
+title: Privacy and black boxes
+subtitle: Communicating the opaque processes produced by digital technology
+team:
+ - "-"
+year: 2016
+role: personal M.Sc. thesis
+technology:
+ - d3.js
+ - nightmare.js
+ - node.js
+link:
+ title: politesi.polimi.it
+ url: "https://www.politesi.polimi.it/handle/10589/133042?mode=full&submit_simple=Show+full+thesis+record"
+thumbnail: privacy.png
+order: 4
+---
+
+
+
“Privacy and black boxes” is my master’s thesis, a journey documenting my explorations of the relationship between communication design and technology, with a special focus on those technological processes that were made invisible and opaque by technical complexity or by design.
+
+
+
+
+
Process
+
+
+
The issue of “opacity” in technology has been increasingly relevant to me, even more so as our society tends to believe that technology is or will soon be the solution to the world’s problems and thus tries to implement it in almost every aspect of life. By opacity, I mean the difficulty or inability to analyze, understand or control part of a technological process that somehow affects us.
+
In my thesis I was particularly interested in two examples of opaque processes, both tied to our production of digital traces (data) when we use digital devices such as iphones, computers, etc. and both still missing a consolidated and standardize legal framework:
+
+
the collection of personal data by apps, programs and devices, with often the impossibility to know or understand the exact information that is being monitored, the extent and the intentions;
+
the use of this information (along with other data) to train machine learning algorithms that are then used to inform decisions that can have profound impacts in our life, from displacement of police forces in a city to social credit system scores.
+
+
As a designer, my research questions in investigating these issues were mainly methodological: How can we map processes that are invisible, opaque, or protected by legal barriers? How these characteristics influence the design process? Are the tools and methods that we use enough or do we need to modify them or make new ones?
+
The first step was to perform an adequate literary review of the topic of data and privacy, as well as to set up a series of experiments to see what kind of data I could get about myself, for example. Embracing the approach of Digital Methods, I analyzed how the issue was represented by the scientific community (using Scopus as a proxy), by domain expert bloggers (Ars Technical and Medium), and by encyclopedic knowledge in different language spheres (Wikipedia).
+
+
I also tried to get as much information as possible from my social media accounts, focusing mainly on what I could see by retrieving all the location data Google had on me.
+
+
Once I was better acquainted with the issue, I had the great opportunity to collaborate with two groups of people that were working exactly on the two aspects that interested me and both were happy to have a designer that could help them.
+
The first was a team of researchers from the Computer and Information Science department at Northeastern University, lead by David Choffnes. They were developing an app, ReCon, that could monitor and block any personally identifying information requested knowingly or unknowingly by apps on a user’s phone. Here I tried to design an interface that introduced the user on how ReCon worked and that exposed the data collected, giving back the user control on what to share.
+
+
The second collaboration was with a group of activists led by Claudio Agosti that, among other projects, is developing a tool called facebook.tracking.exposed. At the time the aim of the project was, as the name implies, to try to exposed the News Feed algorithm used by Facebook by showing how it affected the user experience with the platform. I thus tried to design an interface that could present each user their feed from a different perspective, highlighting changes in ranking, typology of posts, evolution in time, etc.
+
+
+
+
In both projects my main objective was always to design solutions that could remove at least in part the veil that covered these invisible processes covered by technological complexity.
+
+
+
+
+
Thoughts
+
+
+
The experimental nature of the thesis made my journey necessarily a work in progress and also highlighted the dire need of new methods and tools to investigate the opaque processes of collection and use of personal data.
+
This was nonetheless a very productive starting point in the analysis of this context from the perspective of a designer, which underlined a great opportunity for communication design: we need to keep working on solutions that can put people in the position to make informed choices about the technological environment they live in.
+
+
\ No newline at end of file
diff --git a/_projects/switzerland-istitutional-landscape.html b/_projects/switzerland-istitutional-landscape.html
new file mode 100644
index 0000000..5bd2559
--- /dev/null
+++ b/_projects/switzerland-istitutional-landscape.html
@@ -0,0 +1,69 @@
+---
+title: Switzerland's institutional landscape 1933–1980
+subtitle: An analysis of administrative detention through data visualization
+team:
+ - Independent Expert Commission
+ - Tommaso Elli
+ - Andrea Benedetti
+ - Michele Mauri
+year: 2017
+role: design and development
+technology:
+ - d3.js
+ - node.js
+ - OpenRefine
+link:
+ title: toxicwasteroutes.github.io
+ url: "https://toxicwasteroutes.github.io/"
+thumbnail: switzerland.png
+order: 3
+---
+
+
+
This interactive report, developed by DensityDesign for the Swiss Independent Expert Commission (IEC) on Administrative Detention, was designed to display part of the research done by the commission in order to both present their work to the general public in Switzerland as well as to make it available to other researchers interested in the study of the phenomenon.
+
+
+
+
+
Process
+
+
+
As most information design projects, a considerable part of the work was dedicated to get the data ready to be used. Namely, since IEC’s researchers had to collect and categorize a set of registers made by different institutions in different points in time from 1933 until 1980, all the data had to be reformatted and made uniform.
+
Here in particular the main challenge was to assign a unique id to each institution because, in those 60 years, some changed typology, location or were either combined in a bigger cluster or split up in sub-institutions. Moreover, the administrative boundaries of Switzerland changed through time, with the creation or evolution of its cantons. Thanks to the combined effort of the research lab and the commission we were able to reconcile each institute with an id and a historical path.
+
In terms of design, the aim of the report was two-fold: on one side it needed to inform Swiss citizens about the use of administrative detention up to 1981, while also providing a reference for other research groups and scholars for their publications. For this reason the final website was designed to keep a connection between the narrative sphere and the academic sphere by having each element of all interactive visualizations linked in a glossary to the original data, ready for citation.
+
+
+
+
This element was key for both partners because it can be a challenge to present the original data behind an information visualization artifact in a way that is usable by others than the creators of said artifact. Thus, we designed two glossaries with a visual interface that helps navigate and contextualize the data:
+
+
a glossary of institutions, which lists all structures that where at some point used as detention facilities while showing their geographical location and their evolution in time;
+
a glossary of the legal framework, which helps to place in context how laws, acts, etc. with different scopes (cantonal, federal, international) and in different cantons affected the phenomenon throughout its history.
+
+
If the need for a source of citation was very clear from the commission requests, much freedom was given to us in terms of what should – or would be interesting to – be shown in the report. Since the early stages of the project then, numerous hypotheses and explorations were iterated in close collaboration with them to decide what, how and in which order was best to present the data available.
+
One thing that really emerged was that geography – by being a proxy of cultural differences – was a major component in the administrative detention’s history, both in how it affected the distribution and characteristics of the institutions as well as in the relationship between different facilities.
+
The final report follows a scrollytelling approach with interactive visualizations that are introduced and evolve with the scrolling of a textual explanation. One of the design challenges was to represent all the institutions geographically without aggregating the ones that belonged to the same city or anyhow too close together: they needed to be shown singularly to emphasize the breadth of the phenomenon as well as the existing patterns between their location and their typology, religious affiliation and accepted genders, while keeping the visualization as legible as possible. We ended up with an acceptable compromise where institutions are slightly repositioned geographically every time they overlap.
+
+
+
+
+
+
+
+
Thoughts
+
+
+
The interactive report was very well received by the members of the commission as well as their scientific community and it’s now touring (at the time of writing, spring 2019) around Switzerland in conferences and events.
+
That said, some improvements could be added as potential future developments, mainly in the design of the interaction and the affordance of visualizations:
+
+
some of the more abstract visualizations (especially the matrix) take quite a long time to be interpreted so they sort of break the flow of the narration;
+
sometimes it’s still not clear enough that the user can interact with certain elements.
+
+
We tried to limit these issues by providing examples and explanation boxes in the text, but we could potentially find better solutions that don’t need to interrupt the narrative structure.
+
+
\ No newline at end of file
diff --git a/_projects/toxic-waste-routes.html b/_projects/toxic-waste-routes.html
new file mode 100644
index 0000000..747834e
--- /dev/null
+++ b/_projects/toxic-waste-routes.html
@@ -0,0 +1,75 @@
+---
+title: Toxic waste routes
+subtitle: Tracing the global path of hazardous garbage
+team:
+ - Guia Baggi
+ - Zanna McKay
+ - Michele Mauri
+year: 2016
+role: design and development
+technology:
+ - d3.js
+ - OpenRefine
+link:
+ title: toxicwasteroutes.github.io
+ url: "https://toxicwasteroutes.github.io/"
+thumbnail: toxic-wastes.png
+order: 1
+---
+
+
+
"Toxic waste routes" is a joint project between DensityDesign Lab and Guia Baggi, aimed at enhancing transparency on toxic wastes movements across the world. The current tool is a first prototype based on Basel Convention annual reports, and the visualization reflects data features: inconsistencies and missing reports are often the norm, and there is a clear need for a better data transparency on the topic.
+
+
+
+
+
+
+
+
Process
+
+
+
The project posed a series of challenges that had to be overcome in order to create a meaningful design. The data provided by the Secretariat of the Basel Convention were partial and inconsistently formatted due to lack of rigor by submitting countries.
+
Furthermore, the Convention's website collects an archive of all the reports submitted in the past, but the structure of the archive has changed during the years, making it difficult to easily get what we needed. The complete dataset was gathered by italian journalist Guia Baggi and later cleaned and merged with additional data (countries informations, geo coordinates, etc…) to make it accessible to work with. In the end we focused on the type and the amount of hazardous waste traded, since they were the core of the dataset as well as the most consistent data throughout the corpus.
+
A second issue was choosing if it was best to show only the exports, the imports or both at the same time. Even if in the overall picture representing both flows would result in doubling the data, at the country level having both informations helps to highlight behavior patterns: countries that are only exporting, countries that did not submit the annual report but show imports data based on other countries' report, etc…
+
Initially we also wanted to emphasize the movements of cargos between nations, in order to single out those exchanges that were taking thousands of kilometers to complete. Later on, after various attempts, the feature was dropped mainly for two reasons:
+
+
we didn't know the actual route taken by the cargo nor the means of transportation, so the animations could have induced users to misleading assumptions;
+
showing the movements on a global scale cluttered the visualization.
+
+
The last challenge was to maintain both the temporal and spatial dimensions of the phenomenon.
+
After a few iterations of different visual models, we went with a mixed approach: treemaps, representing the amount of waste related to each country, are arranged in space as if they were part of a Demers cartogram hence simulating as closely as possible the relative position of countries on a geographic map. This raised a new challenge: a round of user testing sessions brought up the need to bridge the gap of abstraction between the visualization and a real map. For this reason the user is introduced to the final design through a sort of tutorial where countries are first placed on a map and then “transformed” step by step in treemaps, introducing one at a time all the visual encoding variables.
+
The data can then be filtered by year and by category of waste.
+
+
+
+
By clicking on a single country, a more in-depth view is provided. The color of the treemap divides the imports from the exports, while the two different levels of subdivisions highlight where the waste was imported from/exported to (level 1 — solid border) and what kind of waste were moved (level 2 — dashed border).
+
+
+
+
+
+
+
+
Thoughts
+
+
+
The tool is a good first prototype for the exploration of the Basel Convention data and it let us experiment with different visual solutions, testing their effectiveness in that particular situation. We can find of course some drawbacks:
+
+
this level of abstraction makes it difficult for the user to perceive the countries (even with the help of the tutorial);
+
in order to fit all the treemaps on the screen, we had to compress all the values in a relatively small range, skewing a bit the relative dimensions of the nations. For the same reason the user has to click on each country to get that additional layer of information that would have been great to have just in one view;
+
some more work has to be done to improve the performance of the tool, especially tweaking the force layout that governs the position of the treemaps.
+
+
As further steps it would be interesting to find a better way to highlight specific cargos in order to trace them better on the map, as well as adding the actual route of every waste movement with animations to have a better understanding of the phenomenon.
+ 
+ 
+ 
+ 
+