Branded Interactions

BN RA BRA DN ED ED BTR R B A R N A N E D E BIBRNB A D N E D D E D R A N D E D RA A N D E IBN N T R ER IIC TO N T R E RIN IC TIN TN R E ITAE TETRE R IAN TEN R NI O S NS TIO O TN NSNSN AACAC ICO N CO TIN IS O SS CTATA ITAC SIO BRANDED INTERACTIONS

SG P IEERS & K A T J A W E N M A R C O S P I E S & K AMT A J AR C WOE N

Lebendige Lebendige Markenerlebniss Markenerlebnisse für eine neue Zeit eine neue Zeit

Das Das Standardwerk Standardwerk zur Markenführung zur Markenführung in der digitalen in der digitalen Transformation Transformation

M A R C O S P I E S & K ATJ A W E N G E R

BRANDED INTERACTIONS Lebendige Markenerlebnisse für eine neue Zeit

Dass man etwas schön findet, mag sich ändern, aber was gut funktioniert, funktioniert eben.

RAY EAMES

Nimm deine Vergnügungen ernst!

CHARLES EAMES

BRANDED INTERACTIONS – DRITTE, ÜBERARBEITETE AUFLAGE

Wichtiger als die konsistente Umsetzung eines Gestal­ tungsprinzips über alle Medien und in allen Märkten ist die kohärente Übertragung auf die relevanten Kontakt­ punkte und für die jeweiligen Bezugsgruppen.

Die Welt wird komplexer. Jahrzehnte alte Gewissheiten lösen sich auf. Gesellschaftliche Machtgefüge ändern sich:

Wir haben mit think moto und mit unseren beiden

die Spielregeln der Politik, die Gesetzmäßigkeiten der

Startups, flyiin und Whooosh, vieles selbst ausprobieren

Märkte, das Konsumverhalten der Kunden, Arbeits- und

müssen. Nicht alle Experimente (wir verstehen sie als

Verfahrensweisen. Unternehmen müssen darauf reagieren

Prototypen) waren von Erfolg gekrönt. Und nicht immer

– der Innovationsdruck wächst. Digitale Transformation

ist der neue auch wirklich der bessere Weg. Aber alles

ist das Heilsversprechen. Die Rezepte: Design-Thinking,

in allem arbeiten wir heute – in der Produktentwicklung

Agilität, Lean Management und New Work. Was aber

wie in der strategischen Markenführung – fokussierter,

verbirgt sich dahinter? Was davon ist für Gestalter und

iterativer und vor allem teamorientierter als früher. In die

Produktentwickler relevant? Wie lassen sich die Prinzi­

vorliegende dritte, inhaltlich intensiv überarbeitete

pien der Agilität auf die Markenführung übertragen? Die

Auflage von Branded Interactions ist dieses Praxiswissen

jeweils relevanten Methoden, Modelle und Prozesse

eingeflossen.

sinnvoll in den eigenen Design-Workflow zu integrieren, das bleibt die große Herausforderung für jeden Projekt­

Branded Interaction Design geht weit über die visuelle

verantwortlichen.

Gestaltung digitaler Markenanwendungen hinaus.

Digitale Touchpoints werden zahlreicher und vielfältiger

Branded Interactions – Digitale Markenerlebnisse planen

in ihren Anforderungen an die Gestaltung. Es gibt nicht

und gestalten hat in den vergangen Jahren viele Designer,

mehr die Website im Unternehmen. Neben der Corporate

Produktmanager und Berater in Agenturen und Unter­

Website zur Unternehmensdarstellung gibt es Websites

nehmen als Leitfaden für digitale Markenprojekte beglei­

und Apps für Marketing und Kommunikation, den Ver­

tet – und damit einen Transformationsprozess mitgestal­

trieb, den Kundenservice. Häufig sind digitale Anwen­

tet, der die Marken- aber auch die Agenturlandschaft

dungen eigenständige Produkte im Angebots-Portfolio

nachhaltig verändert hat. Etablierte Marken orientieren

eines Unternehmens. Die Hälfte dieser Anwendungen

sich bei der Markenführung an jungen Startups, nicht

wird heute auf dem Smartphone genutzt. Google schaut

ohne in die ein oder andere Falle zu tappen. Klassische

beim Erstellen seines Suchindexes zunächst nach mobilen

Werbe- und Designagenturen wissen längst, dass digitale

Seiten. Responsive Webdesign ist mittlerweile eine

Anwendungen auch für ihre Arbeit zentral sind und

Selbstverständlichkeit. Klassische, auf statischen Rastern

trotzdem fällt es ihnen schwer, innerhalb bestehender

basierte Layoutprinzipien sind damit obsolet. Virtual

Agenturmodelle neu zu denken. Denn wichtiger als die

Reality und Augmented Reality stellen völlig neue Anfor­

Proklamation von Botschaften ist die Produktion von

derungen an die Interaktion mit Gesten. Die Fortschritte

Bedeutung für den Kunden in der Interaktion mit ihm.

auf den Forschungsfeldern der künstlichen Intelligenz

5

BRANDED INTERACTIONS

lassen Conversational Interfaces und Chatbots zu

dahin ist oft sehr mühsam und in unzähligen Diskussio­

relevanten Markenschnittstellen werden. Interaktive

nen und Feedbackrunden mit den unterschiedlichen

Touchpoints befinden sich auch im realen Raum:

Stakeholdern geht vieles von der ursprünglichen Idee

ob als Installation am Messestand oder als interaktives

verloren. Solche Diskussionen sind manchmal unab­

Bill­board an der U-Bahn-Station. Und mit dem Internet

dingbar und im besten Fall auch zielführend – nämlich

der Dinge bekommen Gegenstände ein Verhalten, das

dann, wenn Kunde und Stakeholder aus ihrem Kom­

aktiv gestaltet werden muss. Das Ziel von Branded

petenzfeld heraus argumentieren. Sobald jedoch persönli­

Interaction Design (im Folgenden als BIxD abgekürzt) ist

cher Geschmack ins Spiel kommt, sollten lange Diskussi­

es, ein gleichwertiges Markenerlebnis über die unter­

onen vermieden werden. Wer aber User Experience

schiedlichen Markenkontaktpunkte (TOUCHPOINTS

und visuelle Gestaltung konsequent aus den strategischen

S. 110) zu schaffen.

Anforderungen ableitet und den Kunden von diesem Vorgehen zu überzeugen weiß, wird eine objektiv nach­

Marken sind lebendige, sich ständig verändernde Wesen.

vollziehbare Argumentationskette vorweisen können, so

Flexible identitätsstiftende Gestaltungssysteme ersetzen

dass sich viele Diskussionen erübrigen.

das klassische Logo-zentrische Corporate Design. Das Spektrum der zu gestaltenden Markensignaturen ist breit

Das vorliegende Buch ist Anleitung, Hilfe und Inspiration

gefächert: Logo, Typografie, Seitenraster, Bildwelt und

für all jene, die mit der Gestaltung von interaktiven

Texttonalität, Klang und Bewegung, Navigation, Interak­

Anwendungen für Marken befasst sind. Es richtet sich

tion, Architektur. Aber auch und vor allem die Art und

sowohl an Einsteiger als auch an Profis. Es kann genauso

Weise, in der ein Unternehmen seine Prozesse und

vom freiberuflichen Einzelkämpfer, der für kleinere

Interaktionen mit dem Kunden gestaltet ist markenprä­

regionale Unternehmen oder für ein Startup arbeitet,

gend. Am Ende zählt die Summe der Interaktionen mit

genutzt werden, wie von UX / UI Designern, die in

einer Marke. Diese sinnvoll zu orchestrieren erfordert

großen Unternehmen oder Agenturen an internationalen

eine komplexe, multidisziplinäre Vorgehensweise, welche

Markenauftritten arbeiten.

die Bedürfnisse und das Verhalten der Nutzer in den Mittelpunkt rückt.

Das Buch ist relevant für alle, die digitale Marken, Produkte und Services entwickeln:

FÜR WEN IST DIESES BUCH?

—— User Experience und User Interface Designer —— Konzepter und Informationsarchitekten —— Interaction Designer

Agenturen, aber auch Inhouse-Design-Teams in Unter­

—— Produkt- und Service-Designer

