Case summary

Expertise

Development and Prototyping

Technologies

Nuxt.js, Vue.js and Google Vision API

Deliverables

Progressive web app

Spread awareness of plastic littering

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?

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.

Hand drawn visualization of the idea for the Pick Up 10 app
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.

Plastic soup - Merijn Tinga
Hackathon to kick-off the Pick Up 10 campaign

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:

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.

Pick Up 10 mobile screenshots
Pick Up 10 screenshots

Let's discuss what we can do

Nena de Clercq

Head of Sales & Operations

post@voorhoede.nl
Let's discuss what we can do