Merkevarespagaten : en fortelling om multibranding og designsystemer
Utvikleren rynker på nesen. “Det føles som jeg lager en phishing-nettside.”
Designeren lener seg over skulderen, titter på skjermen, “Det der minner om the uncanny valley. Det er akkurat likt nok til at ulikhetene blir ubehagelige.”
“Dette kan vi ikke gjøre.”
“Enig”
Det var våren 2019, og vi hadde samlet oss på Tinden, kontorets lyse toppetasje, for å eksperimentere. Utfordringen: å få løsninger bygget av oss, utviklere og designere i Fremtind Forsikring, til å se ut som de var utviklet av enten SpareBank 1 eller DNB.
Merkevarespagaten
Fremtind Forsikring ble til 1. januar 2019, som en fusjon mellom forsikringsselskapene til SpareBank 1 og DNB. Ingen fusjon har noen gang gått på skinner. Vår fusjon gikk, for det meste, bra. Utfordringen var merkevare.
Moderne merkevarefolk er opptatt av logo og visuell identitet, ja — men også av hvordan vi skriver og snakker, organisasjonskultur, hva slags kanaler vi er tilgjengelig i, hva slags folk vi ansetter, hvilken dialekt de snakker — de som tar telefonen.
Fra de to forsikringsselskapene arvet vi arbeidsprosesser, produkter, en omfattende stack med IT-systemer, som var laget for å støtte én (og bare én) merkevare. Alt var laget for å rope “SpareBank 1!” eller “DNB!” men ikke noen ganger det ene og noen gang det andre. Bare det å sende et brev eller en e-post med riktig logo til riktig mottaker viste seg å være en omfattende jobb — vi har mange tusen maler, som sendes fra ulike systemer, og titusener av kunder som er kunder både hos DNB og en SpareBank 1-bank.
Men at det skulle holde å bytte ut en logo er gammeldags merkevaretenkning. Moderne merkevarefolk er opptatt av logo og visuell identitet, ja — men også av hvordan vi skriver og snakker, organisasjonskultur, hva slags kanaler vi er tilgjengelig i, hva slags folk vi ansetter, hvilken dialekt de snakker — de som tar telefonen. Merkevarebygging er e̶n̶ ̶t̶o̶t̶a̶l̶i̶t̶æ̶r̶ ̶i̶d̶e̶o̶l̶o̶g̶i̶ et altomfattende metodeverk. Merkevaren til bedrift X er svaret på “hvem er X?” og alt bidrar til å bygge det riktige inntrykket hos folk: Å være den man gjerne vil være kjent for å være, og å kommunisere sånn at folk kjenner det igjen og skjønner hvem man er.
Ledere løser problemer ved å snakke og skrive og planlegge. Designere og utviklere løser dem ved å bygge.
Vi digitale hoder skulle nå levere apper og nettsider som skled rett inn i DNB og SpareBank 1-bankene sine svært ulike økosystem, og støttet deres svært ulike merkevarer. Uten å rives og slites av dobbeltarbeidet. Hvordan?
Til prototypeverkstedet!
Ledere løser problemer ved å snakke og skrive og planlegge. Designere og utviklere løser dem ved å bygge. Med solid støtte fra egen ledelse, satte vi i gang å bygge. Tre sprinter, hvor vi samlet kloke hoder for å prøve og feile oss fram til en løsning. Aller helst ville vi ha en perfekt løsning: en som så ut som om bankene hadde laget det selv, men som kunne vedlikeholdes og videreutvikles av oss i Fremtind.
Det første eksperimentet vårt het “Hacked FFE”. FFE er det tekniske navnet på SpareBank 1 sitt designsystem. Gjennom noen grep som fikk utviklere til å rynke på nesa og designere til å kremte nervøst, fikk vi sider som var bygget i FFE til å se ut som om de var bygget i Eufemia, DNBs designsystem. Og det var nyttig, siden Fremtinds digitale løsninger skulle bygge videre på de vi hadde arvet fra SpareBank 1 Forsikring.
Spaghettikode og mellomnorsk
Med hacked FFE fikk vi den tekniske siden av fusjonen til å rulle. I løpet av noen måneder ga vi både SpareBank 1 og DNBs kunder en fullverdig oversikt over sine forsikringer, mulighet til å kjøpe og endre og si opp forsikringer fra sine respektive nettbanker, og det så ut som om bankene skulle ha laget det selv.
…og vi som jobbet med neste generasjons forsikringsløsninger hadde egne ideer til nye design patterns, fortsatte å tøye strikken for hva løsningene våre skulle gjøre.
Men det var en god grunn til at utviklerne rynket på nesa. Designsystemer står nemlig aldri stille. Både SpareBank 1 og DNB fortsatte å utvikle sine designsystem, og vi som jobbet med neste generasjons forsikringsløsninger hadde egne ideer til nye design patterns, fortsatte å tøye strikken for hva løsningene våre skulle gjøre.
Hvis noen på 1300-tallet hadde laget en maskin som oversatte fra latin til mellomnorsk ville det vært et sant vidunder. Men etter hvert som det norske språket forandret seg og latin sluttet å være elitenes språk, ville maskinen ha blitt rimelig unyttig. “Hacked FFE” var en sånn maskin. Den kunne ikke videreutvikles, bare bygges på nytt, og utviklingen av digitale løsninger går noen tusen ganger raskere enn språkutviklingen.
…hvordan driver en multibranding på lang sikt?
(Det finnes veier rundt dette problemet. Condè Nasts ambisiøse Verso brukes til så ulike merkevarer som Vogue og Wired Magazine. Men Verso er avhengig av at alle merkevarene og systemene styres fra samme hovedkontor, slik at endringer kan koordineres. DNB og SpareBank 1-bankene er, utenom forsikring, konkurrenter.)
Allerede etter ett år, så var Hacked FFE en kuriositet, et hinder i å utvikle nye og mer brukervennlige tjenester.
Multibrand på den tradisjonelle måten
Dette visste vi. Så mens vi jobbet med Hacked FFE, jobbet vi også med å bygge en mer langsiktig løsning. Men hvordan driver en multibranding på lang sikt?
Det mangler ikke på svar. Mange selgere av web-portaler, app-løsninger, enterprise software kan love deg at du med bare noen klikk kan få løsningen til å få din “branding”. Og med “branding” mener de som regel : din logo, og dine farger.
Disse selgerne har neppe lyttet til folk som faktisk kan merkevare og visuell identitet. Designsystemer er ikke bare bibliotek med ferdige komponenter — de uttrykker ulike filosofier for hvordan nettsider skal bygges. Innholdsnavigasjon eller menynavigasjon? Skal OK-knappen til venstre eller høyre? Skal siden oppfattes som lys og luftig eller solid og kompakt? Full oversikt til brukeren eller ett spørsmål av gangen? Tar du komponenten ut av systemet den er laget for å fungere i, blir det som å bruke ord fra tilfeldige språk i samme setning. That er possible, men gir keine mening.
Designsystemer er ikke bare bibliotek med ferdige komponenter — de uttrykker ulike filosofier for hvordan nettsider skal bygges.
Likevel: vi ville først prøve om den tradisjonelle måten å håndtere multibrand på kunne fungere for oss. Og da er vi tilbake på Tinden, i the uncanny valley. På den første sprinten laget vi noen eksempelskjema, bygget med ganske vanlige web-komponenter, og eksperimenterte med å gi disse “themes” — så man med noen små endringer i kildekoden kunne gi dem egne farger og fonter.
Det fungerte ikke. Det vil si: det fungerte sånn teknisk sett. Det var lett å utvikle nye nettsider, og gi dem DNB eller SpareBank 1 themes. Endre noe ett sted, og oppdateringen traff begge løsninger samtidig. Men det så skikkelig skikkelig dårlig ut.
“Nøytralt” er ikke nøytralt
Hva var feil? Vi hadde tatt utgangspunkt i “nøytralt” design, i “generiske” komponenter, knapper og overskrifter som så ut som et minste felles multiplum av andres nettsider og apper.
Det finnes i virkeligheten ikke noe som er fritt for branding. Om man ser på de eldste nettsidene, de som ble laget før Internett ble allemannseie og tiltrakk seg designere, markedsførere, og ambisiøse front-end utviklere — så har disse sidene også en identitet. Vi er akademikere! roper de. Vi er opptatt av tekst og orden og fakta!
Branding, merkevarebygging, er et forsøk på å forme identiteten man uansett har. Våre “generiske” komponenter sa i praksis til brukeren: Vi bryr oss ikke om denne websiden, og vi bryr oss ikke om deg. Og ved å theme komponentene i SpareBank 1-blått eller DNB-sjøgrønt sa de noe verre: jeg Ær b4nken din — st0l pÅ meg! Skrive d1tt p4ss0rd her:
Selv de som naivt klikker videre i en sånn løsning, gjør det med en grad av indre uro, med lavere tillit til leverandøren eller egne IT-ferdigheter.
Vent litt, hva skulle vi med et eget designsystem?
Verdien av godt og konsekvent grafisk design er vanskelig å kvantifisere fra løsning til løsning. Men det betyr ikke at det ikke er viktig. Brukervennlighetsguruen Jacob Nielsen oppgir “Estetisk og minimalistisk design” som en av 10 overordnede anbefalinger fra flere tiår med forskning. McKinsey observerer at de mest designmodne selskapene øker inntjeningen dobbelt så raskt som andre selskap i samme bransje. Og design er den drivende faktoren for om brukere oppfatter en nettside eller applikasjon som troverdig, en forutsetning for å være villige til å kjøpe fra den.
Sprinten var en suksess: vi hadde funnet en vei vi ikke skulle gå videre. For å komme oss ned i spagaten måtte vi teste ut noe mer ambisiøst.
Tilbake til Tinden
Til den neste sprinten brukte vi Jøkul, vårt eget designsystem.
Vent litt, hva skulle vi med et eget designsystem?
Fremtind er ikke helt usynlig. Vi er synlige for oss selv, vi er synlige som arbeidsgiver, vi er synlige som partner for start-ups innen IT eller bærekraft, vi er synlige hos forsikringsmeglerne og bilforhandlerne. Ikke minst er vi synlige for kunder som bruker forsikringen sin. For å bygge og forvalte disse flatene, har vi et designsystem.
Til sprint #2 prøvde vi å bygge en ny, eksperimentell løsning ved hjelp av Jøkul. Vi lagde en nettside slik vi ønsket å bygge nettsider — dynamisk, enkel, estetisk. Med funksjonalitet som svarte på kjente behov hos kundene (hva er jeg egentlig forsikret for?), og hos forretningsfolka (hvordan kan vi selge mer til eksisterende kunder?). Og vi bygde den som om vi ikke stod i noen merkevarespagat, som om bare vår egen merkevare betød noe. Vi bygde en “design vision”, et fyrtårn vi kunne styre etter på vei til det egentlige målet.
Vi prøver igjen, men nå gjør vi det skikkelig
Til sprint #3 delte vi oss i to grupper. Den ene gruppen tok denne ultra-Fremtindske løsningen, og prøvde å rebrande den som henholdsvis en SpareBank 1 og en DNB-løsning.
Og resultatet ble … overraskende bra! Når vi rebrandet løsningen klarte vi å ta vare på kvalitetene i den originale. Phishing-preget var borte. Vi bryr oss, sa løsningen, vi er moderne, vi hjelper deg. Og i riktig drakt (godt hjulpet av designere som virkelig hadde satt seg inn i bankenes visuelle identitet) så sa de vi er fra banken din, som du stoler på.
Vi kalte dette for “tokenization”, siden det ble mulig ved hjelp av en front-end metodikk kalt design tokens.
Den andre gruppen jobbet på en enklere måte, en vi har kalt “innramming”. De tok den opprinnelige løsningen, la på header og footer fra enten DNB eller SpareBank 1 (mens alt innimellom var i Fremtind-stil), og gjorde noen små justeringer for å unngå kollisjon mellom vår identitet og bankens.
Og innramming fungerte også … overraskende bra. Med noen små justeringer i designsystemet, klarte vi å få en løsning som var tilstrekkelig lik bankens til at 10 av 10 testdeltagere uten videre gikk ut fra at dette var en løsning fra sin bank. Dette var mulig fordi vår egen visuelle identitet, takket være et solid utgangspunkt fra SDG, er laget for å stå godt sammen med våre eieres identitet. Vår identitet konkurrerer ikke med bankenes — den supplerer, støtter.
De var troverdige. De sa ikke jeg er banken din, men heller dette er skikkelige greier, og banken din går god for det.
Likevel ble det en stor forskjell på de innrammede sidene, og sider utformet av bankene selv. Hverken vi eller testerne opplevde det som spesielt problematisk. Den store forskjellen fra “phishing-prototypen” i sprint #1 var at vi nå hadde rammet inn sider som var gjennomført godt designede, ikke et minste felles multiplum, og hadde en tydelig stemme. De var troverdige. De sa ikke jeg er banken din, men heller dette er skikkelige greier, og banken din går god for det.
Men, hvor mye kommer det til å koste?
Etter å ha jobbet oss inn i problemstillingene gjennom hacked FFE og tre sprinter, var vi blitt eksperter på multibranding. Vi avsluttet arbeidet ved å sette oss i Kreativ Sone (1. etasjen i Fremtind-bygget, hvor du kan finne post-its i alle størrelser og farger og alle veggene er tavler), sammenlignet erfaringer, diskuterte, og estimerte.
Til slutt hadde vi et sett med tall vi kunne ta med oss til fagfeller og ledere hos våre eiere. Og tallenes tale var ganske klar: tokenization, den beste løsningen fra et merkevareperspektiv, var også mye mer krevende enn innramming.
Ulempen var ikke bare at det kom til å koste mer, men at det kom til å bli mer krevende jo lengre vi holdt på med det. Vi ville brukt mer tid på det vi holdt på med i Sprint #3 (tilpasninger til merkevare), og mindre på det vi holdt på med i Sprint #2 : nytenkning og forenkling. Dessuten var innrammede løsninger vesentlig enklere å endre. Fusjoner og fisjoner, redesigns og rebranding er hverdagslige i finansbransjen. Ting står aldri stille.
Dermed ble innramming vår langsiktige løsning.
Vi står fortsatt i merkevarespagaten. Men nå er det behagelig. Vi kan stå i spagaten så lenge vi vil, med hodet og hendene frie til å bygge fremtidens forsikringsselskap for kundene og eierene.
Tl;dr
- Du kan oversette mellom to versjoner av to designsystem, men du kan ikke oversette mellom to designsystem.
- Det finnes ikke noe «nøytralt» design. Forsøker du å gjøre det nøytralt, blir det suspekt.
- Dårlig multibranding er enkelt og billig. God multibranding er dyrt, krevende, og lite fleksibelt.
- Skal du drive multibranding, trenger du å forstå din egen merkevare og visuelle identitet godt. Selv om det ikke er den du skal fronte.
