Upload
vbuchenau
View
298
Download
2
Embed Size (px)
DESCRIPTION
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?
Multiscreen-Markenerlebnis
Deutsche PostKonzeption und Einführung eines Responsive (Re)Designs bei einer DAX30 Marke.
Berlin, 24.05.2014
||
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
||
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
||
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 66© 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
||
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 77© 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
||
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
||
Multiscreen UX-Design
Analysebeispiel: Produktdetail ShopDesktop Small Tablet Smartphone
TR
AN
SF
ER
ST
RA
TE
GIE
BE
ISP
IEL
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
||
Multiscreen UX-Design
Simulation im Klickmodel „White“
zum Klickmodell White © p i x e l p a r k 10Code
Framework
Rapid
Prototyping
Multiscreen
Styleguide
Content
Migration
Content
Assessment
Modul-
Spezifikation
Crowd
Testing
Mobile
Usability
Modul-
transfer
Collaborative
Design
Modul-
transfer
||
Nutzerakzeptanz
Multiscreen Customer Journey
© p i x e l p a r k
Feature
PhoneSmartphone4“
Small Tablet7“
Tablet10“
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.
11Code
Framework
Rapid
Prototyping
Multiscreen
Styleguide
Content
Migration
Content
Assessment
Modul-
Spezifikation
Crowd
Testing
Mobile
Usability
Modul-
transfer
Collaborative
Design
Multiscreen
Usability
||
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
||
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
13Code
Framework
Rapid
Prototyping
Multiscreen
Styleguide
Content
Migration
Content
Assessment
Modul-
Spezifikation
Crowd
Testing
Mobile
Usability
Modul-
transfer
Collaborative
Design
Multiscreen
Usability
||
Frage
US
AB
ILIT
Y
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. !
DE
SIG
N
4. Das Layout / Design gefällt mir auf allen Geräten gut. !
5. Die Gestaltung der Seite ist auf allen Geräten modern. OK
JO
Y
OF
U
SE
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 14Code
Framework
Rapid
Prototyping
Multiscreen
Styleguide
Content
Migration
Content
Assessment
Modul-
Spezifikation
Crowd
Testing
Mobile
Usability
Modul-
transfer
Collaborative
Design
Multiscreen
Usability
||
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
||
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
||
Frage Iteration 1 Iteration 2
US
AB
ILIT
Y 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
DE
SIG
N
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
JO
Y
OF
U
SE
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 17Code
Framework
Rapid
Prototyping
Multiscreen
Styleguide
Content
Migration
Content
Assessment
Modul-
Spezifikation
Crowd
Testing
Mobile
Usability
Modul-
transfer
Collaborative
Design
Crowd
Testing
||
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
||
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
||
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
||
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
||
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
||
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
||
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
||
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
||
Das Resultat:
Deutsche Post Multiscreen 2014
26© p i x e l p a r k