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?

1. Multiscreen-Markenerlebnis
Deutsche Post
Konzeption und Einführung 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 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. ||
100%
www.deutschepost.de
Multiscreen-Strategie
für durchgängiges Markenerlebnis
4© p i x e l p a r k

5. ||
10 Konzeptmethoden haben zum Ziel geführt
© 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. ||
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. ||
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 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. ||
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 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. ||
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. ||
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. ||
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. ||
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. ||
 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. ||
 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. ||
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. ||
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. ||
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. ||
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. ||
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