Gastvortrag zum Thema Conversion Optimierung und User Experience vor Studenten der Fresenius Hochschule, Hamburg 2018

1. Conversion Optimierung
bei der Hanseatic Bank
Oder: Wie man den Sales Funnel immer breiter macht
14.05.2018

2. Hanseatic
Bank
09.03.2019
Ein paar Worte zur Hanseatic Bank.
• Zwei starke Partner im Rücken
• Fast 50 Jahre Erfahrung
• Eigenes Service Center für eine schnelle und kompetente
Finanzierungsabwicklung
• Knapp 500 kreative und hoch motivierte Mitarbeiter
• Service- und kundenorientiert durch persönliche Beratung in
10 Filialen
• Jährlich über 2 Millionen direkte eins-zu-eins Kundenkontakte
• Jede Minute starten 13 neue Kundenkontakte
• Expertise durch langjährige Zusammenarbeit mit Banken und
Finanzdienstleistern
Titel der Präsentation
2

3. Hanseatic
Bank
Ziele und Werte.
3

4. Hanseatic
Bank
Geschäftsbereiche und Kanäle.
4

5. „Im Grunde sind es doch
die Verbindungen mit
Menschen, die dem
Leben seinen Wert
geben.“
Alexander von Humboldt

6. Hanseatic
Bank
Kunde im Mittelpunkt.
6
„Der Kunde im Mittelpunkt“ ist eine
grundsätzliche Einstellung der Hanseatic
Bank, sich auf den Kunden und seine
Bedürfnisse einzustellen.
• Der Kunde nimmt jeden Kontakt mit
der Bank als Erlebnis mit der
Hanseatic Bank wahr – egal, ob er mit
dem Back Office, Kundenservice oder
Mahnwesen spricht oder schreibt.
• Die Prozesse und die gesamte
Kommunikation Richtung Kunde
werden wir neu definieren bzw.
optimieren und den Service-gedanken
in den Vordergrund stellen.

7. Hanseatic
Bank
Arbeiten bei der Hanseatic Bank.
Einige Highlights unserer Mitarbeitervorteile:
• Zuschuss zur HVV-ProfiCard
• 15 % Mitarbeiterrabatt bei Otto
• Vermögenswirksame Leistungen
• Kostenlose Bio-Obstlieferungen sowie kostenlose
Wasser- und Kaffee Angebote
• Massageangebot
• Umfangreiches, bezuschusstes Angebot an Sport-
und Gesundheitskursen über die Plattform
machtfit.de
• Regelmäßige Mitarbeiterevents und After-Works
• Mobiles Arbeiten (Work 4.0)
• Eigenes Solution Lab und neue Agile Organisation
Titel der Präsentation 709.03.2019

8. Hanseatic
Bank
Ein paar Worte zu mir.
• Technische Ausbildung, dann Autodidakt im
Marketing / Online-Marketing / E-Business
• 26 Jahre Berufserfahrung
- 6 Jahre Planung, Projektleitung und Vertrieb
- 9 Jahre Agentur-Background (davon 5 Jahre
als Freelancer)
- 11 Jahre auf Unternehmensseite
• 20 Jahre Werbung und Marketing
- B2B und B2C
- FMCG, Industrie, Pharma, Finanzdienstleistung
- 80% Online-Business, 20% Offline
8

9. Hanseatic
Bank
Ein paar Worte zu mir.
• Seit 2009 bei der Hanseatic Bank
• Gestartet als Online-Marketing Manager,
aktuell Leiter Produktmanagement
• Mitglied im Kernteam des Solution Labs und
der Zukunftswerkstatt (Work 4.0)
• Zwei Teams mit insgesamt 11 Mitarbeitern
• Team E-Business: Verantwortlich für Frontend-
Plattformen für Kunden und Vertriebspartner
• Team Finanzprodukte: Verantwortlich für
Kreditkarten, Kredite, Geldanlagen
Hanseatic
Bank
9

