HOW WE BUILT

Dawn on cre­at­ing a Captcha that re­ally sorts the hu­mans from the bots

net magazine - - CONTENTS -

Close up

(1) In the com­plete In­vest­ing for Peo­ple cam­paign, we’ve show­cased what hap­pens when you let robots de­cide where your money goes. The site opens up in a sim­i­lar vein with a clear ques­tion: are you ac­tu­ally hu­man? (2) Robots are ca­pa­ble of more than you think. That’s why we cre­ated a video of a ro­bot pass­ing the clas­sic Captcha test.

(3) The pix­e­lated tran­si­tions help tie all the dif­fer­ent el­e­ments to­gether in a fit­ting way.

(4) Through a clas­sic Captcha style test, we helped peo­ple un­der­stand the point of the site. (5) We also added mov­ing and chang­ing text, to re­pro­duce by hu­mans only.

(6) Tri­o­dos’ view on what is sus­tain­able and would be right to in­vest in is never far away.

(7) Once a per­son passes the hu­man test they are con­grat­u­lated and moved on to the ‘real’ In­vest­ing for Peo­ple site, where we show­case Tri­o­dos funds. (8) Footage from the cam­paign is used in or­der to give the site a hu­man touch.

There are few things on the web quite as ir­ri­tat­ing as hav­ing to fill out a Captcha be­fore you can gain ac­cess to a site. Hav­ing a com­puter ques­tion whether you’re re­ally hu­man is just the sort of lu­di­crous sce­nario that can get our in­ner Lud­dites bristling, so it’s proved to be the ideal con­cept for Tri­o­dos Bank’s new cam­paign show­cas­ing the hu­man side of its in­vest­ment ser­vices. We caught up with the team at Dawn ( dawn.nl) to dis­cover ex­actly how they ap­proached rein­vent­ing the Captcha for the In­vest­ing for Peo­ple cam­paign ( in­vest­ing­for­peo­ple.com).

Could you tell us a bit about the client, Tri­o­dos Bank?

JvdH: Tri­o­dos Bank is the Nether­lands’ most sus­tain­able bank, cur­rently also work­ing glob­ally. They be­lieve that bank­ing can be a pow­er­ful force for good: serv­ing in­di­vid­u­als and communities as well as help­ing to build a more sus­tain­able so­ci­ety.

What mes­sage is Tri­o­dos Bank try­ing to get across via this site?

JvdH: ‘In­vest­ing for peo­ple’ sounds pretty ob­vi­ous but it’s less and less the case. Al­go­rithms and bots are tak­ing over the in­vest­ment world and in­creas­ingly they de­ter­mine what grows and what doesn’t. Not a great idea ac­cord­ing to Tri­o­dos be­cause in­vest­ing is a pow­er­ful tool with which to in­flu­ence the world. That’s why in their lat­est cam­paign they set out to show what hap­pens when you leave eth­i­cal choices to robots.

How did Dawn be­come in­volved in this in­ter­est­ing pro­ject?

JvdH: Dawn has been Tri­o­dos Bank’s strate­gic and creative agency for al­most 10 years now. First we came up with the ‘Fol­low your heart, use your head’ brand strat­egy and years af­ter­wards we did our best to make a big im­pact through tak­ing over Nas­daq’s ticker tape and through com­mu­nity-driven en­deav­ours like Buy The Change. In­vest­ing for Peo­ple arose through dis­cus­sions about how in­vest­ment was mov­ing away from be­ing a log­i­cal hu­man af­fair while Tri­o­dos al­ways tries to keep it clear and trans­par­ent what you’re in­vest­ing in.

How did you plan and ex­e­cute the open­ing Captcha test?

JvdH: As part of the broader In­vest­ing for Peo­ple cam­paign, which also in­cludes

ad­ver­tis­ing in ra­dio and TV, we thought the Captcha test would be a great way of getting peo­ple fa­mil­iar with Tri­o­dos’ view on in­vest­ing and cur­rent changes in the in­vest­ing world. It’s a playful way to show just how im­por­tant hu­man traits are when mak­ing de­ci­sions. To ex­e­cute it we re­lied upon our friend Jim Haak­man, who’s a great coder we of­ten work with, and put him in a team with our writ­ers and de­signer. For the Captcha test he later in­volved Jean Jacques. There’s no men­tion of Tri­o­dos Bank un­til you get through to the main page. Did the client need con­vinc­ing? 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 men­tioned im­me­di­ately]. The test should re­ally feel like one of those an­noy­ing on­line tests whilst mak­ing a very good and valid point in a playful way, not sim­ply a funny ex­tra for the site. There’s quite a bit go­ing on in the main page. What are its ma­jor el­e­ments? RH: On the main page mov­ing footage from the TV com­mer­cial is used to make the site less static. We opted to not sim­ply use stills but keep it mov­ing. Be­cause the idea is ‘In­vest­ing for peo­ple’ we gave the funds a face: show­ing peo­ple for the dif­fer­ent types of funds. We used the pix­els tran­si­tions as a thread that links the tests and the main page and site. An ex­tra de­sign ele­ment that is re­ally rel­e­vant and feels re­ally ro­botic.

There wasn’t a lot of con­tent for the home­page, so the idea for the mo­bile and desk­top de­sign was that all the ba­sic con­tent would be vis­i­ble on that page. Not in a scrol­lable way but us­ing one big view and us­ing a hor­i­zon­tal scroll field on mo­bile. Talk us through some of the tech­nolo­gies run­ning the site JH: We ac­tu­ally built two sep­a­rate web­sites. First there’s the test: are you a ro­bot or not? This is built on can­vas with a com­bi­na­tion of Kon­vaJS and Re­act. The sec­ond is a sim­ple HTML and CSS web­site that gives you all the in­for­ma­tion you now de­serve since you’re not a ro­bot.

The com­plete web­site is then hosted on Dig­i­talOcean and served to the world through the Cloud­flare CDN. The main page fea­tures an eye­catch­ing blocky tran­si­tion ef­fect. How does that work? JH: In or­der for this to work we built the en­tire web­site in can­vas. Then we built cus­tom We­bGL shaders that tran­si­tioned a gen­er­ated bit­map, to large pix­els and back to the next screen. Tell us about your test­ing process – were there any cross-plat­form is­sues? JH: We al­ways use BrowserS­tack for test­ing across plat­forms. The test is pretty lin­ear so this was pretty easy to test. Of course, old ver­sions of In­ter­net Ex­plorer are an is­sue, so we de­cided to only make the test vis­i­ble to peo­ple with mod­ern browsers. How has the site been re­ceived? JvdH: So far the re­sponse has been amaz­ing. What sur­prised us most is that very few peo­ple skipped or bounced from the Captcha test. Of the peo­ple that en­tered the site, 80% also fin­ished the Captcha test and thus saw the point we tried to make. On top of that, con­ver­sion on the Captcha-spe­cific posts has been re­ally good too.

Key mes­sage Beyond the show-steal­ing Captcha, the site goes on to ex­plain Tri­o­dos’ in­vest­ment funds

1 4 5 6 7 2 3 8

Pixel per­fect The site’s eye-catch­ing pixel tran­si­tion ef­fect was achieved us­ing can­vas and cus­tom We­bGL shaders

Dual screen As well as the site, Dawn also cre­ated a TV ad for In­vest­ing for Peo­ple

Newspapers in English

Newspapers from Australia

© PressReader. All rights reserved.