add images and videos

_projects/dd-image-tagging-tool.html

@@ -12,4 +12,34 @@
   url: "https://densitydesign.github.io/dd-image-tagging/"
 thumbnail: dd-image-tagging.png
 order: 5
----
+---
+<section class="project__summary">
+  <div class="summary__container">
+      <p>The image tagging tool is a javascript interface built on top of the <a class="external--link link--thick" href="https://clarifai.com/developer/guide/" target="_blank">Clarifai API</a> that let users tag a series of images with one of the image content recognition models developed by Clarifai.</p>
+  </div>
+</section>
+<section class="project__content">
+  <div class="section__title">
+    <h3>Process</h3>
+  </div>
+  <div class="section__body">
+    <p>For information designers and social scientists working with <a class="external--link" href="https://mitpress.mit.edu/books/digital-methods" target="_blank">Digital Methods</a>, 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.</p>
+    <p>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.</p>
+    <p>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 <a class="external--link" href="https://en.wikipedia.org/wiki/Comma-separated_values" target="_blank">csv</a> file and outputs another csv file with the results of the algorithm.</p>
+    <p class="paragraph--new">Clarifai was chosen for various reasons:</p>
+    <ul>
+      <li>it is one of the leading artificial intelligence companies specialized in computer vision;</li>
+      <li>their API is easy to setup and is free within reasonable limits;</li>
+      <li>it has a pool of categorization models that other companies lack.</li>
+    </ul>
+  </div>
+</section>
+<section class="project__content">
+  <div class="section__title">
+    <h3>Thoughts</h3>
+  </div>
+  <div class="section__body">
+    <p>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.</p>
+    <p>As future developments we could also improve the inputs it handles by also excepting images directly instead of just csvs.</p>
+  </div>
+</section>

_projects/densitydesign-fsds-14ed.html

@@ -12,4 +12,35 @@
   url: "https://densitydesign.github.io/teaching-dd14/"
 thumbnail: dd-website.png
 order: 2
----
+---
+<section class="project__summary">
+  <div class="summary__container">
+      <p>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).</p>
+  </div>
+</section>
+<section class="project__content">
+  <div class="section__title">
+    <h3>Process</h3>
+  </div>
+  <div class="section__body">
+    <p>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.</p>
+    <p>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 <a class="external--link" href="http://www.bruno-latour.fr/node/70" target="_blank">Bruno Latour</a> and others.</p>
+    <p class="paragraph--new">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.</p>
+    <div class="project__video">
+      <video autoplay="autoplay" loop="loop" muted="muted" onstart="this.play();" onended="this.play();">
+        <source src="{{ '/assets/videos/ddweb.mp4' | relative_url }}" type="video/mp4">
+        <p>Your browser doesn't support HTML5 video. Here is a <a href="{{ '/assets/videos/ddweb.mp4' | relative_url }}">link to the video</a> instead.</p>
+      </video>
+    </div>
+    <p>The inspiration for the visual elements comes from topographic maps with adaptations of grid lines, annotated borders and <a class="external--link" href="https://en.wikipedia.org/wiki/Contour_line" target="_blank">isohypses</a>. 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.</p>
+    <img class="project__image" src="{{ '/assets/images/ddweb02.png' | relative_url }}" alt="Header screenshot">
+  </div>
+</section>
+<section class="project__content">
+  <div class="section__title">
+    <h3>Thoughts</h3>
+  </div>
+  <div class="section__body">
+    <p>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.</p>
+  </div>
+</section>

_projects/privacy-and-black-boxes.html

@@ -8,9 +8,53 @@
 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