nehmen kennen die Situation: Sie haben tolle Ideen

—— Corporate Designer

und sind gut in der Umsetzung. Sie gewinnen Awards und

—— Informationsdesigner und Generative Gestalter

entwickeln nutzerfreundliche Lösungen. Aber der Weg

—— Motion- und Sound-Designer

6

INTRO

Darüber hinaus gibt das Buch allen, die über die Gestal­

CHECKBOXEN

tung hinaus mit Branded Interaction Design (BIxD)-­ Projekten zu tun haben, hilfreiche Anleitung für Projekt­

Zur besseren Übersicht haben wir an manchen Stellen wieder in rot Checkboxen eingebaut.

planung und Methodenwahl: —— Markenberater und Strategische Planer

Dieses Zeichen

—— Brand- und Marketing-Manager

signalisiert eine wichtige

Zusatzinformation.

—— Projektmanager und Agile Coaches —— Produktmanager in Startups und Unternehmen

Checkboxen mit diesem Zeichen sind Listen

—— Gründer und Entrepreneure

zum Abhaken.

—— Web- und App-Entwickler —— Creative Coder

ZUM AUFBAU DES BUCHES

SETUP Bevor wir mit der Konzeption und Gestaltung beginnen,

Das Buch stellt den BIxD-Prozess mit seinen fünf Phasen

muss das Projekt erst richtig »aufgesetzt« werden. Des­

Schritt für Schritt vor:

halb thematisiert das Kapitel SETUP (

S. 24 FF) , was

ein gutes Briefing beinhalten sollte, wie die ideale

1 DISCOVER

2 DEFINE

3 DESIGN

4 DELIVER

5 DISTRIBUTE

Team­konstellation aussieht, was bei der Planung von Zeit und Budget zu beachten ist und was man über die technischen Rahmenbedingungen eines Projektes wissen sollte.

PROZESS

Die jeweils relevanten Methoden und ihre Einbettung in den Gesamtprozess werden praxisnah beschrieben und mit

Hier beschreiben wir den PROZESS (

zahlreichen Beispielen illustriert. Sie können das Buch vom

erläu­tern den Unterschied zwischen »Wasserfallmodell«

Anfang bis zum Ende durcharbeiten – müssen es aber

und agiler Projektentwicklung mittels Design-Sprints,

nicht. Die einzelnen Unterkapitel bieten Ihnen praktische

erklären die einzelnen Prozessschritte und die Rollen der

Anleitung und Illustration für spezifische Problemstellun­

Prozessbeteiligten.

gen im Alltag und machen das Buch zum praktischen Nachschlagewerk. Sämtliche Kapitel enthalten zahlreiche Methodenbeispiele.

7

S. 42 FF) . Wir

BRANDED INTERACTIONS

DISCOVER Im Kapitel DISCOVER (

DELIVER S. 58 FF) stellen wir

Untersuchungsmethoden vor, die dem Design-Team

Wie Sie Materialien und Templates produzieren und in Form von Styleguides dokumentieren, wird im Kapitel

helfen, Business, Marke und Nutzer zu verstehen. Dazu

DELIVER (

gehören verschiedene Auditing-Verfahren ebenso wie

zeigen wir, wie mithilfe von User Experience Guidelines

die Arbeit mit Personas und Szenarien. Eine Zielmatrix

dyna­mi­sche Markensignaturen wie bewegte und inter­

hilft, die gefundenen Insights abzugleichen und zu

aktive Elemente bereitgestellt werden. Zum erfolgreichen

gewichten.

Ab­schluss eines BIxD-Projektes gehört aber auch die

S. 276 FF) beschrieben. Darüber hinaus

Qualitätsbeurteilung nach dem Launch.

DEFINE Das Kapitel DEFINE (

DISTRIBUTE S. 106 FF) beschreibt, wie aus

Zielen Maßnahmen werden, wie man mithilfe einer User

Am Ende des BIxD-Prozesses steht die Bereitstellung

Journey die wichtigsten Markenkontaktpunkte identifi­

des Designs für die Anwendungen in der Praxis, seine

ziert und welche strategischen Modelle zur Positionie­

Implementierung und gegebenenfalls der Rollout in ver­

rung einer Marke Designer kennen und nutzen sollten,

schiedenen Anwendungen oder Märkten. Dabei spielen

bevor sie mit der Ideenentwicklung beginnen.

die Vermittlung der Gestaltungsidee und die Schulung von Mitarbeitern und Dienstleistern eine wichtige Rolle,

DESIGN

wie das Kapitel DISTRIBUTE (

S. 306 FF) zeigt. Da

BIxD-Projekte nie beendet sind, geht es außerdem um die Die Entwicklung von Ideen, Konzept und Gestaltung

kon­tinuierliche Produktweiterentwicklung mit agilen

steht im Fokus des DESIGN -Kapitels (

Methoden, aber auch darum, wie Branded Interactions

S. 168 FF) .

Die Design-Phase steht im Zentrum des Prozesses. Wir

einen kulturellen Wandel im Unternehmen voranbringen

zeigen, wie man in Design-Sprints Ideen generiert,

können.

prototypisch umsetzt, testet und bewertet, wie man Inhalte strukturiert und das Look & Feel sowie das

Marco Spies und Katja Wenger

Designvokabular für BIxD-Projekte definiert.

Berlin, im Sommer 2018

8

INTRO

VORWORT DER VERLEGER

profunde Erfahrung, die Katja Wenger und Marco Spies auch über ihre Agentur hinaus mit ihren Startup-Betei­li­ gungen gemacht haben, floss in den Text ein und machte

In mehreren Auflagen und Sprachen hat sich Branded

ihn von Lektoratsrunde zu Lektoratsrunde besser und

Interactions als internationales Standardwerk zur Mar­

besser.

kenführung in der digitalen Transformation etabliert.

Während der Erfolgsgeschichte des Titels ist die Welt der

Am Schluss hatte ein kritisch lektorierendes Verlegerpaar

digitalen Markenführung vielfältiger, komplexer und noch

Herzklopfen vor Vorfreude und Glück über dieses Buch.

agiler geworden. Ursprünglich als überarbeitete Neuauf­

Deshalb möchten wir hier öffentlich wiederholen, was

lage geplant, wurde das vorliegende Buch zu einem hoch

unter dem letzten Text stand, der in der Entstehungs­

wirksamen, massiv praxiserprobten Werkzeugkasten

phase dieses Buches zurück nach Berlin ging: »Sprachlos,

zur Gestaltung von digitalen Markenerlebnissen für eine

beeindruckt und stolz, Eure Verleger zu sein, applaudie­

neue Zeit.

ren wir und grüßen von Herzen, Karin und Bertram«.

Katja Wenger und Marco Spies öffnen dabei die Türen

Danke an dieser Stelle an Marco und Katja für ein neues

ihrer Agentur think moto weit über den berühmten

Buch auf solidem Fundament seiner Vorgänger. Danke

Blick durchs Schlüsselloch hinaus. Sie geben Erfahrung

an Katrin Schacke für die einfühlsame neue und doch ver­

weiter, deren Wert den Ladenpreis dieses Buches weit

traute Gestaltung. Danke an unsere Lizenzpartner, die

übersteigt. Und sie geben Ihnen das Rüstzeug für

Branded Interactions in die Welt trugen – be assured, this

ein neues Designverständnis – und eine neue Rolle.

one is even better!

Denn Design macht Unternehmen – und deren Verände­ rung – sichtbar. Je schneller die Welt sich verändert,

In Zeiten von »always beta« ein Buch (!) über digitale

desto agiler müssen Unternehmen sich, ihre Produkte und

Markenführung zu machen, scheint auf den ersten Blick

Dienstleistungen und ihre Marken-Touchpoints anpas­

anachronistisch. Auf den zweiten Blick zeigt sich genau

sen. Dabei rücken Designer, die Markenführung in digita­

hier die Stärke eines sequentiellen, gut strukturierten,

len Zeiten verstehen, zu Beratern auf Unternehmensfüh­

handlichen Mediums.

rungsebene auf.

Und jetzt viel Freude beim Lesen, Erkennen, Entdecken, Um in dieser Liga mitspielen zu können, brauchen sie

Denken und Weiterdenken und viel Erfolg mit Ihren

neue Kompetenzen. Die vermittelt dieses Buch. Katja und

