Multiscreen-Markenerlebnis
Deutsche Post
Konzeption und Einführung eines Responsive (Re)Designs bei einer DAX30 Marke.
Ber...
||
Rollout &
Content Migration
Corporate Design
Governance
Multiscreen
User Experience
Deutsche Post 2014
Multiscreen-Rela...
||
1%
m.deutschepost.de
Ausgangspunkt: Die Deutsche Post lieferte an
kompakte Geräte nur einen Bruchteil ihrer Inhalte aus...
||
100%
www.deutschepost.de
Multiscreen-Strategie
für durchgängiges Markenerlebnis
4© p i x e l p a r k
||
10 Konzeptmethoden haben zum Ziel geführt
© p i x e l p a r k
CODE-
FRAMEWORK
CONTENT-
TRANS-
FORMATION
5
||© 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
M...
||
Multiscreen UX-Design
Wie nehme ich den Kunden mit auf die Reise?
1. Breakpoints festlegen 3. Layout-Transfer
definiere...
||
Schlüsselmodule für Multiscreen-Mechanik
Code
Framework
Rapid
Prototyping
Multiscreen
Styleguide
Content
Migration
Cont...
||
Multiscreen UX-Design
Analysebeispiel: Produktdetail Shop
Desktop Small Tablet Smartphone
TRANSFERSTRATEGIEBEISPIEL
Ska...
||
Multiscreen UX-Design
Simulation im Klickmodel „White“
zum Klickmodell White © p i x e l p a r k 10
Code
Framework
Rapi...
||
Nutzerakzeptanz
Multiscreen Customer Journey
© p i x e l p a r k
Feature
Phone
Smartphone
4“
Small Tablet
7“
Tablet
10“...
||
Nutzerakzeptanz
Klickmodell „Nutzertest“
zum Klickmodell Nutzertest 12© p i x e l p a r k Code
Framework
Rapid
Prototyp...
||
Nutzerakzeptanz
6 Probanden (3m/3w) - 3 Use Cases - 1 Stunde
© p i x e l p a r k
Jeder Nutzer testet
 die komplette Cu...
||
Frage
USABILITY
1. Die Website ist insgesamt benutzerfreundlich. OK
2. Die Führung durch die einzelnen Seiten ist unkom...
||
ACHTUNG
WERBUNG!
Nutzerakzeptanz
Crowd-Testing ≠ Crowd-Testing
© p i x e l p a r k 15
Crowd-Worker
 Reale Nutzer
 Gro...
||
Nutzerakzeptanz
Test-Szenarien für Crowd-Test
zum Klickmodell Crowd Test © p i x e l p a r k
Gruppe 1 Gruppe 2: Gruppe ...
||
Frage Iteration 1 Iteration 2
USABILITY
1. Die Website ist insgesamt benutzerfreundlich. OK OK
2. Die Führung durch die...
||
 Basis für Fixpreis-Ausschreibung
 Vorgabe für Fontend- / Backend-
Entwicklung durch Drittanbieter
 Oder nichts als ...
||
 Zwei Design-Generationen -
ein einheitliches Zieldesign
 Reduktion von über 3.000 Seiten auf 1.000
 Agenda für auto...
||
Rollout
Ergebnis der Content Migration (z.B. Geovista)
Code
Framework
Rapid
Prototyping
Multiscreen
Styleguide
Content
...
||
Rollout
Ergebnis der Content Migration (z.B. Geovista)
Code
Framework
Rapid
Prototyping
Multiscreen
Styleguide
Content
...
||
Designelemente
 Basis-Design
 Desktop-, Tablet-, Smartphone
 Multiscreen-Verhalten im Klickmodell
Bildwelt
 Illustr...
||
Online Brand Governance
Multiscreen Styleguide
23© p i x e l p a r k Code
Framework
Rapid
Prototyping
Multiscreen
Style...
||
Schlüssel zum Projekterfolg
Evolutionäres Prototyping
24© p i x e l p a r k
Klickmodell„White“
Code
Framework
Klickmode...
||
Ausbau zum Code Framework
sichert Rollout über die WCMS-Plattform hinaus
25© p i x e l p a r k Code
Framework
Rapid
Pro...
||
Das Resultat:
Deutsche Post Multiscreen 2014
26© p i x e l p a r k
Nächste SlideShare
Wird geladen in …5
×

Multiscreen Markenerlebnis Deutsche Post

993 Aufrufe

Veröffentlicht am

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?

