Kunduppdrag
Konverterande och varumärkesbyggande design för Landshypotek Bank
Vi har samarbetat med Landshypotek Bank i många år och bland annat tagit fram helt digitaliserade låneansökningar för både privatpersoner och företag. Som en del av bankens digitala förändringsresa var det nu dags för den externa webbplatsen landshypotek.se att få ett nytt förbättrat utseende och funktionalitet.
Uppdraget
Uppdraget gick ut på att se över både UX, Design och teknik för en ny användarvänlig webbplats. Ett övergripande mål var att underlätta för användare att gilla, hitta och konvertera. Den nya webbplatsen skulle bland annat paketera Landshypotek Banks tjänster och erbjudanden på ett tydligare sätt. Fokus låg framför allt på bankens produkter bolån och lån till de gröna näringarna inom jord- och skogsbruk, samt att ge bankens kunder och medlemmar en bättre digital upplevelse.
Den nya webbplatsen ska:
- hjälpa banken att öka antalet låneansökningar i de digitala flödena.
- hjälpa kunder att få svar på sina frågor på ett enkelt sätt.
- stödja kunderna i deras vardag och fungera lika bra på mobil som dator.
- tydligare förmedla bankens varumärke och historia.
- upplevas modern, trygg och säker.
- vara snabb och responsiv.
- ha bästa möjliga förutsättningar för att lyckas med sökmotoroptimering (SEO).
I uppdraget ingick:
- Workshopar, intervjuer och dataanalys.
- Koncept, UX och design.
- Innehållskoncept.
- Utbildning för redaktörer i Optimizely (Episerver) och digital kommunikation.
- Systemutveckling och integrationer.
- Teknisk SEO.
Så tog vi oss an projektet
Projektet har drivits agilt och den initiala lanseringen är ett första steg på en långsiktig utvecklingsresa. Vi inledde med uppstartsworkshops där vi definierade mål, behov och förväntningar. En genomlysning av dagens webbplats gav oss insikter om trösklar och förbättringsområden. Vi analyserade trafiken dels för att se vilka sidor som engagerade mest, dels för att se var användarna fick problem och gick vilse. För att inte missa värdefull input från kunderna intervjuade vi även kundservicemedarbetare. Det är ett effektivt sätt att få reda på vad som fungerar bra eller dåligt med webbplatsen, eftersom de talar med kunderna varje dag.
Identifierade trösklar och förbättringsområden
Den befintliga webbplatsen hade några år på nacken och hade med tiden blivit onödigt krånglig och vildvuxen. Användarna hade bland annat svårt att orientera sig i den djupa navigationen, vilket gjorde att de kom in i fel ansökningsflöde. Många kontaktade också kundservice via telefon för att få svar på enklare frågor som besvaras lika bra på webben. Vem vill egentligen ringa när det inte behövs?
Redaktörerna var även begränsade i de befintliga sidmallarnas struktur och layout. De hade svårt att paketera och presentera sitt innehåll på ett rättvisande sätt. Det fanns ett behov av nya block och komponenter i CMS-verktyget Optimizely för att bättre kunna paketera bankens erbjudande och förmedla varumärket.
Designen behövde även en digital tillgänglighetsanpassning enligt WCAG-standard, för att få bättre läsbarhet. För att kunna prestera bättre i sökmotorer la vi även stor vikt till att säkerställa god prestanda och snabba sidladdningstider.
Lösningen
UX och Design
Landshypotek Bank har en genomarbetad visuell identitet, med en färgpalett och bildmanér som förmedlar varumärket på ett fint sätt. Landshypotek Bank är måna om att behålla sin identitet med rötterna i den svenska myllan och vara nära sina kunder. Däremot ska det inte ske på bekostnad av god användbarhet och vårt uppdrag blev att skruva och justera befintligt manér för att fungera bättre digitalt.
- Vi tog avstamp i den grafiska profilen
- Färger och typografi har tillgänglighetsanpassats för bättre läsbarhet
- Lättolkade call-to-actions gör det enkelt att hitta rätt
- En behaglig och varierad layout hjälper användaren att ta till sig innehållet på ett intuitivt sätt.
- Sidmallarna ger en behaglig mix av varumärkesupplevelse och fakta som i sin tur ska leda till konvertering.
- Vi säkerställde att den design vi tog fram gick att utveckla inom tids- och budgetramarna
- Designen visualiserades i wireframes som i sin tur konkretiseras med hjälp av visuell design.
Struktur
Med en ny förbättrad sidstruktur, navigation och ett nytt logiskt flöde har vi gjort det lätt för användaren att hitta rätt. Navigationen har numera tydliga ingångar för bankens två kärnprodukter: låna och spara. Även räntesidorna, som är några av de mest besökta sidorna, har fått tydliga och logiskt placerade ingångar i rätt kontext.
Sidmallar
Sidmallarna har fått en ny design som både paketerar tjänsterna och varumärket på ett tydligare sätt. Vi har tänkt behovsanpassat och gett både startsida, kategorisidor och produktsidor tydligare ingångar och en mer varierad layout för ökad läsbarhet.
Eftersom banken erbjuder både enkla och mer komplexa produkter togs två olika produktsidor fram. I den ena varianten finns behovsanpassade call-to-actions och flikar för att dela upp innehållet i mindre delar. Den andra varianten är mer avskalad.
För att avlasta kundservice och undvika att användare tar kontakt med dem för enklare frågor, har vi gjort det lättare för kunderna att hitta svar på sina frågor direkt på webben. Vanliga frågor och svar har till exempel inkluderats i sin kontext på produktsidorna och även fått en mer framträdande plats på kundservicesidan.
Design
För den nya uppdaterade designen har vi tagit avstamp i bankens befintliga grafiska profil, men justerat den för att fungera bättre i digitala kanaler. Designen har utvecklats med en färgpalett som har godkända kontraster (AA) enligt kända tillgänglighetsprinciper (WCAG). Länkar har tydliggjorts och klickbara ytor har ramats in.
För att skapa dynamik och en varmare personlig touch har ljusa färgplattor använts. Plattorna ramar in, grupperar och bryter av på ett snyggt och stilrent sätt. Primära call-to actions har fått tydliga kontrastfärger genom en varm orange eller naturskön grön färg.
För att särskilja bankens unika erbjudande och varumärke frångick vi den traditionellt bankblåa färgen och använde i stället en mjukare grön färg i kombination med brunt.
Utveckling och teknik
Webbplatsen är baserad på Optimizely (Episerver) med integrationer mot kringliggande system. Gränssnittet är utvecklat i Vue.
För att förmedla Landshypoteks varumärke och skapa rätt känsla på webbplatsen använder vi många och stora bilder. För att ändå kunna garantera god prestanda och möta bankens krav på snabba sidladdningar valde vi att använda ett Content Delivery Network (CDN) för att serva alla bilder på siten. Tack vare CDN:et har även redaktörernas bildarbete förenklats, eftersom CDN:et automatiskt beskär och skalar om bilderna baserat på var på sidan de används och vilken typ av enhet besökaren använder (mobil, surfplatta eller dator). Som redaktör räcker det nu med att man laddar upp en bild med bra upplösning, så sköter systemet resten; dessutom med väsentligt snabbare laddningstider. Valet av CDN föll på CloudImage av Scaleflex, inte minst för att det är ett europeiskt bolag och compliant med GDPR-direktivet, tillskillnad från många andra amerikanska alternativ.
För att möta EU-direktiven som finns kring cookiehantering, använder vi CookieBot, vilket är ett tredjepartsverktyg som automatiskt kategoriserar de cookies webbplatsen använder och låter besökaren själv välja om hen vill godkänna alla, eller bara vissa typer av cookies.
Utvecklingsarbetet bedrevs agilt och planerades i sprintar tillsammans med projektteamet från Landshypotek Bank.
Stöd och utbildning till bankens redaktörer
För att hjälpa Landshypotek att förvalta den nya designen har vi utbildat redaktörerna i innehållsarbete. Till exempel har vi genomfört en digital utbildning för att öka förståelsen kring hur användare beter sig digitalt, men också hur redaktörerna ska tänka när de producerar innehåll, både utifrån användarnas behov och beteende och interna behov och målsättningar.
För att kunna hantera redaktörsgränssnittet och de nya komponenterna som designen innehåller på ett bra sätt, har vi även utbildat redaktörerna i hur de ska arbeta med Optimizely (Episerver) och de nya sidmallarna och blocken rent praktiskt.
Resultat
Efter lanseringen har banken fått positiv feedback, både internt och från sina kunder. Kundservice får färre samtal tack vare att kunderna nu själva enklare kan hitta svar på sina frågor. Banken kan nu även arbeta mer aktivt med sökordsoptimering, vilket fått positiva effekter genom ökad trafik. Den nya designen har även medfört högre konverteringsgrad och fler nya nöjda kunder.
Om Landshypotek Bank
Landshypotek Bank vill bidra till ett rikare liv i hela landet. Ända sedan 1836 har de finansierat jord- och skogsbrukares boende och företagande. Sedan några år tillbaka kan alla med ett hjärta som klappar för landsbygden också spara i Landshypotek Bank samt att de nu även erbjuder bolån till hus. Landshypotek Bank blev bank i april 2013 och är en av Sveriges tio största banker. Banken ägs av ca. 38 000 lånekunder inom jord och skog, organiserade som medlemmar i Landshypotek Ekonomisk Förening.
Besök Landshypoteks webbplats