BIxD-Projekten!

Marco dachten, es ginge um ein paar Aktualisierungen, als wir sie um eine Überarbeitung des Erfolgstitels baten.

Herzlich

Stattdessen blieb kaum ein Stein auf dem anderen. Die

Karin und Bertram Schmidt-Friderichs

9

INTRO

5

I N H A LT

10

EINFÜHRUNG

16

S E T U P.

Das Projekt planen

1

24

26

DAS BRIEFING

—— Rahmenparameter im Briefing —— Rebriefing —— Offene Briefings

I N H A LT

2

29

DAS TEAM

—— Größe und Zusammensetzung von Teams

—— Agile Teamkultur —— Rollen im BIxD-Kernteam —— Teamaufstellung als Taktiktafel

3

36

DIE PROJEKTPL ANUNG

—— 8 Schritte bei der Projektplanung

4

38

DIE TECHNIK

—— Austausch mit der Technikabteilung —— Techniker haben die Systemsicht – Designer haben die Nutzersicht —— Microservices und Lean & Agile Design PROZESS.

Rückgrat des Projekts

42

44

1 WORKFLOW-MODELLE

2 BRANDED-INTERACTION-

47

DESIGN-PROZESS

—— Die 5 Phasen des BIxD-Prozesses

3

AGILE, LEAN & CO.

—— Haltung, Werte und Prinzipien —— Gemeinsamkeiten von Agile und Lean —— Agilität bedeutet mehr Planungs­sicherheit – nicht weniger — — Mehrere Projekte gleichzeitig agil managen

10

53

1 D I S C O V E R R E S E A R C H & A N A LY S E

3

DEN NUTZER VERSTEHEN

82

—— User Insights —— Empathie

58

—— Mentale Modelle —— Zielgruppenanalyse und Segmentierung —— Zielgruppe ist nicht gleich Zielgruppe —— Personas —— Persona Moodboard

1

—— What’s in your bag?

DAS GESCHÄFT VERSTEHEN

—— Personas vs. reale Nutzer

62

—— Stakeholder-Analyse

—— Jobs-to-be-done

—— Kick-off-Workshop

—— Job Stories und User Stories dokumentieren

—— Fokusgruppen

—— Use Cases und Nutzerszenarien

—— Workshop Facilitation Kit

—— A day in the life of …

—— Stakeholder-Interviews

—— Shadowing

—— Questionnaire

—— Cultural Probes und Nutzertagebücher

—— Umfragen

—— Personas und Szenarien im weiteren Prozess

—— Der Elevator Pitch als Rollenspiel

—— User Research Kit – eine Einkaufsliste

—— Content- und Service-Audits

—— Card Sorting und Tree Testing —— Wettbewerbs-Audit und Benchmark-Analyse

4

—— Zielmatrix

—— Produktanalyse

—— Anforderungen dokumentieren

—— Risk / RewardSM: Nutzerverhalten in Produkt­

—— User Stories …

kategorien

—— … und Job Stories

—— Data & Analytics

—— Epics

—— Vom »Was passiert?« zum

—— Fazit

»Warum passiert es?« —— Daten und Intuition —— Sekundär-Research zum Thema

2

DIE MARKE VERSTEHEN

ZIELE SETZEN

76

—— Markenpersönlichkeit —— Die Marke als Social-Media-Profil —— Markenarchetypen —— Markenarchitektur —— CD / CI evaluieren —— UI Inventory

11

101

3

2 DEFINE

DAS NUTZERERLEBNIS PLANEN

140

—— Konzeptmodell

STRATEGIE & SYNTHESE

—— Konzeptmodelle visualisieren

106

—— Die Joy-of-Use-Pyramide —— Das Zugangskonzept —— Site Maps und Content Maps —— User Task Flows

1

4

IDEEN GENERIEREN

150

—— Die kreative Leitidee

110

DIE KOMMUNIKATION PL ANEN

— — Touchpoints: die Kontaktpunkte einer Marke

— — Ideen für Produkte und Services

—— Der Customer Life Cycle

—— Kreativmethoden

—— Die Customer Journey

—— Brainstorming

—— Moments of Truth

—— Crowdsourcing

—— Micro-Moments

—— Co-Creation

—— Service-Systeme planen und gestalten

—— Weitere Methoden

—— Service Design Sketches

—— Ideen auswählen und interpretieren

—— Multiscreen-Erlebnisse

—— Ideen bewerten und vermitteln

—— Inhalte planen —— User-generated Content

5

—— Messbarkeit von Maßnahmen

Storytelling —— Geschäftsmodelle generieren

—— Produkt-Backlog

—— L EGO Serious Play

—— Story Mapping

—— Value Proposition

—— Sprint Backlog —— Creative Brief

2

MASSNAHMEN DEFINIEREN

—— Maßnahmenkatalog

—— Liquid Experiences und Transmedia-

129

DAS MARKENERLEBNIS PLANEN

—— Markenpositionierung —— think moto Brand BIOS ® – ein Modell für dynamische Markenführung —— Markenbedeutung: das Warum einer Marke —— Marke und Gesellschaft —— Positionierung im Marktumfeld

—— Markenpositionierung nach Lebenswelten —— Lebenswelten vs. Behaviour —— Verhaltensarchetypen —— Brand Filter als Richtlinien für die interaktive Gestaltung —— Das visuelle Markenleitbild in Form von Moodboards

12

160

3 D E S I G N

KO N Z E P T & G E S TA LT U N G

—— Von der Seite zum Atom: Atomic Design —— UX Design Pattern —— Gamification

168

—— Mikro-Interaktionen —— Digitale Anwendungen im medialen Verbund —— Die Oberfläche gestalten —— Der erste Entwurf —— Unterschiedliche Entwürfe —— Raster und Seitenaufbau

1

DESIGNAUFGABEN STRUKTURIEREN

—— Look & Feel

172

—— Komposition einer Seite

—— Design-Direction-Präsentation (DDP )

—— Typografie

—— Detailed-Design-Dokumentation (DDD )

—— Header, Logo, Navigation

—— Design präsentieren

—— Form follows function: Visuelle Kategorien

—— Agile Produktentwicklung in Design-Sprints

in grafischen Interfaces

—— Arbeiten in Design-Sprints

—— Interaktionselemente

—— Minimum Viable Product

—— Metaphern

—— Vom Minimum Viable Product zum Minimum

—— Simplicity

Lovable Product

—— Flat Design

—— Minimum Viable Brand

2 G R U N D L A G E N F Ü R

183

4

realen Raum

—— Vom GUI zum NUI

—— Eigenschaften raumbasierter Medien

—— Interaktion mit Touchscreens

—— Multisensorische Nutzererlebnisse erfordern

—— Freie Gesten

interdisziplinäre Teams

—— Hürden und Herausforderungen

—— Den Raum und den Ort verstehen

—— NUI : Natural UI oder No UI?

— — Interaktionsmuster ableiten

—— Maschinen lernen, Menschen zu verstehen

—— Storytelling im Raum

—— Der menschliche Körper als Interface

—— Von der Rauminszenierung zum Event

—— Zusammenspiel mehrerer Interfaces

—— Vier Formate für Markeninteraktionen im

—— Klassische Markensignaturen verändern sich —— Neue Markensignaturen

realen Raum

—— Marken brauchen Haltung – auch politisch!

5 V I R T U A L U N D A U G M E N T E D R E A L I T Y

— — Big Data für Branded Interactions

G E S TA LT E N

—— Algorithmen und Big Data als Marken­

—— Das Reality-Virtuality-Continuum

signaturen

—— Augmented Reality gestalten

SCREEN-BASIERTE INTERAKTION

218

—— Die Infosphäre: unsere digitale Umwelt im

BRANDED INTERACTIONS

3

I N T E R A K T I O N I M R AU M G E S TA LT E N

—— Anwendungsbereiche für Mobile AR

196

—— Wearable AR-Anwendungen

G E S TA LT E N

—— Virtual Reality gestalten

—— Das Nutzererlebnis gestalten

—— Virtual-Reality-Anwendungen

—— Informationsarchitektur von bildschirm­

—— Verträglichkeit von VR

basierten Anwendungen

—— Gestaltungsaspekte für Virtual Reality

—— Wireframes

im Überblick

—— Wireframes für Responsive Design —— Wireflows —— Storyboards

13

226

6

KO N V E R S AT I O N E N G E S TA LT E N

242

—— Chatbots: Text vs. Voice —— Conversational User Interfaces

4 D E L I V E R

DOKUMENTATION & PRODUKTION

—— Vorteile von C UIs aus Nutzersicht

276

—— Vorteile und Herausforderungen aus ­Markensicht —— Die Persönlichkeit eines Chatbots —— Wissen und Fähigkeiten von Chatbots —— Conversational User Interfaces benötigen

neue »Design«-Skills

1 B I x D - S Y S T E M E E N T W I C K E L N

—— 5 Schritte für die Gestaltung von marken­

280

—— Anwendergruppen von Designsystemen

gerechten Konversationen

—— Vorgehen bei der Entwicklung

—— Design-Prinzipien

7 S M A R T T H I N G S G E S T A L T E N

257

—— Design Pattern

—— Was Smart Things auszeichnet

—— Besonderheiten digitaler Medien

— — Markenprodukte im Zeitalter des Internet

­der Dinge

2

—— Der Brand Fit und die richtige Produkt­

STYLEGUIDES ERSTELLEN

287

—— Wieviele Styleguides braucht eine Marke?

kategorie

—— Stylesheet-Vorgaben und Styleguide-Poster

—— Intimität zwischen Nutzer und Markenprodukt

—— Styleguides online bereitstellen

—— Smart Things und Mikro-Interaktionen

—— Inhalt und Aufbau eines Website-Styleguides

—— Die Marke verändert sich entlang der User

Journey

3

—— Herausforderungen für Marken

PAT TERN LIBRARIES ERSTELLEN

293

—— Pattern Libraries —— Interaction Guidelines

8 PROTOT YPING

264

—— Von der Pattern Library zum Living Styleguide

—— Mockups, Fakes und Paper Prototyping

—— Mehrere Marken – eine Experience

— — Interactive Prototyping für Websites und

Apps

4

—— Im Browser gestalten

DIE PRODUKTION BEGLEITEN

—— Prototyping für Chatbots

—— Qualitätssicherung

—— Prototyping für Virtual Reality

—— Inhalte einpflegen

—— Video Prototyping

—— Service-Experience-Prototyping

5 PROJEKT-L AUNCH

—— Physical Prototyping

—— Do-It-Yourself Prototyping

UND NACHBESPRECHUNG

—— Den Launch planen

—— Hackathons

—— Projektnachbesprechung

—— Retrospective durchführen

9 TESTING

—— Feiern gehört dazu

269

—— Akzeptanztest mit der Zielgruppe —— Usability Testing —— User-Experience Testing

297

—— Gap-Analyse und Modulliste

—— Fallstudie anlegen

—— Try it yourself —— 5 Whys —— A / B-Tests —— Fake Door Testing —— Demo-Day

14

301

5 D I S T R I B U T E

ROLLOUT & WEITERENTWICKLUNG

ANHANG 306

—— Leseempfehlungen —— Index —— Bildnachweis —— Dank —— Die Autoren —— Impressum

1 BIxD IMPLEMENTIEREN

310

—— BIxD vermitteln —— Warum statt Was —— Mitarbeiter schulen —— Formate für Trainings und Schulungen —— Brand-Engagement-Konzepte —— Storytelling, Produktfilme und Guided Tours —— Einen Rollout planen

2 BIxD BEREITSTELLEN UND STEUERN

320

—— Design am Projekt entwickeln —— Brand-Management-Portal oder Brand-Management-Ökosystem?

—— Brand Book —— Brand Hub

3 BIxD WEITERENTWICKELN

323

—— Das Produkt agil weiterentwickeln —— Lean UX —— Die Marke agil weiterentwickeln —— Brand Review Meetings —— Setup für ein agiles Brand- und DesignManagement —— Testen, Messen, Optimieren —— Messbarkeit und KP Is für Markensignaturen —— Trends und Entwicklungen beobachten —— Design Fictions —— Anpassungen des Produkt- oder ServiceModells —— Die weitere Zusammenarbeit

4 B IxD U N D KU LT U R E L L E R WA N D E L

335

—— Designer als Agenten einer neuen Unter‑ nehmenskultur —— Vier neue Mindsets für Unternehmen —— Marken für Menschen

15

339

SETUP

TEAMAUFSTELLUNG ALS TAKTIKTAFEL

wieder komplexe Projekte mit ähnlich aufgestellten Teams in kürzester Zeit realisiert und mussten häufig feststellen, dass – ähnlich wie beim Fußballspiel – das gute Zusam­ menspiel der Teammitglieder wichtiger sein kann als die

Vor einigen Jahren haben wir mit einem Design-Team

Erfahrung eines jeden einzelnen Teammitglieds.

auf Agenturseite innerhalb von nur drei Monaten das Inter­active Corporate Design eines führenden MobilfunkUnternehmens neu entwickelt. Das Design-Team bestand aus dem Creative Director, zwei Informationsarchitekten, einem Art Director und einem Screen Designer. Außer­ dem gab es einen Strategischen Planer, der die Stakehol­ der auf Agenturseite vertrat, und einen Projektmanager, der ausschließlich fürs Time- und Budgetmanagement verantwortlich war. Täglich um 18 Uhr wurden der Pro­

A happy team makes a tough task look simple.

Scrum-Prinzip

jekt­stand besprochen und die Aufgaben für den nächsten Tag definiert. Wir schlossen uns mit dem Design-Team in einen Extraraum ein. Es gab einen Teamplan, der an der Wand hing und alle Verantwortlichkeiten beschrieb.

Die Schnittstellen nach außen – zum Kunden, zur Technik und zu anderen Agenturen – wurden in die Teamaufstellung mit aufgenommen.

Unter Zeitdruck hilft es, das Team auf die Aufgabe einzuschwören und das Projekt als sportliche Herausfor­ derung zu verstehen. Wir haben einen Teamplan auf­ gemalt, der aussah wie ein Fußballfeld und nicht nur die eigenen Spieler zeigte, sondern auch die des Kunden auf der »Gegenseite«. Es ging hierbei nicht darum, den Kunden als Gegner darzustellen, sondern die »MannDeckung« und die Verantwortlichkeiten im Team deutlich zu machen: Der Creative Director spricht mit der BrandManagerin, der Strategische Planer ist der agenturin­terne Sparringspartner von Service und Vertrieb. Der ver­ antwortliche Art Director und der Informationsarchitekt stehen gemeinsam im Sturm. Wir haben später immer

32

2

DAS TEAM

SALES TEAM

BRAND MANAGER

SERVICE TEAM UX MANAGER

UX DESIGN LEAD

PRODUCT OWNER

VISUAL DESIGN LEAD

SCREEN DESIGN

UX DESIGN TEAM

BUSINESS ANALYST

PRODUCT MANAGER

DESIGN TEAM LEAD (C R E AT I V E DIRECTOR)

PROJECT MANAGER

TAKTIKTAFEL TEAMAUFSTELLUNG

WEITERE SPIELER

Die Analogie zur taktischen Planung auf dem Fußballfeld hilft,

Spezialisten, die bei Bedarf hinzugezogen werden oder nur ­

sich die Rollen der Teammitglieder auf Kunden- und Designteam-

temporär im Team mitarbeiten: Strategische Planer / Researcher /

seite zu vergegenwärtigen.

Business- und System-Analysten / Usability Tester / Motion und Sound Designer, Fotografen, Texter, 3D-Spezialisten, Architek-

Stakeholder auf Kundenseite

ten … / Software-Entwickler / Projekt- und Account-Manager /

Mitglieder des Design-Teams

Content Manager / Konzepter / Texter

33

PROZESS

Process is messy. Process is never the same thing twice.

Process is an ideal that everybody aspires to.

BRIAN GILLESPIE.

W O R K F L O WMODELLE

Anfang der 2000er Jahre füllte das Workflow-Diagramm einer Online-Agentur gut und gerne drei DIN -A3-Seiten.

