Hi! Ik ben UX designer in de wereld van finance, e-commerce, retail en overheid

De Merkenstudio is jouw ontwerpstudio op het gebied van UX design, websites en huisstijlen

Toggle offcanvas area
Rol: Visual designer, Periode: 2021-2022

SNS redesign

Tijdens de digitale restyling van SNS kregen de website, de app en de klantomgevingen een make-over die aansluit bij de nieuwe koers van de bank. In dit artikel leg ik stap-voor-stap uit hoe ik dit project samen met een UX-collega heb aangepakt. Een mooi project dat ik in dienst van de Volksbank heb uitgevoerd.

Eerst de mens. Dan het geld.

Van traditionele bank wil SNS naar een bank met een ondernemend karakter. De bank zit midden in een belangrijke herpositionering en er vindt daarmee een verschuiving plaats van ‘gezellige gezinnen’ naar ‘mensen met dromen en ambities die voorwaarts willen’. Niet alleen in de offline campagnes zie je deze herpositionering terug, maar juist ook digitaal.

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 ‘de opwaarts mobielen’. De doelgroep bestaat uit jonge mensen (18- tot 35- jarigen) die carrière- en statusgericht zijn en zoeken naar nieuwe manieren om aan geld te komen.

Vrijheid in onze design keuzes

In een grote organisatie als SNS is het doorvoeren van een nieuwe huisstijl een complex en landurig traject. Gelukkig was het enthousiasme over de nieuwe look & feel voelbaar binnen de organisatie en kregen we veel vrijheid in onze designkeuzes. Dat was prettig werken voor een designer. Op het logo van SNS en de herkenbare SNS-kleur paars na mochten we alles aanpassen, mits de componenten en de structuur van de website in de backend hetzelfde zouden blijven.

Een groot voordeel waardoor we het nieuwe ontwerp snel en efficiënt konden lanceren over verschillende kanalen is dat we binnen de bank werken met het Volksbank Design System (VDS). In deze omgeving worden zaken als componenten, lettertypes, knoppen, kleuren, grids, stijlen en richtlijnen centraal vastgelegd. Doordat we binnen de organisatie samenwerken met dit systeem, ontstaat er consistentie in de bouw van de producten en de gebruikerservaring. Het voordeel is ook dat je een ontwerp vanuit één centrale plek kunt omzetten.

Design principes

Voordat we aan de slag zijn gegaan met het restylen van de kanalen hebben we een aantal design principes opgesteld. Zo moest de nieuwe digitale look & feel voldoen aan de volgende kernwaarden: helder, duidelijk, flexibel, dynamisch en fun. Het nieuwe ontwerp moest die kernwaarden dus uitstralen. Een ander vereiste is dat onze ontwerpen toegankelijk moeten zijn voor alle gebruikers en dat ze moeten voldoen aan de eisen van WCAG 2.1, 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 groeibalken uit. Daaraan toegevoegd hebben we een kenmerkende rechthoekige stijl een opvallende call-to-action kleur toegevoegd (de ‘meloenkleur’ zoals wij ‘m noemen). 

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. Achter de titels hebben we zelfs een gekleurde (lila, zalmroze en lichtblauwe) toegevoegd, om de groei van de mens uit te beelden. Om de kalmte te bewaren in deze drukke nieuwe stijl, hebben we voor het serene Mulish gekozen als body tekst. Dit is een Google font dat goed leesbaar is en te gebruiken op elk apparaat en in elke browser. 

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-roze, baby blauw, 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. 

Niet alleen de fotografie, maar ook de illustratiestijl is flink aangepakt. We wilden een herkenbare illustratieve stijl die zich zou onderscheiden van andere banken.

Tot slot

SNS 4.0 is inmiddels live en daarmee is het project afgerond. Ik ben trots dat ik als visual designer de basis heb kunnen leggen van de nieuwe huisstijl van SNS. Nieuwsgierig? Neem dan snel een kijkje op SNSbank.nl.