#STOPOVERFISHING

Title#STOPOVERFISHING
BrandOCEANA EUROPE
Product/ServiceOCEANA EUROPE
Category A07. Overall Aesthetic Design
Entrant DEMODERN Cologne, GERMANY
Idea Creation DEMODERN Cologne, GERMANY
Idea Creation 2 PANTHALASSA Hamburg, GERMANY
Production DEMODERN Cologne, GERMANY
Production 2 PANTHALASSA Hamburg, GERMANY
Additional Company GERMAN WAHNSINN Hamburg, GERMANY
Credits
Name Company Position
Vivien Schulze Demodern Digital Agency Art Director
Giulia Pignataro Demodern Digital Agency UX Designer
Eduardo Marzionna Demodern Digital Agency Art Director
Patrick Heintzmann Demodern Digital Agency Creative Technologist
David Nemes Demodern Digital Agency Developer
Fernanda Sabaudo Demodern Digital Agency Art Director
Steffen BrĂ¼ning Demodern Digital Agency Digital Producer
Philipp Feit German Wahnsinn Sound Designer
Emile Harmel Demodern Digital Agency Creative Technologist
Kristian Kerkhoff Demodern Digital Agency Creative Director

The Campaign

Overfishing is one of the major environmental problems that humans face today. This experience transports users into a virtual ocean where those taking part to the campaign can introduce individual fish in the ocean through the interface and influencing the experience by talking about it on Twitter. Based on the idea of replenishing the ocean through responsible fishing, and the urgency of spreading awareness of depleting fish stocks, we aimed at an engaging web experience that sends a message and pushes the mass into taking action. The web special is an immersive ocean experience, highlighting the beauty of the underwater world with its fish and natural beauty. We decided to design organic and natural objects in a clear yet abstract way. To communicate texture and emotional depth without sacrificing a minimalistic aesthetic, we made use of low-poly art direction with vivid colours.

Creative Execution

In contrast to the serious tones most campaigns are based on, we took a playful approach into the web-experience; prompting users to create and introduce individual fish in the ocean through the interface and influencing the experience by talking about it on Twitter. All this in parallel to learning about Overfishing through the experience itself. The commitment of the supporter is translated into a fish generated in real time: whether supporting the cause on social media using the official hashtag or submitting their message in the webspecial, their contribution is added into the virtual ocean through the appearance of a fish. In this way, each fish is a stored message from the growing community that can be rediscovered at any time by catching a fish. We are frequently running a node.js service which is looking for tweets on Twitter and Instagram that contain the #StopOverfishing. That data gets injected into our Firebase structure which takes care of storing and synchronising the data across all clients in real-time. The Client just listens to the Firebase stream and receives the info that someone used the hashtag StopOverfishing or created a fish on the page itself. We wanted to achieve a recognisable behaviour of fish within a swarm. Additionally, we wanted the swarm to be reactive through user-input like a mouse movement. Therefore, we used a mix of basic boid and flocking algorithms in JavaScript to handle the three common dependencies in a swarm behaviour like alignment, cohesion and separation which are also influenced by mouse interaction. The web special was launched on World Ocean Day on June 8th and more than 10.000 fish were added to the swarm since.