Den meisten Raum nahm die Darstellung der Schnitt­ stellen zwischen den einzelnen Disziplinen ein. Vor allem bei der Stabübergabe zwischen Strategie und Kreation sowie zwischen Kreation und Technik gab es eine Menge zu beachten. Anwendungskonzepte beinhalteten beschrei­ benden Text, Wireframes und Use Cases. Diese Doku­ mente zählten oft Hunderte von Seiten und waren ent­ sprechend schwer zu handhaben. Denn wenn nur ein inhaltliches Modul sich während der Konzeption änderte, musste das komplette Dokument durchsucht und an jeder Stelle, an der das Modul auftauchte, angepasst werden.

Die Anwendungskonzepte wurden an Programmierer und visuelle Gestalter übergeben und mussten für beide Seiten die jeweils nötige Information bereitstellen.

Wenn während des weiteren Projektverlaufs Fragen auf­ tauchten, war die Hälfte des Konzeptteams schon wieder im nächsten Projekt untergetaucht. Um dieRei­ bungsverluste zu verringern, wurden alternative Work­ flows ausprobiert. Verbesserungsansätze galten meist der Schnittstelle zwischen Design und Technik. Eine Weile versuchten Informationsarchitekten die Interakti­ onsabläufe mithilfe von Diagrammtypen aus der Unified Modelling Language (UML ) zu beschreiben, einer

44

1 WORKFLOW-MODELLE

W A SS E R

ANFORDERUNGEN

FA LL M O D

ITERATION 1

E LL

USER STORY

KONZEPTION

1 ITERATION 2 USER UX / UI

STORY 2

DESIGN ITERATION 3 USER

PROTOTYP 1

UX / UI

STORY 3

UMSETZUNG T E S T / REVIEW

PROTOTYP

UX / UI

2

A G IL E

T E S T /

PROTOTYP

E

3

N

REVIEW

TW IC K LU N

T E S T /

G

REVIEW

W O R K F L O W - M O D E L L E

Zwei Entwicklungsmodelle für interaktive Projekte. Beim Wasserfallmodell wird die jeweilige Phase abgeschlossen, bevor es in die nächste Phase geht. Bei der agilen Entwicklung werden Teilschritte in Iterationen realisiert. Durch frühes Prototyping und Testing können Risiken verringert werden.

45

PROZESS

ED D N A BR ION T C A INTER IGN DES ESS Z O R P

1 DAS GESCHÄFT VERSTEHEN

2 DIE MARKE VERSTEHEN

3 DEN NUTZER VERSTEHEN

DISCOVER 4 ZIELE SETZEN

1 DIE KOMMUNIKATION PL ANEN

DEFINE 2 DAS MARKENERLEBNIS PLANEN

3 DAS NUTZERERLEBNIS PLANEN

4 IDEEN GENERIEREN

5 MASSNAHMEN DEFINIEREN

48

3 SCREEN-BASIERTE I N T E R A K T I O N G E S TA LT E N

2 G R U N D L A G E N F Ü R BRANDED INTERACTIONS

1 D E S I G N A U F G A B E N STRUKTURIEREN

4 I N T E R A K T I O N I M R A U M G E S T A L T E N

5 V I R T U A L & A U G M E N T E D R E A L I T Y G E S TA LT E N

6 K O N V E R S A T I O N E N G E S T A L T E N

DESIGN 7 S M A R T T H I N G S G E S T A L T E N

7 PROTOTYPING

8 TESTING

DISTRIBUTE

DELIVER

4 B I x D U N D KU LT U R E L L E R WA N D E L

1 B I xD I M P L E M E N T I E R E N

3 B I xD W E I T E R E N T W I C K E L N

2

B I x D B E R E I T S T E L L E N UND STEUERN

5 PROJEKT-L AUNCH & NACHBESPRECHUNG

1 B I xD - S Y S T E M E E N T W I C K E L N

2 S T Y L E G U I D E S E R S T E L L E N

4 DIE PRODUKTION BEGLEITEN

3 P A T T E R N L I B R A R I E S ERSTELLEN

49

1 DISCOVER

1

2

4 3

6

5

7

8 10

9 11

WHAT’S IN YOUR BAG?

Der Inhalt einer Handtasche besteht meist aus sehr persönlichen Dingen und kann einen tiefen Einblick in die Persönlichkeit des Besitzers geben.

92

3

WARUM WIR MIT PERSONAS ARBEITEN Die Arbeit mit Personas bringt zahlreiche Vor­teile, und es lohnt sich immer, den Kunden davon zu überzeugen, den meist nicht allzu hohen Aufwand zu bezahlen. Zumal er sich dabei gerne einbringen kann und die Ergebnisse auch an anderer Stelle im Unternehmen genutzt werden können. Hier ein paar Argumente für die Verwendung von Personas:

DEN NUTZER VERSTEHEN

PERSONA MOODBOARD

Das Persona Moodboard visualisiert die Vorlieben und den Lebensstil einer Persona in Form einer Bildcollage. Es enthält Bildmaterial zu Markenkleidung, zur Lieblings­ website, zu Wohnstil, Arbeitsstätte, Auto und Hobbys der Persona, ihren Lieblingsfarben und ihrem Lieblingsessen und vielem mehr. Persona Moodboards eignen sich sehr gut ­für die Abstimmung mit dem Kunden, da hier unter­ schiedliche Vorstellungen schneller sichtbar werden, als

Sie ermöglichen eine effektive Kommunikation

bei rein textbasierten Personas.

über die Zielgruppe innerhalb des Design­-Teams und mit dem Kunden. Sie helfen, sich in den Nutzer hineinzuversetzen und diese Perspektive

WHAT’S IN YOUR BAG?

während des gesamten Designprozesses leicht immer wieder einnehmen zu können.

Der Inhalt einer Handtasche sagt sehr viel über seinen Sie ermöglichen es in der Discover-Phase und

Besitzer oder seine Besitzerin aus. Er zeigt, was ihr

bei späteren Iterationen, Anforderungen aus

wichtig ist, ob und welche Zigarettenmarke sie raucht,

Nutzersicht zu finden, diese zu priorisie­ren und

welches Auto sie fährt, ob sie eine Vorliebe für Kitsch

damit die Notwendigkeit von Features einzu-

hat, abergläubisch ist oder ihre Termine analog plant.

schätzen. Diese Anforderungen können­wir in

Eltern haben ein Foto ihres Kindes dabei. Eine Hand­

Use Cases und Nutzerszenarien (

tasche enthält das persönliche Inventar: die Dinge, die

S. 95)

oder als User Stories im Lean-UX-Prozess (DISTRIBUTE

S. 306 FF)

dokumentieren.

Menschen wichtig sind. Sie ist ein Spiegel des persönli­ chen Lebensstils. Sie zeigt Verhaltensmuster und persönliche Werte und gibt Aufschluss über Wohnort,

Sie machen die Arbeit messbar und helfen,

Alter, Familienstand, Hobbys, Markenaffinität und den

neue Marketing- oder Werbemaßnahmen

persönlichen Geschmack einer Persona. Vor allem aber

zu bewerten.

macht es Spaß, die Collagen zusammenzustellen.

Sie helfen uns, Testcases zu definieren (mit den dazugehörigen Nutzerszenarien, siehe nächstes Kapitel) und liefern Profile für die Rekrutierung von Testpersonen.

93

2 DEFINE

Gehalt der Marke für den Kunden dar, es ist der Mehr-

MARKE UND GESELLSCHAFT

wert, den Marken über ihre eigentliche Leistung hinaus bieten können.

Grundlage des Brand BIOS ® Modells ist eine Sichtweise, die Marken als Entitäten mit menschlichen Wesenszügen MARKENBEDEUTUNG: DAS WARUM EINER MARKE

versteht, mit einer quasi-menschlichen Persönlichkeit

Die Markenbedeutung entspricht dem innersten

sehen. Marken brauchen daher eine gesellschaftliche

Kreis des Golden Circle, mit dem Simon Sinek 2009 in einem TED-Vortrag den Erfolg von Apple erklärte.

Darin machte er anschaulich, dass viele Unternehmen zwar wissen und kommunizieren, was sie tun (ihr Leistungsangebot in Form von Produkten und Services) und wie sie es tun (ihre Differenzierung im Wettbewerb), aber nur wenige sich überhaupt bewusst machen, warum es sie gibt. Laut Sinek fängt Apple in seiner Marketing-Botschaft genau dort an: »With everything we do, we aim to challenge the status quo. We aim to think differently.« Das Wie und das Was folgen erst: »Our products are user friendly, beautifully designed, and easy to use. We just happen to make great computers. Want to buy one?« Den Vortrag, der zu den 10 meistgesehenen TEDVorträgen überhaupt gehört, gibt es hier: ww.ted.com/talks/simon_sinek_how_great_ w

