De Voorhoede

front-end developers

De uitdaging: mensen bewust maken van plastic zwerfvuil

Plastic zwerfafval verandert in plastic soep en bedreigt onze oceanen. Het goede nieuws: in de voortzetting van zijn strijd tegen een plasticvrije oceaan gaat de Plastic Soup Surfer deze zomer op avontuur met zijn 3D geprinte foil SUP board, gemaakt van gerecycled plastic. En jij kunt bijdragen! De Plastic Soup Surfer wil dat iedereen meedoet aan deze “Pick Up 10” campagne. Wat je doet: je raapt plastic afval op en maakt er een foto van. Je opgepakte plastic wordt verwerkt in de surfplank; dankzij je foto’s verzamelen we merknamen en fabrikanten. Zo kunnen we de mensen die in de positie zijn om werkelijk iets te veranderen aan de kern van het probleem, confronteren. Maar hoe kunnen wij, louter front-end developers, helpen het verschil te maken?

Foto van een man op het strand met een surfplank op de grond
De Plastic Soup Surfer (Merijn Tinga) en de surfplank van zijn eerste avontuur “Message on a bottle”

We worden meestal gevraagd om een betere gebruikerservaring te bouwen, of teams te helpen efficiënter te werken. Maar in dit geval wordt onze doelgroep juist niet aangespoord om meer of sneller te consumeren. Wat kunnen wij doen?

De oplossing: gamified plastic afval opruimen

Bij De Voorhoede zijn we nogal technology minded. Dus begonnen we met een idee dat gedreven werd door technologie: kunnen we op een foto afval automatisch herkennen? Blijkt van wel! En dat niet alleen: we kunnen herkennen of het plastic is, of het een flesje is, of er een merknaam op staat en nog veel meer. Hoe? We gebruiken Google’s Vision API, een cloud service die afbeeldingen analyseert dankzij machine learning. Na een snelle test waren we overtuigd dat ons idee klopte. Maar een technisch bewezen idee is nog verre van iets bruikbaars voor de Plastic Soup Surfer.

Illustratie van het concept van de app
Het idee: met machine learning plastic afval herkennen

De informatie die we terugkrijgen van Google Vision geeft ons allerlei mogelijkheden. In eerste instantie helpt het de Plastic Soup Surfer en partner Litterati in het gevecht voor duurzaamheid. Maar als developers kunnen we de data ook gebruiken om punten toe te kennen aan wat er in de foto te zien is. Met andere woorden: we kunnen plastic afval verzamelen gamifyen! Om onze ideeën snel om te zetten in een werkend prototype organiseerden we een hackathon met de designers van Hike One en Merijn Tinga, de Plastic Soup Surfer zelf.

Still uit de video waarin mensen aan het werk zijn aan de app
Video van Eelke Dekker: De hackathon waarmee de Pick Up 10 campagne werd afgetrapt

Het is indrukwekkend wat je met een groep creatievelingen kan bereiken in een dag. Na een ochtend hadden we met 4 teams een werkend concept ontwikkeld om je uit te dagen om mee te doen, waarmee je foto’s kan nemen, de Google Vision API was geïmplementeerd, we hadden een beloningssysteem gebouwd en uitgedacht hoe gebruikers hun vrienden kunnen uitnodigen om de app ook te gaan gebruiken. Aan het eind van de hackathon knoopten we alles aan elkaar en presto! We hadden een prototype van de app:

Pick Up 10 prototype in gebruik

Van prototype naar eindproduct was een fluitje van een cent. Dankzij het prototype wisten we al wat de technische uitdagingen waren, en welke interactiepatronen we moesten bouwen. De focus kwam daardoor op het bouwen van een robuuste app. We hoefden ons geen zorgen te maken over de haalbaarheid, of dat de app wel prettig zou bedienen. We stelden een backlog op, bouwden een solide API-implementatie, verfijnden de user flow, strooiden wat verslavende elementjes rond en ziedaar: Pick Up 10 is af! We hopen dat onze inzet je inspireert om zoveel mogelijk plastic zwerfafval op te ruimen omwille van de oceaan, en je je vrienden en familie uitdaagt om jouw score te verbeteren.

Compositie van de Pick Up 10 app in actie op 3 mobiele telefoons
De Pick Up 10-uitdaging: neem een foto van je opgeruimde plastic afval!

De technieken

  • Foto’s worden geanalyseerd op plastic afval, gezichten en meer met de Google Vision API

  • Foto’s worden geüpload naar Cloudinary om ze te optimaliseren voor performance

  • De app wordt gedeployed en gehost met Netlify en gebruikt bestaande cloudfuncties om met Google, Cloudinary en een Mongo database te verbinden

Het resultaat

  • Van idee naar app in 1 dag dankzij een hackathon

  • Uitstekende fotoherkenning dankzij machine learning

  • Spelenderwijs word je je bewust van alle plastic zwerfafval