Studio Sugarfree - Design & Development

Tony's Chocolonely

Tony's is een merk met een missie: 100% slaafvrije chocolade maken en zo de rest van de industrie laten zien dat het ook anders kan. 

 

Dat doen ze in geheel eigen stijl en met succes: de chocolade is razend populair. Ons hart sloeg even een keertje over toen ze belden of we mee wilden pitchen voor hun nieuwe website en digitale strategie.

 
 
 We ontvingen de briefing, gingen op locatie bezoek en keken onze ogen uit in Tony's winkel en kantoor. Zo zagen we chocoladerepen met pootjes, schreven fans hun smaakideeën op de muur en was er een enorme chocolade-automaat. Genoeg inspiratie dus!

We ontvingen de briefing, gingen op locatie bezoek en keken onze ogen uit in Tony's winkel en kantoor. Zo zagen we chocoladerepen met pootjes, schreven fans hun smaakideeën op de muur en was er een enorme chocolade-automaat. Genoeg inspiratie dus!

 Niet veel later presenteerden we ons concept: een website die primair chocofans oproept om mee te doen in Tony's Missie. De vorm die we in gedachten hadden was een drieluik met de secties 'Doe mee', 'Onze missie' en 'Chocoshop'. De iconische rode reep reist met je mee langs deze hoofdthema's en vertelt zo het hele verhaal van Tony's Chocolonely.  De Tony's waren enthousiast, we konden van start! Sugarfree, met de grootse  Hugo  als extra versterking, mocht haar tanden zetten in de frontend en de backend kwam op het bordje van de mannen en vrouwen van  Bitfactory  uit Rotterdam.    

Niet veel later presenteerden we ons concept: een website die primair chocofans oproept om mee te doen in Tony's Missie. De vorm die we in gedachten hadden was een drieluik met de secties 'Doe mee', 'Onze missie' en 'Chocoshop'. De iconische rode reep reist met je mee langs deze hoofdthema's en vertelt zo het hele verhaal van Tony's Chocolonely.

De Tony's waren enthousiast, we konden van start! Sugarfree, met de grootse Hugo als extra versterking, mocht haar tanden zetten in de frontend en de backend kwam op het bordje van de mannen en vrouwen van Bitfactory uit Rotterdam. 

 

 We begonnen met het uitwerken van de wireframes voor alle pagina's van de site. We bliezen er leven in door ze klikbaar te maken. Zo hadden alle partijen in dit project hetzelfde voor ogen en wist iedereen hoe de site uiteindelijk moest gaan werken.

We begonnen met het uitwerken van de wireframes voor alle pagina's van de site. We bliezen er leven in door ze klikbaar te maken. Zo hadden alle partijen in dit project hetzelfde voor ogen en wist iedereen hoe de site uiteindelijk moest gaan werken.

 Samen met Klink en Kirsten, de grondleggers van Tony's look, feel & tone of voice, gingen we van start met het design van alle componenten van de site. En dat was lachen want er zijn weinig merken zo eigenzinnig in tekst en beeld als Tony's! 

Samen met Klink en Kirsten, de grondleggers van Tony's look, feel & tone of voice, gingen we van start met het design van alle componenten van de site. En dat was lachen want er zijn weinig merken zo eigenzinnig in tekst en beeld als Tony's! 

 De frontend is een single page app en dat zorgt onder andere voor super smooth overgangen tussen de pagina's. Verder zit de site tjokvol met kleine effectjes, animaties - je slepedingetjes.  Nog wat extra technische buzzword-bingo voor de liefhebbers; de site is geschreven in vanilla ES6 Javascript en her en der gebruiken we React. SVG's & Tony's zijn als karamel en zeezout: dat werkt gewoon lekker en eenmaal geanimeerd met GSAP is het totaal onweerstaanbaar. Het hele verhaal wordt gebundeld door Webpack en de backend van Bitfactory is geschreven in Laravel 5.

De frontend is een single page app en dat zorgt onder andere voor super smooth overgangen tussen de pagina's. Verder zit de site tjokvol met kleine effectjes, animaties - je slepedingetjes.

Nog wat extra technische buzzword-bingo voor de liefhebbers; de site is geschreven in vanilla ES6 Javascript en her en der gebruiken we React. SVG's & Tony's zijn als karamel en zeezout: dat werkt gewoon lekker en eenmaal geanimeerd met GSAP is het totaal onweerstaanbaar. Het hele verhaal wordt gebundeld door Webpack en de backend van Bitfactory is geschreven in Laravel 5.

 Al met al is er nogal wat te doen op de site. Onze top 5 van functionaliteiten? Ok, van linksboven naar rechtsonder:   1: De impactmeter met live statistieken van de lopende choco-jaargang. Bereken de impact die je zelf maakt door het eten van stapels Tony's. 2: Wikkel ontwerp tool waarmee je je eigen wikkel helemaal kan opmaken en gedrukt en verpakt kan laten thuisbezorgen. 3: Geschiedenis slider waarmee je door de geschiedenis van Tony's Chocolonely glijdt. 4: De choco-spinner waarmee je supersnel je tassie kan vullen in de choco-shop. 5: Een sexy storelocator voor de USA mét streetview!

Al met al is er nogal wat te doen op de site. Onze top 5 van functionaliteiten? Ok, van linksboven naar rechtsonder: 

1: De impactmeter met live statistieken van de lopende choco-jaargang. Bereken de impact die je zelf maakt door het eten van stapels Tony's.
2: Wikkel ontwerp tool waarmee je je eigen wikkel helemaal kan opmaken en gedrukt en verpakt kan laten thuisbezorgen.
3: Geschiedenis slider waarmee je door de geschiedenis van Tony's Chocolonely glijdt.
4: De choco-spinner waarmee je supersnel je tassie kan vullen in de choco-shop.
5: Een sexy storelocator voor de USA mét streetview!

live2.jpg
 De website was vlak voor het chocoseizoen klaar. De livegang ging gepaard met veel gejuich, gouden confetti en champagne - precies zoals het moet zijn. Gaat dat zien op:

De website was vlak voor het chocoseizoen klaar. De livegang ging gepaard met veel gejuich, gouden confetti en champagne - precies zoals het moet zijn. Gaat dat zien op: