In zes maanden hebben we met een multidisciplinair team, de digitale restyling van SNS ontworpen en ontwikkeld. Daarmee kregen de website, de app en de klantomgevingen van de bank een compleet nieuwe huisstijl die aansluit bij de nieuwe koers van SNS: Eerst de mens, dan het geld. In dit artikel leggen wij stap voor stap uit hoe we dit hebben aangepakt.
Dit artikel is geschreven door: Bram Peulers (SNS) & Laura Chavarria (Keen Design)
Periode: 6 maanden
Onze rollen: UX Designer & Visual Designer
Eerst de mens. Dan het geld.
Van traditionele bank gaat SNS naar een bank met een ondernemend karakter. De bank zit dus midden in een belangrijke herpositionering. Er vindt daarmee een verschuiving plaats van ‘gezellige gezinnen’ naar ‘mensen met dromen en ambities die voorwaarts willen’. Niet alleen in de offlinecampagnes ga je deze nieuwe herpositionering terugzien, maar uiteraard ook in alle digitale kanalen van SNS.
In de nieuwe campagne staat de mens vooral centraal en dan pas het geld. De nieuwe pay-off luidt dan ook ‘Eerst de mens. Dan het geld’. Met deze nieuwe campagne wil SNS een nieuwe doelgroep bereiken, de zogenaamde ‘opwaarts mobielen’. De doelgroep bestaat uit jonge mensen (18- tot 35- jarigen) met een ondernemend karakter en met dromen en ambities. Kortom, mensen die willen groeien. En het mooie aan de nieuwe SNS-campagne is dat het merk meegroeit met deze doelgroep. Een fris merk met een nieuw gezicht – maar met de vertrouwde aandacht voor mensen die SNS zo eigen maakt.
Het project
In een corporate organisatie als SNS is het doorvoeren van een nieuwe huisstijl een complex traject. In korte tijd hebben we de essentie van de campagne en de merkidentiteit vertaald naar een digitale uiting en het enthousiasme over de nieuwe look & feel was al snel voelbaar binnen de organisatie. We kregen veel vrijheid in onze designkeuzes, dat is prettig werken voor een designer.
Op het logo van SNS en de herkenbare SNS-kleur paars na mochten we de hele digitale huisstijl aanpassen. Maar we kregen wel de opdracht om bepaalde cruciale visuele elementen vanuit de nieuwe merkidentiteit en campagne aan te passen, om ze bruikbaar en ontwikkelbaar te maken in de digitale omgeving. Denk daarbij aan het gebruikt van de headers met de groeibalk elementen, een toegankelijk kleurenpalet (volgens de WCAG-richtlijnen) en de keuze voor een bodytekst font dat goed leesbaar is en goed bij de nieuwe identiteit past.
Volksbank design system
Een groot voordeel dat we hadden is het werken met het Volksbank Design System (VDS) waarmee we het nieuwe ontwerp snel en efficiënt konden lanceren over de verschillende kanalen heen. In dit systeem worden elementen en componenten gedefinieerd en samen met het kleurenpalet en lettertypes vormen ze een visuele taal om buttons, interactieve form elementen, navigatie, grid en vele andere componenten te definiëren en ze snel en gemakkelijk om in de nieuw stijl aan te passen.
Doordat we als designers samen met de ontwikkelaars binnen de organisatie samenwerken met dit systeem, ontstaat er consistentie in de bouw van de componenten en de producten die heel belangrijk is in de gebruikerservaring. Het voordeel is ook dat je een ontwerp vanuit één centrale plek kunt omzetten.
De kernwaarden van SNS 2.0
Voordat we aan de slag zijn gegaan met het restylen van de kanalen hebben we een aantal designkernwaarden opgesteld. Zo moest de nieuwe digitale look & feel hieraan voldoen:
1. Positief activistisch
We willen als bank stelling nemen. We vinden iets.
We zijn een sociale bank, met aandacht voor mensen.
En daar strijden we ook voor. Maar altijd op een positieve manier. Dat wil zeggen: we nemen stelling, maar we dragen ook oplossingen aan.
2. Menselijk
We zijn de menselijke bank. Met oprechte aandacht. Niet voor niets zijn we de bank die winkels opent waar andere banken kantoren sluiten. Het uitgangspunt van alles wat we doen – dus ook van onze communicatie – is altijd de mens. We zetten in de campagne onze klanten op een voetstuk, niet onze producten.
3. No-nonsense
Als we mensen centraal zetten in onze communicatie, moeten we ook mensentaal spreken. Eenvoudige, heldere taal – geen “bankentaal”. Ook visueel spreken we mensentaal. Met pakkende fotografie waarin mensen op een echte en opvallende manier worden afgebeeld in hun eigen wereld.
4. Vooruitstrevend
Als je positief activistisch wil zijn, moet je een beetje vooroplopen. We zullen dus altijd moeten zoeken naar een manier om het anders en moderner te doen. Visueel, in communicatie, maar ook in productontwikkeling. Als we mensen willen helpen moeten we ook de wereld een beetje veranderen.
5. Energiek
We zullen altijd proberen te zorgen voor een enthousiaste, meeslepende toon. Onze doelgroep wil vooruit, en wij ook. Onze communicatie moet dat uitstralen. Je moet er zin van krijgen. Go-go-go!
Bij SNS besteden we speciale aandacht aan de toegankelijkheid van de gebruiker, daarom is vereist dat onze ontwerpen toegankelijk zijn voor alle gebruikers en dat ze voldoen moeten aan de WCAG 2.1 regels, met als minimaal niveau AA. Dat houdt bijvoorbeeld in dat teksten en buttons goed leesbaar moeten zijn, dat er voldoende contrast is tussen tekst en achtergrondkleuren en dat ook mensen met een visuele beperking er doorheen kunnen navigeren.
Nieuwe visuele stijl
De nieuwe visuele stijl van SNS moet op zichzelf een verhaal vertellen, waarbij we de groei van de mens centraal zetten en niet de financiële randzaken. Een expressieve fotografische stijl, uitgesproken lettertypes en frisse pasteltinten hebben we daarom centraal gezet in ons ontwerp en de arceringen achter de titels beelden groeistaven groeibalken uit. Daaraan toegevoegd hebben we een kenmerkend rechthoekig element een opvallende en aanspreekbaar call-to-action kleur toegevoegd.
Uitgesproken typografie
In de beginfase van dit project zijn we aan de slag gegaan met het vastleggen van de fonts. Het belangrijkste was dat we een uitgesproken lettertype wilden voor de headings en een goed leesbaar lettertype voor de normale teksten. Voor de headings hebben we daarom gekozen voor Dunbar Tall. Dit is een karakteristiek lettertype dat goed past bij de nieuwe designrichting die we op willen met SNS, die krachtige boodschappen op een menselijke en vriendelijke manier kan overbrengen. Achter de titels hebben we zelfs een gekleurde (lila, zalmroze en lichtblauwe) toegevoegd, om de groei van de mens uit te beelden. We hebben het bijpassende lettertype Mulish gekozen voor de bodytexst. Dit is een Google font dat goed leesbaar is en te gebruiken op elk apparaat en in elke browser. Dit past ook goed bij de look & feel van het nieuwe merk.
Kleurenpalet
Het nieuwe kleurenpalet moest fris aanvoelen en tegelijkertijd het ‘nieuwe’ SNS-gevoel overbrengen. Dat laatste betekent dat er ook herkenbaar SNS-paars moest terugkomen. Dat zie je bijvoorbeeld terug in de menubalk en in de footer. Maar omdat we het palet ook weer niet te veel paars wilden geven, hebben we ‘m uitgebreid met de pasteltinten (zalm, lichtblauw, lila en lichtgeel) die we vooral als achtergrondkleuren toepassen.
Van traditionele naar dynamische fotografie
Een foto zegt vaak veel meer dan duizend woorden, dus eigenlijk is fotografie een van de belangrijkste aanpassingen in de nieuwe stijl. Het zet direct een sfeer neer. Van traditionele fotografie zijn we overgestapt op een dynamische, urban-achtige fotografie. Niet meer de gemiddelde Nederlander (Bart) ga je terugzien, maar juist de positieve en sportieve Yara. Deze stijl zie je dus terugkomen in de hele website.
Kortom, we hebben gekozen voor een expressieve en sterke fotografische stijl waar de mens vanzelfsprekend eerst komt. Een visuele identiteit die zal met fotografie mensen meer overtuigen van onze persoonlijke aandacht. Hier zien we de mens, waar we het uiteindelijk allemaal voor doen, echt centraal staan.
Niet alleen de fotografie, maar ook de illustratiestijl is flink aangepakt. We wilden een herkenbare illustratieve stijl die zich zou onderscheiden van andere banken. De stijl moest passen in de nieuwe look & feel van SNS, dus zie je de frisse, kleurrijke illustraties terug over alle kanalen heen.
Nieuwsgierig?
Neem dan snel een kijkje op de website van SNS Bank. Mocht je meer willen weten over hoe wij hebben gewerkt? Neem dan gerust contact op! En aarzel niet om feedback of suggesties achter te laten.
Gedurende dit project hebben we samengewerkt met reclamebureau Alfred, ontwerpbureau UNKL en illustrator Ming.