Konzeption und Einführung eines Responsive (Re-)Designs bei einer Dax 30 Marke: Vorgehen, Methoden, Erfahrungen. Mit dem rasanten Wandel der mobilen Nutzungsgewohnheiten ist Responsive Design in der Web-Implementierung schon fast eine Selbstverständlichkeit geworden. Aber große Markenuniversen mit verteilten Systemen stellen Konzeptioner hier vor besondere Herausforderungen: # Wie spezifiziert man Modul- und Layoutverhalten für sämtliche Site-Typen? # Wie verifiziert man ein geräteunabhängiges Markenerlebnis im Usability-Test? # Wie normiert man das Ergebnis in einem Responsive Styleguide? # Wie migriert man sämtliche bestehenden Inhalte?
Text of Multiscreen Markenerlebnis Deutsche Post
1. Multiscreen-Markenerlebnis Deutsche Post Konzeption und
Einfhrung eines Responsive (Re)Designs bei einer DAX30 Marke.
Berlin, 24.05.2014
2. || Rollout & Content Migration Corporate Design
Governance Multiscreen User Experience Deutsche Post 2014
Multiscreen-Relaunch einer DAX30-Marke p i x e l p a r k 2
3. || 1% m.deutschepost.de Ausgangspunkt: Die Deutsche Post
lieferte an kompakte Gerte nur einen Bruchteil ihrer Inhalte aus.*
* wohl dosiert auf vermeintlichen mobilen Kontext,
nachfragebezogenes 80/20 Prinzip, aber unvollstndig. 3 p i x e l p
a r k 100% www.deutschepost.de
4. || 100% www.deutschepost.de Multiscreen-Strategie fr
durchgngiges Markenerlebnis 4 p i x e l p a r k
5. || 10 Konzeptmethoden haben zum Ziel gefhrt p i x e l p a r
k CODE- FRAMEWORK CONTENT- TRANS- FORMATION 5
6. || p i x e l p a r k 6 6 p i x e l p a r kCode Framework
Multiscreen UX-Design CD-Adaption Vorstudie Rapid Prototyping
Multiscreen Styleguide Content Migration Content Assessment Modul-
Spezifikation Crowd Testing Mobile Usability Modul- transfer
Collaborative Design Collaborative Design
7. || Multiscreen UX-Design Wie nehme ich den Kunden mit auf
die Reise? 1. Breakpoints festlegen 3. Layout-Transfer definieren
Quelle: lukew.com 2. Modul-Transfer definieren Quelle:
M.Zimmermann, slideshare p i x e l p a r k 7 7 p i x e l p a r
kCode Framework Rapid Prototyping Multiscreen Styleguide Content
Migration Content Assessment Modul- Spezifikation Crowd Testing
Mobile Usability Modul- transfer Collaborative Design Collaborative
Design
8. || Schlsselmodule fr Multiscreen-Mechanik Code Framework
Rapid Prototyping Multiscreen Styleguide Content Migration Content
Assessment Modul- Spezifikation Crowd Testing Mobile Usability
Modul- transfer Collaborative Design Modul- transfer
9. || Multiscreen UX-Design Analysebeispiel: Produktdetail Shop
Desktop Small Tablet Smartphone TRANSFERSTRATEGIEBEISPIEL Skalieren
Bild Umsortieren vertikale Anordnung: 1 Bildmodul 2 Text / CTA-
Bereich vertikale Anordnung Text / CTA - Bereich Reduzieren
Thumbnails Umgestalten Quelle: Zalando Lounge Code Framework Rapid
Prototyping Multiscreen Styleguide Content Migration Content
Assessment Modul- Spezifikation Crowd Testing Mobile Usability
Modul- transfer Collaborative Design Modul- transfer
10. || Multiscreen UX-Design Simulation im Klickmodel White zum
Klickmodell White p i x e l p a r k 10 Code Framework Rapid
Prototyping Multiscreen Styleguide Content Migration Content
Assessment Modul- Spezifikation Crowd Testing Mobile Usability
Modul- transfer Collaborative Design Modul- transfer
11. || Nutzerakzeptanz Multiscreen Customer Journey p i x e l p
a r k Feature Phone Smartphone 4 Small Tablet 7 Tablet 10 Large
Desktop* 27 Use Case 1 - Schwerpunkt Marketing) Produkt-Start
Produkt-Detail Use Case 2 - Schwerpunkt E-Commerce Kategorie
Produktdetail Warenkorb Use Case 3 Schwerpunkt Applikation Eingabe
Ergebnis Registrierung Homepage Deutsche Post Brief International
Start Brief International Detail Briefmarken 0,75 Ballonblume 10er
7,50 Warenkorb Postfinder Start Postfinder Eingabe Postfinder
Ergebnis Beim Frhstck am Small Tablet: Was kostet ein Brief nach
USA? In der Mittagspause am PC: Briefmarke online drucken.
Unterwegs per Smartphone: Nchsten Briefkasten finden. 11 Code
Framework Rapid Prototyping Multiscreen Styleguide Content
Migration Content Assessment Modul- Spezifikation Crowd Testing
Mobile Usability Modul- transfer Collaborative Design Multiscreen
Usability
12. || Nutzerakzeptanz Klickmodell Nutzertest zum Klickmodell
Nutzertest 12 p i x e l p a r k Code Framework Rapid Prototyping
Multiscreen Styleguide Content Migration Content Assessment Modul-
Spezifikation Crowd Testing Mobile Usability Modul- transfer
Collaborative Design Multiscreen Usability
13. || Nutzerakzeptanz 6 Probanden (3m/3w) - 3 Use Cases - 1
Stunde p i x e l p a r k Jeder Nutzer testet die komplette Customer
Journey mit jedem Endgert (Schwerpunkt auf Smartphone, Desktop als
Referenz) Experten-Team (Deutsche Post + Agentur) beobachtet live
vor Ort und identifiziert direkt im Anschluss die Verbesserung 13
Code Framework Rapid Prototyping Multiscreen Styleguide Content
Migration Content Assessment Modul- Spezifikation Crowd Testing
Mobile Usability Modul- transfer Collaborative Design Multiscreen
Usability
14. || Frage USABILITY 1. Die Website ist insgesamt
benutzerfreundlich. OK 2. Die Fhrung durch die einzelnen Seiten ist
unkompliziert und bersichtlich. ! auf dem PC auf dem Tablet auf dem
Smartphone ! 3. Ich bin auf allen Gerten gleich schnell ans Ziel
gekommen. ! DESIGN 4. Das Layout / Design gefllt mir auf allen
Gerten gut. ! 5. Die Gestaltung der Seite ist auf allen Gerten
modern. OK JOYOFUSE 6. Die Nutzung der Seite hat mir auf allen
Gerten Spa gemacht. OK 7. Ich wrde diese Seite zuknftig auf allen
Gerten wieder nutzen. OK 8. Und zwar am liebsten am PC OK mit dem
Tablet OK auf dem Smartphone ! * Nur Smartphone ** Keine direkte
Vergleichbarkeit, da in Iteration 1 ber alle Gerte bewertet wurde.
Mglicherweise methodisch bedingt negativer bewertet. Usability 2,4
Design 1,9 Joy of Use 1,9 Nutzerakzeptanz Iteration 1
Einheitliches, im Ganzen positives Markenerlebnis, das auf dem
Smartphone deutlich abfllt. p i x e l p a r k 14 Code Framework
Rapid Prototyping Multiscreen Styleguide Content Migration Content
Assessment Modul- Spezifikation Crowd Testing Mobile Usability
Modul- transfer Collaborative Design Multiscreen Usability
15. || ACHTUNG WERBUNG! Nutzerakzeptanz Crowd-Testing
Crowd-Testing p i x e l p a r k 15 Crowd-Worker Reale Nutzer Groe
Crowd Zielgruppen whlbar Kleine mobile Crowd Umgebung aufsetzen
Crowd-Tester Test-affine Crowd Mobile Nutzer Stabile Testumgebung
Profi-Tester Keine realen Nutzer Keine Zielgruppen Reale Nutzer
Reine mobile Crowd Flexible Umgebung Flexible Crowd Limitierte
Zielgruppen Code Framework Rapid Prototyping Multiscreen Styleguide
Content Migration Content Assessment Modul- Spezifikation Crowd
Testing Mobile Usability Modul- transfer Collaborative Design Crowd
Testing
16. || Nutzerakzeptanz Test-Szenarien fr Crowd-Test zum
Klickmodell Crowd Test p i x e l p a r k Gruppe 1 Gruppe 2: Gruppe
3 1. Aufklapper / 2. Wischer 1. Wischer / 2. Aufklapper Mix 16 zum
Klickmodell Aufklapper zum Klickmodell Wischer zum Klickmodell
Mixed Code Framework Rapid Prototyping Multiscreen Styleguide
Content Migration Content Assessment Modul- Spezifikation Crowd
Testing Mobile Usability Modul- transfer Collaborative Design Crowd
Testing
17. || Frage Iteration 1 Iteration 2 USABILITY 1. Die Website
ist insgesamt benutzerfreundlich. OK OK 2. Die Fhrung durch die
einzelnen Seiten ist unkompliziert und bersichtlich. ! OK auf dem
PC OK auf dem Tablet OK auf dem Smartphone ! OK DESIGN 3. Das
Layout / Design gefllt mir auf allen Gerten gut. ! OK 4. Die
Gestaltung der Seite ist auf allen Gerten modern. OK OK JOYOFUSE 5.
Die Nutzung der Seite hat mir auf allen Gerten Spa gemacht. OK OK
6. Ich wrde diese Seite zuknftig auf allen Gerten wieder nutzen. OK
OK 7. Und zwar am liebsten am PC OK mit dem Tablet OK auf dem
Smartphone ! OK Nutzerakzeptanz Iteration 2 Markenerlebnis auf
Smartphone deutlich aufgewertet p i x e l p a r k 17 Code Framework
Rapid Prototyping Multiscreen Styleguide Content Migration Content
Assessment Modul- Spezifikation Crowd Testing Mobile Usability
Modul- transfer Collaborative Design Crowd Testing
18. || Basis fr Fixpreis-Ausschreibung Vorgabe fr Fontend- /
Backend- Entwicklung durch Drittanbieter Oder nichts als Paperware?
Rollout WCMS Modulspezifikation 18 p i x e l p a r k Code Framework
Rapid Prototyping Multiscreen Styleguide Content Migration Content
Assessment Modul- Spezifikation Crowd Testing Mobile Usability
Modul- transfer Collaborative Design Modul- spezifikation
19. || Zwei Design-Generationen - ein einheitliches Zieldesign
Reduktion von ber 3.000 Seiten auf 1.000 Agenda fr automatische
Migrationsskripte Vorgaben fr redaktionelle Nachbearbeitung Rollout
Content Assessment 19 p i x e l p a r k Code Framework Rapid
Prototyping Multiscreen Styleguide Content Migration Content
Assessment Modul- Spezifikation Crowd Testing Mobile Usability
Modul- transfer Collaborative Design Content- Assessment
22. || Designelemente Basis-Design Desktop-, Tablet-,
Smartphone Multiscreen-Verhalten im Klickmodell Bildwelt
Illustrationsstil mit Motivkatalog Piktogrammstil mit Motivkatalog
Multiscreen-Bildformate Online Brand Governance Multiscreen
Styleguide 22 p i x e l p a r k Code Framework Rapid Prototyping
Multiscreen Styleguide Content Migration Content Assessment Modul-
Spezifikation Crowd Testing Mobile Usability Modul- transfer
Collaborative Design Multiscreen Styleguide
23. || Online Brand Governance Multiscreen Styleguide 23 p i x
e l p a r k Code Framework Rapid Prototyping Multiscreen Styleguide
Content Migration Content Assessment Modul- Spezifikation Crowd
Testing Mobile Usability Modul- transfer Collaborative Design
Multiscreen Styleguide
24. || Schlssel zum Projekterfolg Evolutionres Prototyping 24 p
i x e l p a r k KlickmodellWhite Code Framework KlickmodelleTest
Code Model KlickmodellStyle Code Framework Rapid Prototyping
Multiscreen Styleguide Content Migration Content Assessment Modul-
Spezifikation Crowd Testing Mobile Usability Modul- transfer
Collaborative Design Rapid Prototyping
25. || Ausbau zum Code Framework sichert Rollout ber die
WCMS-Plattform hinaus 25 p i x e l p a r k Code Framework Rapid
Prototyping Multiscreen Styleguide Content Migration Content
Assessment Modul- Spezifikation Crowd Testing Mobile Usability
Modul- transfer Collaborative Design Code Framework
26. || Das Resultat: Deutsche Post Multiscreen 2014 26 p i x e
l p a r k