----
+---
+<section class="project__summary">
+  <div class="summary__container">
+      <p>“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.</p>
+  </div>
+</section>
+<section class="project__content">
+  <div class="section__title">
+    <h3>Process</h3>
+  </div>
+  <div class="section__body">
+    <p>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.</p>
+    <p>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:</p>
+    <ul>
+      <li>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;</li>
+      <li>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 <a class="external--link" href="https://www.predpol.com/" target="_blank">displacement of police forces</a> in a city to <a class="external--link" href="https://www.businessinsider.com/china-social-credit-system-punishments-and-rewards-explained-2018-4?IR=T#1-banning-you-from-flying-or-getting-the-train-1" target="_blank">social credit system scores</a>.</li>
+    </ul>
+    <p>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?</p>
+    <p class="paragraph--new">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 <a class="external--link" href="https://mitpress.mit.edu/books/digital-methods" target="_blank">Digital Methods</a>, I analyzed how the issue was represented by the scientific community (using <a class="external--link" href="https://www.scopus.com/home.uri" target="_blank">Scopus</a> as a proxy), by domain expert bloggers (Ars Technical and Medium), and by encyclopedic knowledge in different language spheres (Wikipedia).</p>
+    <img class="project__image" src="{{ '/assets/images/scopus.png' | relative_url }}" alt="Scopus analysis">
+    <p>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.</p>
+    <img class="project__image" src="{{ '/assets/images/location.png' | relative_url }}" alt="Google location analysis analysis">
+    <p>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.</p>
+    <p>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.</p>
+    <img class="project__image" src="{{ '/assets/images/recon.png' | relative_url }}" alt="ReCon experiment">
+    <p>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.</p>
+    <div class="project__video">
+      <video autoplay="autoplay" loop="loop" muted="muted" onstart="this.play();" onended="this.play();">
+        <source src="{{ '/assets/videos/fbtrex.mp4' | relative_url }}" type="video/mp4">
+        <p>Your browser doesn't support HTML5 video. Here is a <a href="{{ '/assets/videos/fbtrex.mp4' | relative_url }}">link to the video</a> instead.</p>
+      </video>
+    </div>
+    <p class="paraghraph--spacer">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.</p>
+  </div>
+</section>
+<section class="project__content">
+  <div class="section__title">
+    <h3>Thoughts</h3>
+  </div>
+  <div class="section__body">
+    <p>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.</p>
+    <p>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.</p>
+  </div>
+</section>

_projects/switzerland-istitutional-landscape.html

@@ -4,15 +4,66 @@
 team:
   - Independent Expert Commission
   - Tommaso Elli
-  - Andrea benedetti
+  - 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
----
+---
+<section class="project__summary">
+  <div class="summary__container">
+      <p>This interactive report, developed by DensityDesign for the Swiss <a class="external--link link--thick" href="https://www.uek-administrative-versorgungen.ch/home" target="_blank">Independent Expert Commission</a> (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.</p>
+  </div>
+</section>
+<section class="project__content">
+  <div class="section__title">
+    <h3>Process</h3>
+  </div>
+  <div class="section__body">
+    <p>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.</p>
+    <p>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.</p>
+    <p class="paragraph--new">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.</p>
+    <div class="project__video">
+      <video autoplay="autoplay" loop="loop" muted="muted" onstart="this.play();" onended="this.play();">
+        <source src="{{ '/assets/videos/swiss01.mp4' | relative_url }}" type="video/mp4">
+        <p>Your browser doesn't support HTML5 video. Here is a <a href="{{ '/assets/videos/swiss01.mp4' | relative_url }}">link to the video</a> instead.</p>
+      </video>
+    </div>
+    <p>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 <a class="external--link" href="https://www.uek-administrative-versorgungen.ch/interactivereport/en/glossaries/index.html" target="_blank">two glossaries</a> with a visual interface that helps navigate and contextualize the data:</p>
+    <ul>
+      <li>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;</li>
+      <li>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.</li>
+    </ul>
+    <p>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.</p>
+    <p>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.</p>
+    <p class="paragraph--new">The final report follows a <a class="external--link" href="https://pudding.cool/process/responsive-scrollytelling/" target="_blank">scrollytelling</a> 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.</p>
+    <div class="project__video">
+      <video autoplay="autoplay" loop="loop" muted="muted" onstart="this.play();" onended="this.play();">
+        <source src="{{ '/assets/videos/swiss02.mp4' | relative_url }}" type="video/mp4">
+        <p>Your browser doesn't support HTML5 video. Here is a <a href="{{ '/assets/videos/swiss02.mp4' | relative_url }}">link to the video</a> instead.</p>
+      </video>
+    </div>
+  </div>
+</section>
+<section class="project__content">
+  <div class="section__title">
+    <h3>Thoughts</h3>
+  </div>
+  <div class="section__body">
+    <p>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.</p>
+    <p>That said, some improvements could be added as potential future developments, mainly in the design of the interaction and the affordance of visualizations:</p>
+    <ul>
+      <li>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;</li>
+      <li>sometimes it’s still not clear enough that the user can interact with certain elements.</li>
+    </ul>
+    <p>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.</p>
+  </div>
+</section>