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