Veröffentlicht in: Internet
0 Kommentare
3 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
993
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
30
Aktionen
Geteilt
0
Downloads
21
Kommentare
0
Gefällt mir
3
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Multiscreen Markenerlebnis Deutsche Post

  1. 1. Multiscreen-Markenerlebnis Deutsche Post Konzeption und Einführung eines Responsive (Re)Designs bei einer DAX30 Marke. Berlin, 24.05.2014
  2. 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. 3. || 1% m.deutschepost.de Ausgangspunkt: Die Deutsche Post lieferte an kompakte Geräte nur einen Bruchteil ihrer Inhalte aus.* * wohl dosiert auf vermeintlichen mobilen Kontext, nachfragebezogenes 80/20 Prinzip, aber unvollständig. 3© p i x e l p a r k 100% www.deutschepost.de
  4. 4. || 100% www.deutschepost.de Multiscreen-Strategie für durchgängiges Markenerlebnis 4© p i x e l p a r k
  5. 5. || 10 Konzeptmethoden haben zum Ziel geführt © p i x e l p a r k CODE- FRAMEWORK CONTENT- TRANS- FORMATION 5
  6. 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. 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. 8. || Schlüsselmodule für 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. 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. 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. 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 Frühstück am Small Tablet: Was kostet ein Brief nach USA? In der Mittagspause am PC: Briefmarke online drucken. Unterwegs per Smartphone: Nächsten 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. 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. 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 Endgerät (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. 14. || Frage USABILITY 1. Die Website ist insgesamt benutzerfreundlich. OK 2. Die Führung durch die einzelnen Seiten ist unkompliziert und übersichtlich. ! auf dem PC auf dem Tablet auf dem Smartphone ! 3. Ich bin auf allen Geräten gleich schnell ans Ziel gekommen. ! DESIGN 4. Das Layout / Design gefällt mir auf allen Geräten gut. ! 5. Die Gestaltung der Seite ist auf allen Geräten modern. OK JOYOFUSE 6. Die Nutzung der Seite hat mir auf allen Geräten Spaß gemacht. OK 7. Ich würde diese Seite zukünftig auf allen Geräten 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 Geräte bewertet wurde. Möglicherweise 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 abfällt. © 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. 15. || ACHTUNG WERBUNG! Nutzerakzeptanz Crowd-Testing ≠ Crowd-Testing © p i x e l p a r k 15 Crowd-Worker  Reale Nutzer  Große Crowd  Zielgruppen wählbar  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. 16. || Nutzerakzeptanz Test-Szenarien für 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. 17. || Frage Iteration 1 Iteration 2 USABILITY 1. Die Website ist insgesamt benutzerfreundlich. OK OK 2. Die Führung 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 gefällt mir auf allen Geräten gut. ! OK 4. Die Gestaltung der Seite ist auf allen Geräten modern. OK OK JOYOFUSE 5. Die Nutzung der Seite hat mir auf allen Geräten Spaß gemacht. OK OK 6. Ich würde diese Seite zukünftig auf allen Geräten 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. 18. ||  Basis für Fixpreis-Ausschreibung  Vorgabe für 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. 19. ||  Zwei Design-Generationen - ein einheitliches Zieldesign  Reduktion von über 3.000 Seiten auf 1.000  Agenda für automatische Migrationsskripte  Vorgaben für 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
  20. 20. || Rollout Ergebnis der Content Migration (z.B. Geovista) Code Framework Rapid Prototyping Multiscreen Styleguide Content Migration Content Assessment Modul- Spezifikation Crowd Testing Mobile Usability Modul- transfer Collaborative Design Content- Migration
  21. 21. || Rollout Ergebnis der Content Migration (z.B. Geovista) Code Framework Rapid Prototyping Multiscreen Styleguide Content Migration Content Assessment Modul- Spezifikation Crowd Testing Mobile Usability Modul- transfer Collaborative Design Content- Migration
  22. 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. 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. 24. || Schlüssel zum Projekterfolg Evolutionäres Prototyping 24© p i x e l p a r k Klickmodell„White“ Code Framework Klickmodelle„Test“ Code Model Klickmodell„Style“ Code Framework Rapid Prototyping Multiscreen Styleguide Content Migration Content Assessment Modul- Spezifikation Crowd Testing Mobile Usability Modul- transfer Collaborative Design Rapid Prototyping
  25. 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. 26. || Das Resultat: Deutsche Post Multiscreen 2014 26© p i x e l p a r k

×