alma — algorithmic matter

Everyday we let algorithms take decisions on our behalf. Alma is a kit of 3 serious games designed to help us understand Facebook Newsfeed, Google PageRank and Siri's algorithms. Alma lets you play with the algorithms using physical tokens and digital interfaces. Alma is about learning by manipulating.

alma is a 6 months project, you can read the full project manifesto here

phase one: research on designing pedagogical tools

My research started with 3 questions:

how can I explain algorithms I don't understand?

how can I use design to explain algorithms?

how can I create a coherent digital & tangible aesthetic?

phase two: research on building serious games

  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image

After the first drawings I started building mockups and prototypes to test my ideas. I tested tangible and digital interfaces with some friends and family. I tested diferent visual and physical representations of the algorithms. A playful part was added in every experimentation, and the pedagogical tools became serious games.

  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image

phase three: design through testing and refining

Facebook's Newsfeed algorithm

The Facebook game is divided in two parts: first understanding publication's relevance score, then understanding how a sorting algorithm works.

The first part is about playing with fake Facebook content — using 3D printed conductive tokens and an iPad — in order to generate scores. "What would be the publication's score for a picture my best friend posted 1 hour ago?"

In the second part, you'll be ask to sort the publication's scores as an algorithm would do. This game makes you play the algorithm, using gestures and tangible tokens.

facebookfacebook

Google's PageRank algorithm

PageRank measures popularity using links between webpages. In the game you want your webpage to be on top of Google Search first page. In order to do so you have to create links between your page and others.

The game is designed like a mobile game: there is a goal (make a dot bigger), some thinking to reach it (multiple ways) and some limitations (the number of actions). It has bright colors and a simple interface.

Starting easy, the game is getting more difficult at every level, adding each time one layer of understanding of the PageRank's algorithm. Pedagogy — as level design — is about going from the simplest to the most complex.

googlegoogle

Siri's algorithm

Before answering us, digital assistants have to understand us. The Siri's game explains how a computer can understand what we say.

Siri's understanding is based on syllables: it associates a mathematical models to it. Here, the mathematical model is taking the shape of 3D printed soundwave tokens. Each syllables is symbolized by its soundwave.

The game is about finding the right syllables inside some full sentence soundwaves. While explaining complex algorithms this games is actually just about finding the right geometrical shape, like a children's game.

sirisiri

last phase: playing & learning

almaalma

→ alma is my Graduation Project for my Master of Product Design at EnsAD, 2016
→ alma has received the 
Label de l'Observeur du Design 2017

→ alma's mobile applications have been built with Maxime Alexandre
→ the tokens pictures are by Mathieu Faluomi

 

[unex_ce_button id="content_hk4ex62ap" button_text_color="#2e3ff5" button_font="bold" button_font_size="20px" button_width="auto" button_alignment="center" button_text_spacing="0px" button_bg_color="#f8f8f8" button_padding="15px 60px 15px 60px" button_border_width="2px" button_border_color="#2e3ff5" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="0px" button_bg_hover_color="#2e3ff5" button_border_hover_color="#2e3ff5" button_link="http://louischarron.io/work/highfive/" button_link_type="url" button_link_target="_self" has_container="1" in_column=""]next project[/ce_button]