10. Eine kleine Zeitreise
• Warum das Ganze eigentlich?
• Seit wann machen wir das?
• Wie machen wir das?
• Und was hat‘s gebracht?

11. Hanseatic
Bank
Wenn Webseiten in die Jahre kommen,
macht man meistens einen Relaunch.
So sah es 2003 – 2011 aus:
11

12. Hanseatic
Bank
Bis dahin gab es keine CRO. Aber immerhin
ein Konzept für eine neue Website.
Damit gingen wir Mitte 2011 live:
12

13. Hanseatic
Bank
Wir starteten erste Optimierungen
Ende 2011 sahen wir schon so aus:
13

14. Hanseatic
Bank
Warum das Ganze?
Hintergrund:
• Sukzessive Reduzierung klassischer Online-Marketing
Maßnahmen für Kreditkarte und Privatkredit aus
strategischen Gründen.
• Zwangsläufige Abnahme von Leads/Sales durch Wegfall
der Kampagnen.
• Traffic-Steigerung über parallel laufende SEO-
Maßnahmen kann Kampagnentraffic nicht ausgleichen.
Frage:
Wie können wir den Umsatz trotzdem halten oder steigern
und das Beste aus dem generischem Traffic machen??
Hanseatic
Bank
14
Lösung:
Toolbasierte Website- und Conversion-Optimierung!

15. Hanseatic
Bank
Strategische Änderungen haben
auch ihr Gutes.
15
2008 2011 2012 2013 2014 2015
?
+107% Uplift
Visitor-Lead-CR
+41% Uplift
Visitor-Lead-CR
Testbudget
2017
Start Online-
Marketing für
GenialCard
Relaunch
Corporate Website
– Von Einzelseiten
zum Portal
Strategische
Reduktion der
Online-
Maßnahmen
Start Multivariates
Testing aller
Seitenbereiche
Kombination MVT
und
Formularanalyse
Redesign Corporate
Website – Rahmendesign
und Navigationskonzept
Einführung GoldCard in
12/2014
Restart der Online-
Marketing Maßnahmen
über alle Kanäle
Erneutes Testing zur
Optimierung der
mobilen Antragsstrecke
Ausweitung der
Testing-
Maßnahmen auf
AI-gestützte
Personalisierung
und Online-
Usability-Tests

16. Hanseatic
Bank
Test: Reduktion der Vorteile
16
+11,90%
mehr Leads

17. Hanseatic
Bank
Test: Wording Call-to-Action
17
+58,53%
mehr Leads

18. Hanseatic
Bank
Test: Größe und Position des
Call-to-Actions
18
+14,47%
mehr Leads

19. Hanseatic
Bank
Test: Position und Reihenfolge
der Prozessschritte im Antrag
19
+12,28%
mehr Leads

20. Hanseatic
Bank
Test: Reduktion der Links im
Footer (Produktlinks)
20
+ 4,90%
Produktklicks

21. Hanseatic
Bank
Test: Navi-Reihenfolge, Position
Trust-Elemente
21
+17,93%
mehr Leads

22. Hanseatic
Bank
Test: Ausblendung Top-Navi im
Antrag
22
+18,74%
mehr Leads

23. Hanseatic
Bank
Ein erstes Zwischenfazit.
Freigewordenes Kampagnenbudget wurde
sinnvoll in Conversion-Optimierung investiert.
Conversions wurden über die komplette
Webseite deutlich gesteigert.
23
Idee
Konzept
Design

24. Hanseatic
Bank
24
• 1. Formularanalyse im Februar 2013 offenbarte
klare Optimierungspotentiale in der Antragsstrecke
• Umsetzung der Optimierungen im April 2013
• Planung eines Follow Up-Tests im Sommer 2013
• Kombination von MVT für Formulardesign,
Mousetracking und Abbrecherbefragung
Maßnahmen ab 2013

