Project description:

CBC/Radio-Canada created this newsgame to explain some of the ethical ramifications of letting algorithmic drivers share the road with human drivers and the moral dilemmas facing autonomous vehicle manufacturers.

To keep the subject (which involves death) from being too morbid, we made the aesthetic choice to use a whimsical pixelated art style.

The project alternates between explanatory text and a visual ethics quiz designed to keep readers engaged and make them more receptive to the concerns of experts and other stakeholders.

The project was published in French and English.

Impact reached:

The project received praise from visual journalists across the industry, including from the New York Times, Bloomberg and The Guardian, as well as multiple researchers studying autonomous vehicles.

The project was also successful in getting several Canadian governmental officials’ positions on the proliferation of self-driving cars on the record.

The presentation and interactive elements used were successful in convincing readers to spend extra time with the article. Our read times on this project were far greater than with traditional articles, and this project was one of the top articles read that month.

The project was also featured on several Radio-Canada radio and television programs, extending its reach. We believe the project was successful in its goal of starting a conversation around self-driving car ethics in Canada.

Techniques/technologies used:

The project used React/Redux to render the project and to coordinate events on multiple stacked layers: canvas, svg, and html. Static rendering of markup was used to decrease perceived load time.

The text of the project was retreived from a headless CMS in order to support multiple languages (French and English) seamlessly.

Rails and roads were drawn with mathematical equations (and needed to be redrawn and recalculated on text reflows) and CSS sprites were used to animate characters and vehicles.

Responses to the visual poll were sent to or retrieved from a backend microservice, which served as a relay to a mysql database.

We created a physically accurate braking simulation using the official mathematical formulas provided by Transport Canada. We used the data from the Moral Machine project to create a novel visualisation. We also used duelling video interviews to provide opposing views on vehicle testing, and illustrations to explain different autonomy levels.

A particular challenge was creating responsive pixel art that maintained an exaggerated pixel size (4×4, or 8×8 on retina screens) despite changing screen sizes. In all our visualisations we sought to maintain that pixel size. Even the world map maintains these pixel sizes even when the map is smaller, which means we needed to draw a pixellated map on-the-fly at the requested width.

Finally, we worked hard to ensure accessibility, label buttons and visualisations according to accessibility standards, and to ensure that the entire project could be operated by keyboard/without a pointing device. The project received a perfect Lighthouse accessibility score. 

 

 

What was the hardest part of this project?

The hardest part of this project was choosing scenarios that made sense with the accompanying article sections. This was especially challenging, because we did not know beforehand how the public would vote in the visual poll. If we incorrectly predicted the public’s response, it was possible that the vote counts would contradict parts of the text.

Maintaining the same pixel-art pixel proportions for a responsive project presented several technical challenges which our team overcame.

Writing the article itself was a challenge, since a traditional article format is not made to be broken into segments. With large interruptions between sections, each block had to contribute to the larger narrative, and yet be capable of standing alone.

Finally, the reporting was a challenge since governments and companies were hesitant to discuss the potential downsides of the technologies they are actively pursuing — especially when those downsides are abstract and not tied to a particular accident or event.

What can others learn from this project?

Others can learn the power of a good presentation to drive engagement. This project was based on data that had been available for months, but the quality of the presentation and the use of a visual poll to drive people down the page, the clever visualisations and delightful drawings, all served to produce a hit for our newsroom.

As Professor Iyad Rahwan, director of the Center for Humans & Machine said on Twitter: “[It is] quite possibly the most interactive and detailed article covering the Moral Machine to date.”

The lesson is that you don’t need to be first if you can do it better.

Project links:

ici.radio-canada.ca/info/2019/voitures-autonomes-dilemme-tramway/index-en.html