leaders_inspire_action

und Verhalten. Das lässt sich folgerichtig nicht losgelöst von gesellschaftlichem und kulturellem Hintergrund Verankerung und einen Bezug zum jeweiligen Zeitgeist und kulturellen Kontext, um überhaupt eine Bedeutung herstellen zu können. Das kommt der Sichtweise von Gestaltern entgegen, denen es häufig ein Bedürfnis ist, gesellschaftliche Bedeutung zu erzeugen. Gestalter wie Charles Eames oder Otl Aicher sahen in ihrer Arbeit für Marken immer auch ein gesellschaftliches Moment.

Heute unterscheiden wir nur allzu schnell zwischen gemeinnützigen Not-for-Profit-Projekten und kommer­ ziellen Markenprojekten. Die einen sind moralisch und ethisch gut – sozusagen fürs Gewissen – die anderen wirtschaftlich relevant. Solange wir aber mit dieser Schere im Kopf arbeiten, wird es schwer, kommerzielle, wirtschaftlich relevante Markenprodukte zu schaffen, die auch moralisch und ethisch vertretbar sind. Im Brand BIOS ® ist daher eine gesellschaftliche Dimension enthalten: Behaviour, Image, Offering und Story lassen sich so vor dem Hintergrund gesellschaftlicher Grundwerte, Moden und Trends, Mythen und ökonomischen Wertvorstellungen betrachten und auf Relevanz prüfen.

132

2

DAS MARKENERLEBNIS PLANEN

DIE MARKE

MODE UND TRENDS

alten und Verh das s s e chreibt. he ke b elc Mar w , er en er d kt

,w e ihr lche er s Ik o

IMAGE

Ziel:

Ziel:

ERLEBBARKEIT

EINZIGARTIGKEIT

MEANING

OFFERING

MY T H E N U N D KU LT U R

bolcharakter, m Sym h re t. in i h re i b ke esc ar M fie b a gr

no

STORY

Ziel:

Ziel:

R E L E VA N Z

GLAUBWÜRDIGKEIT

al e L Nu e i s t u ng t ze n f smerk mal ür die Me n s chen.

ch e r M d ie H e ar ke rkunf t, erz ählt .

tr en e s z sch i da kt es Da s e l c h e n fa Ma r d k e n an g e b ot , w e r it d Mar ke defin t – und dam ier

el ,w n e t ch de chi gen ges e n e L k r Die Ma nd en u die Myth

de

WERTE UND GRUNDWERTE

bild

e

B E H AV I O U R

n

rken

di

Da s Ma dam rken it d v en erh Ch a lt ar a

Da s M a

BENEFITS UND ÖKONOMISCHER WERT

MARKENBESTANDTEILE

BRAND BIOS TM : Das Markenmodell von think moto zeigt die vier Bestandteile der Marke und ihre Bedeutung für die Menschen.

In der Define-Phase sollten diese Aspekte einmal für die Verwendung in der interaktiven Kommunikation definiert werden.

133

3 DESIGN

TOUCH GESTURES

1

2

TAP

6

3

4

DOUBLE TAP

DRAG

7

SLIDE

8

SWIPE

9

PRESS AND DRAG

ROTATE

5

HOLD / PRESS

10

PINCH

SPREAD

1

»Antippen« – Objekt auswählen

6

2

»Doppelt antippen« – Objekt auswählen / aktivieren

7

»Wischen« – Screen durchblättern, scrollen »Drehen«, mit einer oder zwei Händen – Objekt drehen

3

»Ziehen« – Objekt bewegen

8

»Drücken und ziehen«, ein- oder beidhändig

4

»Schieben« – Schalter bewegen

9

»Zusammenziehen« – verkleinern

5

»Gedrückt halten«

1 0 »Auseinanderziehen« – vergrößern

MOBILE GESTURES

READ QR

BLOW INTO MIC

USE CAMERA

BUMP

SHAKE

ICONS FÜR GESTISCHE INTERAKTION

Die Gestensymbole können in Wireframes und Storyboards

in verschiedenen aktuellen Formaten heruntergeladen und für

verwendet werden. Unter www.think moto.de/gestures können sie

eigene Dokumente verwendet werden.

188

2

GRUNDLAGEN FÜR BRANDED INTERACTIONS

BODY GESTURES

1

2

WAV E

5

3

ONE ARM OUT

HANDS ON HIPS

6

NOD

9

7

PINCH

11

CLAP

TURN HEAD

8

SPREAD

10

THUMB UP

4

LEAN LEFT / RIGHT

12

STANDING / ARMS DOWN

STEP LEFT / RIGHT

Auswahl freier Gesten 13

14

für die Interaktion in

15

Environments und Installationen

JUMP

LIFT LEG

ON ONE LEG

10

»Klatschen« – aktivieren / deaktivieren

2 + 3 »Hand ausstrecken / an der Hüfte« – Pause oder Stop

11

»Arme anliegend« – deaktivieren, initialisieren

4 + 5 »Kopf drehen / nicken« – vertikal / horizontal scrollen / blättern

12

»Schritt rechts / links« – nach rechts / links bewegen

6 + 7 »Arme zu- / auseinander bewegen« – verkleinern / vergrößern

13

»Sprung« – Objekt auswählen oder überspringen

8

»Oberkörper beugen« – Objekt bewegen oder ausweichen

14

»Bein rechts / links heben« – Avatar nach rechts / links drehen

9

»Daumen hoch« – Auswahl bestätigen

15

»Auf einem Bein stehen« – rechts / links scrollen

1

»Winken« – aktivieren, bewegen, scrollen

3 DESIGN

Farbe ist immer noch eine starke Markensignatur und

lichen Wert des Produktes dar: beim Lacoste-Shirt zahlt

hilft von jeher bei der Wiedererkennung und der Abgren-

der Kunde den Preis fürs Krokodil, nicht fürs Shirt. In

zung zum Wettbewerb. Digitale Anwendungen haben

dem Maße, wie der neue Konsumbürger jedoch Qualität,

jedoch meist eine wesentlich höhere Komplexität. Farbe

Ehrlichkeit und Nachhaltigkeit einfordert, erodiert

muss hier mit Bedacht eingesetzt werden, damit Inhalte

auch die Bedeutung des Logos zugunsten anderer Marken­

und Funktionen gut wahrnehmbar bleiben. Marken,

signaturen. Das Erlebnis ersetzt das Statussymbol. Das

die nur eine Auszeichnungsfarbe haben, tun sich schwer

macht das Logo nicht völlig obsolet, verändert aber seine

bei der Kennzeichnung von Interaktions-Elementen.

Rolle und seine Gestalt. Adaptierbarkeit und Flexibilität

Wir empfehlen, das Farbspektrum zu erweitern und meh-

spielen eine wichtige Rolle. Google setzt neben dem

rere Farben für das digitale Informationsdesign zu

eigentlichen Logo sogenannte »Doodles« ein: spielerische

definieren. Immer mehr Marken wagen ohnehin, auf eine

Logo-Varianten, die animiert oder interaktiv sind und auf

dominierende Markenfarbe zu verzichten und sich

aktuelle Tagesereignisse Bezug nehmen – und die Marke

einer Palette von Farben zu öffnen. Prominente Beispiele

so als ständig in Bewegung und am Puls der Zeit zeigen.

sind Google und Slack. Andere verwenden dynamische Farbschemata als Teil einer flexiblen Identität. Als Beispiel sei hier das Erscheinungsbild von Merck genannt.

NEUE MARKENSIGNATUREN

Air France wiederum verwendet in der Kommunikation diverse Farbschemata, die Wiedererkennbarkeit ist hier durch das Zusammenspiel von Komplementär-Farben

Haben die interaktiven und dynamischen Eigenschaften

gewährleistet.

der digitalen GUI -basierten Medien bereits die klassischen Markensignaturen in ihrem Einsatz und ihrer

Die Bildsprache einer Marke ist stets dem Zeitgeist

Bedeutung verändert, so ergeben sich durch die gestische

