How we created an immersive Street Walk Experience with a GoPro and Javascript

Sharing back the making of the web-documentary Pregoneros de Medellín (Colombia)

Benchmark and Inspiration :

First draft of “Pregoneros de Medellín”, Google Street Walk like
Defense d’afficher transition
Scroll2play demo
First prototype

On giving up on 360° imagery and fixing priorities

How does the scrolling animation works (TECH)

On shooting, trial and error

GoPro stabilization on the bike
GoPro stabilization on the helmet
Shooting “Pregoneros de Medellín” streetwalk
Final streetwalk online experience
Airwheel, great concept

Finding a way to encounter the streets vendors on the interactive walk

UX choice to make the street-vendors clickable

Tracking 3D to position the sign on top of the characters

Screencast Discovering character
After Effect tracking 3D on GoPro Footage
"characterPosition": {
"87": { //frame number
"left": 58.5453125, //left offset in %
"top": 50.97759259 //top offset in %
"88": {
"left": 58.58489583,
"top": 50.99018519
"89": {
"left": 58.6171875,
"top": 50.99990741

Sound design:

Sounds of Street View Project:
Field work in the center of Medellín, iterating on the recording process
Example of ambient sound
Example of punctual sound
Recording ambient sound with the Jeckling Disk

Sound editor UI:

Sound editor UI
Demo of the Sound Editor

Iterating on interface design and user testing:

Design team working on the interface
Home page of Pregoneros de Medellín
First iteration
2nd iteration
3rd iteration
Scroll to start animation

Similar project:

Langstrasse.srf project

What we could improve:


Tinkering (digital)things : Maps, 3D, AI, Storytelling, IoT, Data Viz: , ,,… Freelancing!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store