multiscreen markenerlebnis deutsche post

26
Multiscreen-Markenerlebnis Deutsche Post Konzeption und Einführung eines Responsive (Re)Designs bei einer DAX30 Marke. Berlin, 24.05.2014

Upload: vbuchenau

Post on 05-Dec-2014

301 views

Category:

Internet


2 download

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?

TRANSCRIPT

Page 1: Multiscreen Markenerlebnis Deutsche Post

Multiscreen-Markenerlebnis

Deutsche PostKonzeption und Einführung eines Responsive (Re)Designs bei einer DAX30 Marke.

Berlin, 24.05.2014

Page 2: Multiscreen Markenerlebnis Deutsche Post

||

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

Page 3: Multiscreen Markenerlebnis Deutsche Post

||

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

Page 4: Multiscreen Markenerlebnis Deutsche Post

||

100%www.deutschepost.de

Multiscreen-Strategie

für durchgängiges Markenerlebnis

4© p i x e l p a r k

Page 5: Multiscreen Markenerlebnis Deutsche Post

||

10 Konzeptmethoden haben zum Ziel geführt

© p i x e l p a r k

CODE-

FRAMEWORK

CONTENT-

TRANS-

FORMATION

5

Page 6: Multiscreen Markenerlebnis Deutsche Post

||© 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

Page 7: Multiscreen Markenerlebnis Deutsche Post

||

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

Page 8: Multiscreen Markenerlebnis Deutsche Post

||

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

Page 9: Multiscreen Markenerlebnis Deutsche Post

||

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

Page 10: Multiscreen Markenerlebnis Deutsche Post

||

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

Page 11: Multiscreen Markenerlebnis Deutsche Post

||

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

Page 12: Multiscreen Markenerlebnis Deutsche Post

||

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

Page 13: Multiscreen Markenerlebnis Deutsche Post

||

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

Page 14: Multiscreen Markenerlebnis Deutsche Post

||

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

Page 15: Multiscreen Markenerlebnis Deutsche Post

||

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

Page 16: Multiscreen Markenerlebnis Deutsche Post

||

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

Page 17: Multiscreen Markenerlebnis Deutsche Post

||

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

Page 18: Multiscreen Markenerlebnis Deutsche Post

||

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

Page 19: Multiscreen Markenerlebnis Deutsche Post

||

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

Page 20: Multiscreen Markenerlebnis Deutsche Post

||

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

Page 21: Multiscreen Markenerlebnis Deutsche Post

||

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

Page 22: Multiscreen Markenerlebnis Deutsche Post

||

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

Page 23: Multiscreen Markenerlebnis Deutsche Post

||

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

Page 24: Multiscreen Markenerlebnis Deutsche Post

||

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

Page 25: Multiscreen Markenerlebnis Deutsche Post

||

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

Page 26: Multiscreen Markenerlebnis Deutsche Post

||

Das Resultat:

Deutsche Post Multiscreen 2014

26© p i x e l p a r k