untergeordnet. Allerdings können Marken durch einen

und sprach­basierte Interaktion zahlreiche neue marken-

innovativen Bildstil immer wieder neue Trends setzen.

prägende Gestaltungsprinzipien. Einige Beispiele:

Die Bildqualität steht mittlerweile klassischen Medien in nichts nach, in Verbindung mit Filteralgorithmen und

Wichtig wird die Stimme der Marke. In dem Maße, in

Animationen lassen sich sehr charakteristische Erschei-

dem Conversational UIs (KONVERSATIONEN GESTALTEN

nungsbilder schaffen.

S. 242) an Bedeutung gewinnen, müssen immer

mehr Unternehmen sich fragen: Welche Stimme hat denn Am stärksten verändert sich die Rolle des Logos, der

eigentlich unsere Marke? Spricht ein Mann oder eine

klassischsten aller Markensignaturen. Logos sind

Frau? Mit welchem Sprachstil und Duktus spricht sie?

spätestens seit der zweiten Hälfte des 20. Jahrhunderts

(DIE RICHTIGE STIMME

omnipräsent. Einst Zeichen der Herkunft und Qualität

artig. Richtig gewählt schafft sie Nähe zum Benutzer,

eines Produktes, stellten sie seit der Hochphase des

die bisher so nicht möglich war.

Konsumismus in den 80er und 90er Jahren den eigent­

192

S. 238) Die Stimme ist einzig-

2

GRUNDLAGEN FÜR BRANDED INTERACTIONS

Raumgefühl / Dimensionalität

Formensprache

Typografie Stimme

Klang

Raster / Layoutstruktur

MARKE

Sprache / Text

Farbe Logo Ikonografie

Duft

Infografik

Bildwelt

Micro Interactions

Bewegung / Animation

Materialität / Haptik

Navigation

Prozesse

Geschmack Stories

Pattern und Texturen

ALGORITHMEN

MARKENSIGNATUREN FÜR LIVING BRANDS

Living Brands besitzen eine zahlreiche Markensignaturen.

Zu den »klassischen« Signaturen wie Logo, Typografie und Bildwelt kommen neue, flexible Kennzeichen hinzu. Über marken­ spezifische Algorithmen können die einzelnen Markensignaturen dynamisiert werden, ohne ihren markenprägenden Charakter zu verlieren.

193

3. 5

3 DESIGN

Virtual und Augmented Reality haben mittlerweile ihren festen Platz im Touchpoint-Mix zahlreicher Marken.

VIRTUAL UND AUGMENTED REALITY G E S TA LT E N

Die dahinterliegenden Technologien entwickeln sich rasant weiter und die Möglichkeiten des Einsatzes sind nicht annähernd ausgelotet. Weil hier noch keine festen Standards definiert sind, werden Begriffe noch unscharf verwendet. Sie bezeichnen im Wesentlichen verschiedene Stufen im Reality-Virtuality-Continuum (SIEHE ABBILDUNG GEGENÜBER) . Wir beschränken uns im Folgenden

auf Virtual und Augmented Reality, die beiden derzeit verbreitetsten Ansätze, wollen jedoch im Folgenden einen Überblick über die unterschiedlichen Begriffe geben:

1

VIRTUAL REALITY (VR)

Virtual Reality bezeichnet computergenerierte 3D-Welten, in die der Nutzer mittels einer entsprechenden VR-Brille eintaucht und in denen er sich – je nach Anwendungstyp – mehr oder weniger frei bewegen kann. In der Virtual Reality ist der Nutzer vollständig von der natürlichen Außenwelt entkoppelt. VR erfordert ein grundsätzliches Umdenken von an 2D geschulten Gestaltern, da viele der zu gestaltenden UX und UI Aspekte sich auf das Verhalten des menschlichen Körpers sowie physischer Objekte in einem 3-dimensionalen (sphärischen) Raum mit entsprechenden physischen Eigenschaften (z. B. Schwerkraft) beziehen.

Schnuppern Sie mal frische Holodeck-Luft, das wird Ihnen guttun.

C APTAIN PICARD. In Star Trek: Next Generation 4 / 19

226

V I R T UA L U N D AU G M E N T E D R E A L I T Y G E S TA LT E N

REALE WELT

VIRTUELLE WELT

5

REALITY

EXTENDED REALITY

XR

AUGMENTED REALITY

MIXED / HYBRID REALITY

AUGMENTED VIRTUALITY

VIRTUAL REALITY

AR

MR

AV

VR

DAS REALIT Y-VIRTUALIT Y-CONTINUUM

Das Reality-Virtuality-Continuum zeigt die unterschiedlichen Stufen im Übergang vom realen Raum zur vollständig virtuellen Umgebung.

227

3 DESIGN

einheitlichen Markenwahrnehmung bei. Wir raten davon

Kinder soll ich suchen?«. Dann ist es wichtig, dass die

ab, so zu tun, als sei der Chatbot tatsächlich ein Mensch.

Marke unterscheidbar bleibt und einen starken, eigen-

Das löst Irritationen aus und führt zu Unglaubwürdigkeit.

ständigen Charakter besitzt, der den Nutzer-Kontext

Transparenz ist wichtig, basieren die (KI-gestützten)

versteht und darauf reagiert.

Chatbots doch vor allem auf einer Vielzahl persönlicher Informationen des Nutzers. Vom sensiblen Umgang damit

Mehr als bei jedem anderen Medium gilt bei Chatbots:

hängt das Vertrauen des Nutzers und damit auch die

die Markenpersönlichkeit IST das Nutzererlebnis. Wie

Akzeptanz der Anwendung ab.

begegnet uns die Marke im Chatbot? Ist er ein Freund?

Ein Helfer? Ein Challenger? Ein Trainer? Die markenar-

Eine besondere Herausforderung stellt die hybride Ver­

chetypische Rolle (VGL. MARKENARCHETYPEN

wendung von Voice-basierten Sprachassistenten und

S. 79) wird relevant und nicht jede Persönlichkeit eig-

GUI -basierten Anwendungen dar. Der Nutzer aktiviert

net sich für jede Aufgabe. Deshalb sollten je nach

dabei mit seiner Spracheingabe eine App oder eine

Situation und Anwendungskontext unterschiedliche

Webanwendung und wird aus dem Sprechmodus heraus

Persönlichkeitsfacetten betont werden. So wie ein

­zur Interaktion mittels Touchgesten oder Point-und-­

Service-Mitarbeiter andere Soft Skills und Charakter­

Click geführt, wobei es im schlimmsten Fall zu einem

eigenschaften braucht als ein Verkäufer, so muss auch

irritierenden Medienbruch kommen kann. Grundsätz­

der Chatbot, der den Nutzer in Service-Aufgaben

lich sollte man daher prüfen, ob bei bildschirmbasierten

unterstützt, anders »ticken« als der Shopping-Chatbot.

Geräten nicht der Einsatz eines textbasierten Chatbots sinnvoller ist.

Wenn wir die Persönlichkeit eines Chatbots definieren, sollten wir Charakter und Verhalten unterscheiden. Der Charakter bleibt gleich, das Verhalten aber kann sich über

WER SPRICHT? DIE PERSÖNLICHKEIT EINES CHATBOTS

Zeit seinem Gegenüber in einem von der Marke zu definierenden Korridor an den Nutzer anpassen und so dazu beitragen, eine dauerhafte Beziehung aufzubauen.

Messaging-basierte Chatbots müssen sich oft mit anderen Chatbots die Aufmerksamkeit des Nutzers teilen. Es ist durchaus denkbar, dass ein Nutzer neben seinen menschlichen Kontakten gleich mehrere virtuelle ChatbotKo takte in seinem Messenger hat. Diese wird er genauso »anpingen« wie seine menschlichen Kontakte: »Hey Anna, ich muss morgen für einige Tage nach London reisen, kannst du mir einen Flug vorschlagen?« »Gerne, fliegst du alleine oder für wieviele Erwachsene und

Great writing and user under­standing is the pillar of good ­conversational design.

A DRIAN ZUMBRUNNEN. Google

246

6

KO N V E R S AT I O N E N G E S TA LT E N

SITUATIVER KONTEXT

BEGRÜSSUNG

Hej! Ich bin Anna von flyiin.

Erzähl mir von …

