Konzeption und Einfhrung 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 Selbstverstndlichkeit geworden. Aber groe Markenuniversen mit verteilten Systemen stellen Konzeptioner hier vor besondere Herausforderungen: # Wie spezifiziert man Modul- und Layoutverhalten fr smtliche Site-Typen? # Wie verifiziert man ein gerteunabhngiges Markenerlebnis im Usability-Test? # Wie normiert man das Ergebnis in einem Responsive Styleguide? # Wie migriert man smtliche bestehenden Inhalte?
Transcript
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
