Vortrag zum Thema UX, Wireframes und mobile Websiteentwicklung auf den M-Pathy UX Insight Days, Dresden 2016

1. Vom Tracking zum Konzept
– mobile Wireframes mit m-pathy
Hanseatic Bank GmbH & Co KG
Dresden, den 16.06.2016

2. • Zwei starke Partner im Rücken
• Über 45 Jahre Erfahrung
• Eigenes Service Center für eine schnelle und
kompetente Finanzierungsabwicklung
• Über 400 regelmäßig geschulte Mitarbeiter
• Service- und kundenorientiert durch
persönliche Beratung in 10 Filialen
• 400.000 Onlinekonten und alle 5 Minuten ein
neuer Kunde
• Nah am Handel durch starke Partner
• Expertise durch langjährige Zusammenarbeit
mit Banken und Finanzdienstleistern
Unternehmenswert Kompetenz
4

3. FACTORING
• Ankauf von kurz- und
mittelfristigen Forderungen
aus Ratenkäufen
B2B / B2CKREDITGESCHÄFT
• Privatkredite
• Kreditkarten White-Label
B2CGELDANLAGEN
• Festzinsprodukte und
variabel verzinste Produkte
B2B / B2CVERSICHERUNGEN
• Restschuld- und
Direktversicherungen
Unternehmenswert Kompetenz
5

4. Die Hanseatic Bank in Zahlen*
Mehr als
400.000Onlinekonten
25,1
MILLIONEN EURO BILANZGEWINN
über 10% Marktanteil an allen in Deutschland
neu herausgegebenen VISA-Kreditkarten
193 MILLIONEN EURO
EIGENKAPITAL
45
JAHRE ERFAHRUNG
AUF DEM MARKT
400MITARBEITER
ÜBER
10Filialen bundesweit
1,7 MILLIARDEN EURO KUNDENEINLAGEN
4*Stand: 31.12.2015
ÜBER

5. 5
Entwicklung des Online-Business bei der HB seit 2008
2008 2011 2012 2013 2014 2015
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
mit m-pathy
Redesign Corporate
Website –
Rahmendesign und
Navigationskonzept
Einführung
GoldCard in 12/2014
Restart der Online-
Marketing
Maßnahmen über alle
Kanäle
Erneutes Testing mit m-
pathy zur Optimierung
der mobilen
Antragsstrecke
?
+107% Uplift
Visitor-Lead-CR
+41% Uplift
Visitor-Lead-CR
Testbudget

6. 6
Entwicklung der Zusammenarbeit mit m-pathy
03/2013 08/2013 2014
Formularanalyse
mit m-pathy
Follow Up mit Kombi
aus MVT und m-pathy
Formularanalyse
Redesign Corporate
Website –
Rahmendesign und
Navigationskonzept
07/2015
• Analyse des
Antragsprozess und
Abbrecherbefragung
mit m-pathy
• Prototyping der
Smartphone
Antragsstrecke
01/2016
Rahmenvertrag
zur Analyse und
Optimierung von
3 Plattformen
2016
• Permanentes Tracking
der Kreditkartenstrecke
auf der Website
• Formularanalyse FDL-
Portal als Vorbereitung
für Relaunch
• …

7. 7
Ausgangslage: nichtresponsive Antragsstrecke
Darstellung auf mobilen
Devices

8. 8
Vom Tracking zum Konzept – mobile Wireframes mit m-pathy
Wir hatten uns zunächst ein paar Fragen gestellt:
• Ist Mobile für uns relevant?
JA – Nutzung mit Smartphones steigt von 19% auf 27% (2015 ->2016),
bei Tablets dagegen kontant bei 10%.
• Konvertiert der Smartphonetraffic?
Ja, teilweise besser als Desktop.
• Wie wollten (konnten) wir vorgehen?
Quickwins durch angepassten Antragsdownload für DT/Tablets und Smartphones.
m-pathy UX Insights von Tablet-/Smartphone-Usern für nicht responsive Antragsstrecke.
Wireframes und Prototyping zur Entwicklung einer mobilen Antragsstrecke.

9. 9
Roadmap responsive Website
• Identifikation bestehender Usability Hürden 07/2015
• Ableitung von Quickwins 08/2015
• Entwicklung eines Prototypen für Smartphone User 08/2015
• Umsetzung mobile Antragsstrecke Q4/2015
• Umsetzung der kompletten responsiven Website 2. HJ 2016

10. 10
Identifikation bestehender Usability Hürden
Bildquelle: http://www.i-group.de
Mit m-pathy
aufgezeichnete Seiten

11. 11
Identifikation bestehender Usability Hürden
Abbrecherbefragung

12. 12
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!

13. 13
Entwicklung eines Prototypen für Smartphone User

14. 14
Entwicklung eines Prototypen für Smartphone User

15. 15
Entwicklung eines Prototypen für Smartphone User

16. 16
Entwicklung eines Prototypen für Smartphone User

17. 17
Umsetzung mobile Antragsstrecke
Prototyp Umsetzung für Smartphone

18. 18
Umsetzung mobile Antragsstrecke
Prototyp Umsetzung für Smartphone

19. 19
Umsetzung mobile Antragsstrecke
Prototyp Umsetzung für Smartphone

20. 20
Umsetzung mobile Antragsstrecke
Umsetzung für Smartphone

21. 21
Umsetzung mobile Antragsstrecke
Umsetzung für Tablets Umsetzung für Desktop

22. 22
Erste Ergebnisse
• Go Live mit Typo3 Releasewechsel Mitte März 2016
Seit dem
• - 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)
Umsetzung mobile Antragsstrecke

23. 23
Allgemein
• Adaption aller Formulare und Antragsstrecken 06-07/2016
• Umsetzung mobile Website 2. HJ 2016
• Prototypenentwicklung für das Internet-Banking Q3/2016
• Umsetzung mobiles Internet-Banking asap
Nächste Schritte mit m-pathy
• Mitarbeitertrainings für m-pathy UX Insights
• Analyse der Antragsstrecken des 3. Portals
• Permanente Analyse und Optimierung der Prozesse mit m-pathy
Nächste Schritte

24. Vielen Dank für Ihre
Aufmerksamkeit!
Hanseatic Bank GmbH & CO KG
Matthias Blaß
Leiter Produktmanagement
matthias.blass@hanseaticbank.de
https://www.xing.com/profiles/Matthias_Blass