25. Hanseatic
Bank
Designtest bestätigte Default-Variante
2509.03.2019
Default PlusMinus OneLine TwoPages Old
Testvarianten erzielen
negative Uplifts von
-11 % bis - 34 %

26. Hanseatic
Bank
26
Veränderungen am Formular im Detail
Verkleinerung des Viewports
(scrollbarer Container)
Dynamisierungen und
Streichen optionaler Felder
Trust-Elemente permanent
im Viewport
Wegfall von Abfragen
(z. B. Partnerkarte)
Verkürzung durch
Text-Optimierung (z. B. Schufa-Klausel)
UX-Optimierung von Abfragen

27. Hanseatic
Bank
Veränderungen am Formular im Detail

28. Hanseatic
Bank
Veränderungen am Formular im Detail
Stand 10/2013

29. Hanseatic
Bank
Veränderungen am Formular im Detail
Stand 10/2013
Erhöhte Korrektur- und Abbruchwerte durch auftretende Fehler

30. Hanseatic
Bank
Beispiel einer anonymisierten Formularanalyse

31. Hanseatic
Bank
Veränderungen am Formular im Detail
Stand 02/2013 Stand 10/2013
Kürzere Verweildauer
Mehr Aktivität
Höhere Ausfüllrate
Weniger Abbrüche
Conversion
+ 3 %

32. Hanseatic
Bank
Zweites Zwischenfazit.
Wir haben durch permanentes Testen (Multivariat,
A/B, Mousetracking, Heatmap-Analyse) stetige
Verbesserungen im Funnel erzielt.
Trotz Wegfalls des Kampagnentraffics von nahezu
80% konnte durch die CRO-Maßnahmen die Anzahl
an Leads und Sales innerhalb von rund drei Jahren
auf das alte Niveau zurückgeführt werden.
Die Frage war nun, kann man diese Erkenntnisse
adaptieren? Denn Ende 2014 gab es einen Soft-
Relaunch (Redesign und neues Navigationskonzept).
32
Idee
Konzept
Design

33. Hanseatic
Bank
Evolution Website + Antragsstrecke
2011 2014

34. Hanseatic
Bank
Evolution Website + Antragsstrecke
2011 2014
2015 ??

35. Hanseatic
Bank
Wie geht es in 2015 weiter?
Hanseatic
Bank
35
Haben wir Mobilegeddon verpasst?
Jein – es gab wie so oft andere Prioritäten.
Ist Mobile für uns relevant?
JA – wir haben einen Trafficanteil von 25% bei Smartphones und 11%
bei Tablets.
Konvertiert der Smartphonetraffic?
Ja, teilweise besser als Desktop.
Welche Optimierungen sind geplant?
Quickwins durch angepassten Antragsdownload für DT/Tablets und
Smartphones.
m-pathy UX Insights von Tablet-/Smartphone-Usern für mobile
Antragsstrecke.
Responsive Design & Responsive Content auf der Corporate Website.

36. Hanseatic
Bank
Ausgangslage: nicht-responsive
Antragsstrecke
Hanseatic
Bank
36
Darstellung auf mobilen Devices technisch
möglich, aber nicht optimiert.

37. Hanseatic
Bank
Schritt 1: Identifikation bestehender
Usability Hürden
37
Mit m-pathy aufgezeichnete Seiten:

38. Hanseatic
Bank
Schritt 1: Identifikation bestehender
Usability Hürden
38
Abbrecherbefragung:

39. Hanseatic
Bank
Schritt 2: Ableitung von Quickwins
Schnell umsetzbare Optimierungen für alle Devices
• Logische Clusterung von Eingabefeldern (z.B. Geburtsdatum beim
Namen)
• Entfernung des Autoscrolls
• Radiobuttons statt Dropdowns bei 2-3 Auswahloptionen
• Sofort sichtbare und deutlicher Hinweise bei Pflichtfeldern (z.B.
Mobilnummer)
• Optimierte Validierungen (z.B. Leerzeichen bei IBAN,
Sonderzeichen bei Mobilnummer)
• Verständliche und kurze Texte!