DIALOG

Ich möchte vom 22. - 29.

Juli nach New York.

Schön!

Der Big Apple ist toll zu dieser Jahreszeit.

EMPFEHLUNG

BUCHUNG

Welche Buchungsklasse bevorzugt ihr?

Economy Premium

Business

Alles klar!

Wie viele Gepäckstücke möchtet ihr aufgeben?

Auf dem Hinflug nur Handgepäck. 2 Koffer auf dem Rückflug.

Ich schlage vor, dass ihr in der Premium Economy Klasse fliegt.

Für nur 30€ mehr pro Person bekommt ihr mehr Komfort.

Deal!

Sehr gut!

Ich leite dich jetzt zum sicheren Bezahlen zu Paypal weiter.

Ok. ist notiert

DELIGHTFUL

CLEAR

DYNAMIC

B R A N D F I LT E R I M F O KU S

AUSSTEUERUNG DER PERSÖNLICHKEIT BEI EINEM CHATBOT

Ein Chatbot für flyiin: Je nach Anwendungskontext werden die Persönlichkeitsaspekte der Marke stärker oder weniger stark gespielt.

247

3 DESIGN

kann eine Smartwatch derzeit nicht einlösen. Auch

schaffen Data & Analytics und Machine Learning

die Handwerkskunst, die viele Luxusobjekte zu Unikaten

Algorithmen eine neue Intimität: Das Produkt weiß viel

macht, kann ein digitales Produkt nicht bieten. Als

mehr über den Nutzer als früher, gleichzeitig erfährt

ergänzende Funktion – sofern sie mit dem Anspruch der

der Nutzer aber auch das Produkt auf eine ihm angepasste

Marke in Einklang zu bringen ist – kann das Digitale

Art und Weise, die Nähe schafft. Ein perfektes Beispiel

jedoch ein Manufaktur-Produkt aufwerten und so z. B.

für Nests Anspruch ein »thoughtful home« zu schaffen.

auch Luxus- oder Premium-Produkten einen neuen Markt erschließen. Ein Beispiel hierfür gibt Steinway & Sons, die ihre weltbekannten Flügel wahlweise mit einem hochauflösenden Selbstspielsystem ausstatten.

SMART THINGS UND MIKROINTERAKTIONEN

Mit Steinway Spirio lassen sich so Hunderte von Auf­ nahmen der Steinway Artists von Lang Lang bis Billy Joel auf dem iPad auswählen und über den Flügel so wieder-

Die geschilderte Intimität wird vom Nutzer positiv

geben, als würde der Künstler selbst daran sitzen.

wahrgenommen, wenn wir die Informationen, die wir über ihn oder die jeweilige Nutzungssituation haben, für kleine Interaktionen einsetzen, die den Nutzer positiv

INTIMITÄT ZWISCHEN NUTZER UND MARKENPRODUKT

überraschen. Solche Mikrointeraktionen können markenprägend sein. Den Türgriff des Tesla haben wir schon erwähnt. Ein weiteres Beispiel: Nests Farsight-Thermostat. Das runde Thermostat, das an der Wand angebracht

Im Internet der Dinge interagieren Smart Things aber

wird, hat ein digitales Display, dessen Interface sich

nicht nur mit dem Nutzer, sondern auch miteinander. Sie

in der Darstellungs­größe der Entfernung des Betrachters

sprechen nicht nur mit dem Kunden, sondern auch über

anpasst: steht man direkt davor ist die Schrift kleiner,

ihn. Durch den ständigen Austausch von Informationen

zeigt aber mehr Informationen an, als wenn man einige

entstehen Big Data. Wenn Marken diese Daten klug

Meter entfernt steht.

nutzen, können sie Ereignisse triggern, die dem Kunden nützlich oder vergnüglich sein sollten. Allerdings: wie immer wenn Dritte Entscheidungen für andere treffen, ist dabei Vorsicht geboten.

DIE MARKE VERÄNDERT SICH ENTLANG DER USER JOURNEY

Denn Smart Things schaffen eine doppelte Intimität zwischen Gerät und Nutzer. Zum einen geschieht dies

Die User Journey ist ein zentraler Bestandteil des Mar­

durch die Unmittelbarkeit der Interaktion im Alltag:

ken­erlebnisses – gerade bei Smart Devices, die als

beim≈Einsatz von Sprach- und Gestensteuerung stehen

aktiver Begleiter des Nutzers konzipiert sind. Über den

keine physischen Interfaces mehr im Weg. Zum anderen

Zeit­raum der Nutzung verändert sich diese Beziehung.

260

7

S M A R T T H I N G S G E S T A L T E N

e H E A LT H

SMART MOBILITY

– Telemedizin – Vernetzte Implantate – Gesundheitsüberwachung – Quantified Self

– Connected Car – Smart Parking – Autonomes Fahren – Ortsbasierte Dienste – Verkehrsmanagement – Anti-Diebstahl – Sharing-Systeme

SMART ENERGY

– Smart-Grid – Smart Metering – Speicherung nachhaltiger Energien – Ladestationen – Klimaschutz

WEARABLES

– Smartwatches – Smart Textiles / Fashion – Schmuck und Accessoires

SMART HOME

– Heimautomatisierung (Licht, Sicherheit, Komfort) – Selbstdiagnose von Haushaltsgeräten – Energieeffizienz

SMART FACTORY

– Mass Customization – Automatisierte Produktion – Qualitätssicherung – Logistik

SMART CITIES

– Umwelt-Monitoring – Intelligente Verkehrssysteme – Adaptive Beleuchtung – Abfallwirtschaft – Gebäudemanagement

SMART RETAIL

– Produkt-Tracking – Inventarisierung – Intelligentes Shopping – Marketing – Item Location

SMART THINGS UND DAS INTERNET DER DINGE

Ein weites Feld für markengerechte Interaktionen: Das Internet der Dinge (IoT) vernetzt Produkte und Services aus vielen Bereichen des täglichen Lebens.

261

BRANDED INTERACTIONS Branded Interaction Design (BIxD) – die markengerechte

DIESES BUCH BRINGT IHNEN

Gestaltung interaktiver Anwendungen – geht weit über die visuelle Gestaltung hinaus. Die Anzahl digitaler

—

PL ANUNGSSICHERHEIT:

Sie kennen die Phasen

Marken-Kontaktpunkte wächst rasant; sie kohärent

des BIxD-Prozesses, wissen, worauf es in den

im Sinne der Marke zu entwickeln und zu orchestrieren,

verschiedenen Phasen ankommt und können komplexe

stellt Unternehmen und Agenturen vor neue Heraus-

Projekte souverän und strukturiert umsetzen.

forderungen. Katja Wenger und Marco Spies begleiten

—

HANDWERKSZEUG:

Sie werden gerne auf die praxis-

mit ihrer Agentur namhafte Unternehmen in der

erprobten Tipps und Tools bauen, auf Grafiken und

digitalen Transformation. Sie wissen, wie man Marken

Checklisten zurückgreifen und sie in Ihren Projekten –

im digitalen Raum glaubwürdig erlebbar macht und

kleinen oder großen – nutzbringend einsetzen.

wie man digitale Produkte und Services im Sinne der

—

STRUKTUR:

Sie erfahren, worauf es in der Vielzahl

Marke plant und gestaltet. Sie kennen die Unterneh­

möglicher Touchpoints ankommt, worin die jeweiligen

mensseite aus eigenen Startup­Erfahrungen und geben

Chancen und Risiken liegen – und was es in Konzeption und Gestaltung zu beachten gilt.

dieses Wissen weiter. Profund und praxisnah. Struk­ —

turiert und verständlich.

AGILITÄT:

Sie erkennen, wie Ökonomie und IT,

Gesellschaft und Design heute interagieren und weshalb flexible Strukturen belastbarer sind als starre.

Dieses Buch sollte eine Überarbeitung des Erfolgstitels werden. Es wurde ein neues Buch. Für eine neue Zeit.

—

S TA R T U P-KU LT U R:

Sie lassen sich anstecken vom

Mindset einer neuen Zeit, das dieses Buch durchzieht

Für Ihren Erfolg in dieser Zeit.

wie ein roter Faden.

Hier bestellen

I S B N 9 7 8 -3 - 8 74 3 9 - 9 0 7- 4