De Voorhoede

front-end developers

The challenge: spread awareness of plastic littering

Plastic litter turns into plastic soup and threatens our oceans. The good news: continuing his fight for a plastic-free ocean, this summer the Plastic Soup Surfer will go adventuring with his 3D-printed foil SUP board made of recycled plastic. And you can help! The Plastic Soup Surfer invites everyone to join in his “Pick Up 10” campaign. You pick up plastic litter and take a picture of it. The picked-up plastic goes into the surf board; the pictures identify brands and manufacturers. This way, we confront those who are in power which will hopefully make a change at the root of the problem. So how can we, as mere front-end developers, help make a difference?

Man standing on a beach with his surfboard
The Plastic Soup Surfer (Merijn Tinga) with the board of his first adventure “Message on a bottle”

We’re typically asked to create a better consumer experience or help teams execute tasks more efficiently. But this time our target audience isn’t encouraged to consume more or faster. So what can we do?

Our solution: gamify picking up plastic litter

At De Voorhoede, we’re a technology minded bunch. So we started with a technology based idea: can we automatically detect litter in a picture? It turns out we can! And not just that: we can detect if there’s plastic in it, if you made a picture of a bottle, if you can see a brand name on it, and much more. How? We’re leveraging Google’s Vision API, a cloud service analysing images using machine learning. After a quick test we’re convinced this idea could work. But a tech-y idea is still a way off from something that would help the Plastic Soup Surfer.

Illustration of the app concept
The idea: leverage machine learning to detect plastic litter

The information we receive from Google Vision gives us power. It helps the Plastic Soup Surfer and partner Litterati fight for more sustainable solutions. But we, as developers, can also use the data for something else: we can reward the litter pics you take with points based on what’s in your picture. Or in other words: we can gamify picking up plastic! To accelerate our ideas into having a working app we organised a hackathon with the digital product designers from Hike One and the Plastic Soup Surfer himself.

Still from the video showing people working on the app
Hackathon to kick-off the Pick Up 10 campaign, video by Eelke Dekker

It’s amazing what a group of creative minds can do in a single day. Within hours 4 teams created a concept to challenge you, take pictures, connect the Google Vision API, come up with a reward system, celebrate achievements and trigger you to challenge your friends. At the end of the day we duct taped everything together, and presto! We had the prototype version of our app:

Pick Up 10 prototype in action

Going from prototype to finished app was a breeze. Thanks to the prototype, we already knew all the hard technical parts and interaction patterns. We could now focus on building a robust app and didn’t have to worry about feasibility or if it would feel ‘right’ at the end. We created a backlog, built a solid API implementation, refined the user flow, added some addictive sprinkles and here we are: Pick up 10 is done! We hope our efforts inspire you to pick up as many plastic litter as you can for the sake of our oceans, and challenge your friends and family to do even better.

Composition image of 3 mobile phones showing the Pick Up 10 app in action
The Pick Up 10 challenge: Pick up plastic litter and take a picture!

The techniques

  • Photos are analysed for plastic litter, presence of faces and more, using the Google Vision API

  • Photos are uploaded to Cloudinary to transform and optimise them for fast delivery

  • The app is deployed and hosted with Netlify and uses its cloud functions to connect the Vision API, Cloudinary and a MongoDB database

The result

  • From idea to app in 1 day by way of hackathon

  • Leveraging machine learning for image recognition

  • A fun game to spread awareness for plastic littering