40. Hanseatic
Bank
Schritt 3: Entwicklung eines Prototypen für
Smartphone User (Mobile first)

41. Hanseatic
Bank
Schritt 4: Umsetzung mobile Antragsstrecke
Umsetzung für Smartphone

42. Hanseatic
Bank
Schritt 4: Umsetzung mobile Antragsstrecke
Umsetzung für Tablets Umsetzung für Desktop

43. Hanseatic
Bank
Erste Ergebnisse.
Go Live mit Typo3 Releasewechsel Mitte März 2016
• - 5% Absprungrate bei Mobile/Tablet (Quelle:
Google Analytics)
• - 10% Abbruchquote im Antrag (1. Schritt) bei
Smartphone Usern (Quelle: m-pathy)
• Deutliche Steigerung der Conversion
(= abgeschickter Antrag)
- Desktop: 7% auf 9% (+ 29%)
- Tablet: 3% auf 7% (+ 133%)
- Smartphone: 3% auf 5% (+ 66%)
(Quelle: m-pathy)
43
Idee
Konzept
Design

44. Hanseatic
Bank
Wie geht‘s weiter?
Hanseatic
Bank
44
UX getriebener Relaunch im Sommer 2017
• Full-responsive Website auf Basis von
Nutzerbefragungen und den Erfahrungen der letzten
fünf Jahre CRO
Ausbau der Optimierungsmaßnahmen durch
weitere technische Tools:
• Bisher: Beste Variante für alle Nutzer (Multivariates
Testing)
• Neu: Beste Variante für den individuellen Nutzer (AI-
gestützte Personalisierung
• Bisher: Hypothesenentwicklung und Expertenwissen
• Neu: Realtime Usability-Tests mit echten Nutzern

45. Hanseatic
Bank
Full-responsive Website
Umsetzung für Desktop Umsetzung für Tablet Umsetzung für Smartphone

46. Hanseatic
Bank
Beste Variante für den individuellen Nutzer
Die Adtelligence Personalization Platform optimiert
jedes Kundenerlebnis durch den Einsatz von
Machine Learning Algorithmen vollautomatisch.
Egal ob sich die Kunden und Besucher verändern
oder das Angebot angepasst wurde. Durch die
Automatisierung der Optimierung erhält jeder
Kunde jederzeit genau die Information, die er
benötigt. Hierzu setzt Adtelligence als erster
Anbieter weltweit neuronale Netze zur Webseiten-
Personalisierung mit Deep Learning ein.
Verbunden mit den internen Webanalyse-, CRM-
und Performance-Marketing-Daten.

47. Hanseatic
Bank
Beste Variante für den individuellen Nutzer  +5%
mehr Leads

48. Hanseatic
Bank
Realtime Usability-Tests mit echten Nutzern
• Auswahl aus großem Tester-Panel
• Devices, Altersstufen, Geschlecht frei wählbar
• Testergebnisse innerhalb 24 h
• Online-Tests ersparen umfangreiche Lab-Tests

49. Hanseatic
Bank
Realtime Usability-Tests mit echten Nutzern

50. Hanseatic
Bank
Realtime Usability-Tests mit echten Nutzern

51. Hanseatic
Bank
Und was bringt die Zukunft?
Hanseatic
Bank
Titel der Präsentation 5109.03.2019
• Autofill mit Kontoblick, Identity-
Providern, Social-Logins,
Spracheingabe, …
• Optimierung deviceübergreifend
(IoT?)
• Noch mehr Einsatz von AI/KI
=> Deutschlands erste 100% digitale
und papierlose Antragsstrecke für
Kreditkarten kommt bestimmt von der
Hanseatic Bank!

52. Danke für Ihre
Aufmerksamkeit!
14.05.2018
Matthias Blaß
Leiter Produktmanagement
matthias.blass@hanseaticbank.de
https://www.xing.com/profiles/Matthias_Blass