HOW WE BUILT
Dawn on creating a Captcha that really sorts the humans from the bots
(1) In the complete Investing for People campaign, we’ve showcased what happens when you let robots decide where your money goes. The site opens up in a similar vein with a clear question: are you actually human? (2) Robots are capable of more than you think. That’s why we created a video of a robot passing the classic Captcha test.
(3) The pixelated transitions help tie all the different elements together in a fitting way.
(4) Through a classic Captcha style test, we helped people understand the point of the site. (5) We also added moving and changing text, to reproduce by humans only.
(6) Triodos’ view on what is sustainable and would be right to invest in is never far away.
(7) Once a person passes the human test they are congratulated and moved on to the ‘real’ Investing for People site, where we showcase Triodos funds. (8) Footage from the campaign is used in order to give the site a human touch.
There are few things on the web quite as irritating as having to fill out a Captcha before you can gain access to a site. Having a computer question whether you’re really human is just the sort of ludicrous scenario that can get our inner Luddites bristling, so it’s proved to be the ideal concept for Triodos Bank’s new campaign showcasing the human side of its investment services. We caught up with the team at Dawn ( dawn.nl) to discover exactly how they approached reinventing the Captcha for the Investing for People campaign ( investingforpeople.com).
Could you tell us a bit about the client, Triodos Bank?
JvdH: Triodos Bank is the Netherlands’ most sustainable bank, currently also working globally. They believe that banking can be a powerful force for good: serving individuals and communities as well as helping to build a more sustainable society.
What message is Triodos Bank trying to get across via this site?
JvdH: ‘Investing for people’ sounds pretty obvious but it’s less and less the case. Algorithms and bots are taking over the investment world and increasingly they determine what grows and what doesn’t. Not a great idea according to Triodos because investing is a powerful tool with which to influence the world. That’s why in their latest campaign they set out to show what happens when you leave ethical choices to robots.
How did Dawn become involved in this interesting project?
JvdH: Dawn has been Triodos Bank’s strategic and creative agency for almost 10 years now. First we came up with the ‘Follow your heart, use your head’ brand strategy and years afterwards we did our best to make a big impact through taking over Nasdaq’s ticker tape and through community-driven endeavours like Buy The Change. Investing for People arose through discussions about how investment was moving away from being a logical human affair while Triodos always tries to keep it clear and transparent what you’re investing in.
How did you plan and execute the opening Captcha test?
JvdH: As part of the broader Investing for People campaign, which also includes
advertising in radio and TV, we thought the Captcha test would be a great way of getting people familiar with Triodos’ view on investing and current changes in the investing world. It’s a playful way to show just how important human traits are when making decisions. To execute it we relied upon our friend Jim Haakman, who’s a great coder we often work with, and put him in a team with our writers and designer. For the Captcha test he later involved Jean Jacques. There’s no mention of Triodos Bank until you get through to the main page. Did the client need convincing? JvdH: Of course, but they too felt that the point of the Captcha test would be lost or at least less clear [if the bank was mentioned immediately]. The test should really feel like one of those annoying online tests whilst making a very good and valid point in a playful way, not simply a funny extra for the site. There’s quite a bit going on in the main page. What are its major elements? RH: On the main page moving footage from the TV commercial is used to make the site less static. We opted to not simply use stills but keep it moving. Because the idea is ‘Investing for people’ we gave the funds a face: showing people for the different types of funds. We used the pixels transitions as a thread that links the tests and the main page and site. An extra design element that is really relevant and feels really robotic.
There wasn’t a lot of content for the homepage, so the idea for the mobile and desktop design was that all the basic content would be visible on that page. Not in a scrollable way but using one big view and using a horizontal scroll field on mobile. Talk us through some of the technologies running the site JH: We actually built two separate websites. First there’s the test: are you a robot or not? This is built on canvas with a combination of KonvaJS and React. The second is a simple HTML and CSS website that gives you all the information you now deserve since you’re not a robot.
The complete website is then hosted on DigitalOcean and served to the world through the Cloudflare CDN. The main page features an eyecatching blocky transition effect. How does that work? JH: In order for this to work we built the entire website in canvas. Then we built custom WebGL shaders that transitioned a generated bitmap, to large pixels and back to the next screen. Tell us about your testing process – were there any cross-platform issues? JH: We always use BrowserStack for testing across platforms. The test is pretty linear so this was pretty easy to test. Of course, old versions of Internet Explorer are an issue, so we decided to only make the test visible to people with modern browsers. How has the site been received? JvdH: So far the response has been amazing. What surprised us most is that very few people skipped or bounced from the Captcha test. Of the people that entered the site, 80% also finished the Captcha test and thus saw the point we tried to make. On top of that, conversion on the Captcha-specific posts has been really good too.
Key message Beyond the show-stealing Captcha, the site goes on to explain Triodos’ investment funds
1 4 5 6 7 2 3 8
Pixel perfect The site’s eye-catching pixel transition effect was achieved using canvas and custom WebGL shaders
Dual screen As well as the site, Dawn also created a TV ad for Investing for People