door Dept, partner | 21 juli 2017, 11:41 in Marketing Technology
tamtam

Het design-proces van een prachtige corporate website: kempen.com.

Marlien de Roo, partner | 21 juli 2017, 11:41

Dit is niet zomaar een bank website, gemaakt door een mooie mix van Nederlandse creatieve bureaus.

Mmm, een website voor een B2B bank…

Toen Kempen ons vroeg de nieuwe website te ontwerpen en bouwen was ik sceptisch. Ja, banken hebben zichzelf de afgelopen jaren opnieuw uitgevonden, maar goede concepten en designs worden in die wereld nog regelmatig tegengehouden door juridische rompslomp, conservatisme, angst en de strijd tussen interne afdelingen om een aandeel van screen real estate. Maar dit keer was dat niet het geval. Dit keer heeft het verhaal een heus happy end met ?s &?s.

Geïntegreerd design-proces

Voor een goed werkend ontwerp moeten alle elementen samenkomen: concept, copy, brand design, visual design, interaction design, fotografie en animatie. Dat is in elk project een uitdaging, maar was het hier zeker omdat er drie agencies bij betrokken waren, allen met hun eigen specialiteit, mentaliteit en focus. De mix bestond uit:

  • voor merkpositionering, identiteit en concept.
  • voor fotografie van de belangrijkste beelden.
  • (wij) voor het concept van de website, design, animaties en het bouwen ervan.

Dit proces verliep niet volgens een logische volgorde. Deels omdat de merkpositionering en het concept nog niet klaar waren toen wij begonnen met het design voor de website, maar ook omdat we elkaars expertise respecteerden en samen iets moois wilden maken. Het ontwerpproces zag er dus ongeveer zo uit:

Ons design-proces.

Mijn takeaway is dat zoiets alleen werkt als de mensen van de verschillende agencies nauw met elkaar en de klant samenwerken, terwijl ze ondertussen samen het algehele proces en de grotere doelen waarborgen.

Haute finance boutique?

Startpunt voor de website was de nieuwe merkpositionering van Kempen die KesselsKramer aan het ontwikkelen was. Op basis daarvan gebruikten we de term ”haute finance boutique” — denk aan sjieke horloges en fashion magazines. Dit vanwege de niche waarin Kempen opereert. Maar als we ons alleen daarop zouden richten zou het een stap terug zijn naar hoe het bankwezen was. Dus wilden we die traditionele, sjieke stijl vermengen met een gevoel van toewijding, innovatie, internationale focus en Dali-achtig surrealisme.

Mood board door onze designer, nog vroeg in het project.
Moodboard door onze designer, nog vroeg in het project.

Hier kun je zien dat KesselsKramer en wij op dezelfde golflengte zaten: KesselsKramer liet ons wat bijzondere stilleven foto’s zien die Van Santen & Bolleurs hadden gemaakt voor andere klanten en onze designer Dionne verwerkte vervolgens een stockfoto van een stilleven in het ontwerp van de homepage om de klant te inspireren. Kempen vond die beelden zo goed dat we toen speciaal custom stilleven foto’s voor ze zijn gaan maken.

Evolutie van de homepage

De homepage is een belangrijke pagina voor het maken van impact. Hier kun je de evolutie van het design terugzien:

Eerste stijlstudie van een home/landing page.


De versie met het eerste stilleven dat onze designer koos uit stockfotografie.

Concept van vlak voor de Van Santen & Bolleurs fotoshoot.

Eerste versie van de animatie met het Kempen-gebouw op de voorgrond. Deze versie bracht wat discussie teweeg over de kleuren.

Still van de uiteindelijke animatie, in de browser.
 

Stilleven fotografie met subtiele animaties

Al vroeg in het project was het onze visie om een kwalitatieve website neer te zetten met een diepe focus en impact, die tegelijkertijd ook verfijnd is. Hierin spelen de stilleven foto’s van Van Santen & Bolleurs een essentiële rol omdat we de user interface een minimale rol laten spelen.
We voegden aan de foto’s subtiele animaties toe om het verhaal op een rake, webby manier op de bezoeker over te brengen. Hieronder het ontwerpproces van de hoofdanimatie van Asset Management:

Het eerste concept/idee.

Fotoshoot bij Van Santen & Bolleurs met een hele dure, geleende Bonsai :)

De foto die we van Van Santen & Bolleurs aangeleverd kregen.

De foto in het design, nog zonder de nodige aanpassingen in positionering en schaal om het beeld geschikt te maken voor de meest gangbare schermgroottes en -resoluties.

Eindresultaat op de website. Kijk op kempen.com voor de animatie met flikkerende parels.​​​​​​​
 

Alle beelden custom-made

De belangrijkste beelden zijn allemaal op maat gemaakt door Van Santen & Bolleurs, zodat ze zich echt thuis voelen op de website:


Op maat geschoten beelden in corresponderende stijl.​​​​​​​

De volgende stap

Na dit creatieve proces zullen we ons meer op de business gaan richten. Het is nu een prachtige corporate website, maar het moet meer zijn dan dat: hij moet nieuwe klanten genereren en waarde toevoegen voor bestaande klanten. In de volgende fase zullen we Salesforce implementeren, een klantenportaal en meer data gedreven features en campagnes.
​​​​​​​
Offline is ook cool :) Kempen heeft haar kantoor ingepakt om de rebranding te kickstarten.

Trots

We zijn enorm trots op de website voor Kempen en hopen dat hij de impact zal maken die we voor ogen hadden. Veel dank aan het marketingteam van Kempen, dat ons veel creatieve speelruimte gaf en ons wist te managen met een mooie balans tussen de eisen vanuit de business, vrijheid en plezier.

Geschreven door Jeroen Heydendael, strateeg en consultant bij TamTam (part of Dept) en vanaf het begin bij dit traject betrokken. Je kunt hem bereiken via jeroen@tamtam.nl.

Reacties op dit artikel (0)

Comment author avatar

Dit is een bijdrage van

Dept

Partner

Meer van deze partner
Whitepapers van deze partner
Nu op Twitter