6 Schwerpunkte für UX und Branding

Je stärker Ihre Unternehmensleistung von Ihrer Online-Präsenz abhängt, desto riskanter ist ein Redesign; das ist unbestreitbar. Das gilt aber auch, wenn Ihre Website oder Mobile App den Vertrieb weniger stark bestimmt, auf eine andere Art der Interaktion ausgelegt ist oder nur Informationen bereitstellt. Alles Gründe, den Prozess des Online-Rebrandings sorgfältig anzugehen. Selbstverständlich, so gehen Sie jede Veränderung an, normalerweise aber in überschaubaren Häppchen. Eine User Story wie „ein komplettes Online-Rebranding“ fühlt sich allerdings nicht besonders überschaubar an. Eine schöne Herausforderung, ein Szenario und ein Vorgehen zu entwickeln, mit denen Sie die Risiken minimieren. Und die gibt es immer. Nachfolgend sechs Themen, die besondere Aufmerksamkeit verdienen.

„Je stärker Ihre Unternehmensleistung von Ihrer Online-Präsenz abhängt, desto riskanter ist ein Redesign.“

1. Das Tempo: Big Bang oder stufenweise

Die Vor- und Nachteile eines Big-Bang-Rebrandings lasse ich hier offen, in der Praxis verläuft der Website-Übergang aber nahezu immer schrittweise. Vor allem dann, wenn die Website:

• auf Conversion optimiert ist,

• komplex ist und

• aus mehreren Systemen besteht.

Der große Vorteil dieser stufenweisen Umsetzung pro Backlog-Item ist, dass Sie kontinuierlich messen und nachsteuern können. So begrenzen Sie mögliche negative Nebenwirkungen. Aber – und das sollten Sie sich ebenfalls bewusst machen – Sie verzichten vorübergehend auch auf die visuelle Kraft des Gesamtbildes.

Das Vertrauen in das Design und in den Designer spielt eine große Rolle. Noch allzu oft entwickeln grafisch orientierte Designer ihre Offline-Designs für Online-Kanäle und -Medien weiter. Dass ein UX-Experte davon nervös wird, verstehe ich sehr gut. Und das führt dann auch zu einer zweifelhaften Umsetzung (sprich: einer langen Durchlaufzeit). Wenn Sie die Wahl des Designers beeinflussen können, achten Sie sehr genau auf dessen Online-Kompetenz und -Erfahrung!

„Noch allzu oft entwickeln grafisch orientierte Designer ihre Offline-Designs für Online-Kanäle und -Medien weiter.“

Wenn Sie mich nach meiner Präferenz fragen: Ich bin kein Freund davon, Teile von Seiten (vorübergehend) zu verändern. Zum Beispiel nur das Logo oder einen Call-to-Action-Button. Besser entscheiden Sie sich für eine Staffelung, bei der Sie jeweils einen Teil der Website angehen. Etwa alle Produktseiten auf einmal. Andernfalls können Sie die Ganzheitlichkeit nämlich nicht messen. Menschen bewerten Elemente und Komponenten nicht einzeln, ein gemessener Effekt ist also per Definition irrelevant.

Ein ganz anderer Aspekt der Taktung ist die Personalfrage. Ein vollständiges Rebranding – und damit meine ich nicht einen Logo-Tausch und ein paar neue Farben – erfordert erheblich zusätzliche Entwicklungskapazität. Die ist nie einfach verfügbar und lässt sich bei einem angespannten Arbeitsmarkt selten flexibel besetzen. Sorgen Sie aber für ausreichend sichtbaren Fortschritt, damit Kunden erkennen, dass Sie sich in einer Übergangsphase befinden; sonst entsteht zu lange ein unklares Markenerlebnis.

2. Das Interaction Design: anpassen oder nicht?

Auch wenn Sie das Visual Design nicht losgelöst vom Interaction Design betrachten können, lässt sich das Rebranding durchaus ohne Änderung des Interaction Designs durchführen. Latenter Anpassungsbedarf kommt bei einem Rebranding allerdings oft doch an die Oberfläche, das Momentum ist ja da. Deshalb ist es effizienter, alles gleichzeitig anzugehen; für das Markenerlebnis ist das vielleicht ebenfalls besser. Doch der Impact ist dann noch größer, das Ganze schwerer zu überblicken und der Effekt nur als Ganzes messbar. Aus Sicht der Projektsteuerung nicht empfehlenswert. Das ist eine Entscheidung. Treffen Sie sie bewusst.

Die Visualisierung von Inhalten mit Videos und Infografiken wirkt stark auf das Markenerlebnis, aber auch auf das interaktive Wireframe und damit auf den Arbeitsumfang. Hinzu kommt, dass die Gruppe der Projektbeteiligten deutlich größer wird. Wieder eine schwierige Entscheidung, die Sie allerdings sehr gut pro Content-Bereich umsetzen können.

Sie brauchen übrigens nicht zu befürchten, dass eine spätere Anpassung des Interaktionsmodells erneut eine Korrektur des Corporate Designs nach sich zieht. Ist dieses gut entwickelt, bietet es genügend Dynamik, um Website-Anpassungen zu folgen. Sinnvoll ist es aber, User Stories und die Roadmap zu analysieren. Wo möglich, können Sie das im Visual Design berücksichtigen.

3. Das Fundament: Off- und Online verbinden

Bei einem Rebranding starten Sie mit dem generischen Design der Basiselemente (in der unten abgebildeten Atomic-Design-Methode© „Atome“ genannt) für alle Online- und Offline-Markenträger. Dabei ist es sehr wichtig, Online/Digital als Ausgangspunkt und Referenz zu nehmen. Zumindest dann, wenn Sie Ihr Geschäft überwiegend online betreiben oder betreiben werden. In diesem Fall wollen Sie Farben nicht in PMS und CMYK definieren und die Ableitungen in RGB, wie wir es jahrelang getan haben. Nein, umgekehrt. Und Schriften müssen, gerade wenn sie charakteristisch für Ihre Marke sind, online gut funktionieren (in Lesbarkeit und Ladezeit). Akzeptieren Sie nicht, dass online dann eben etwas anderes verwendet wird.

Für viele traditionelle Corporate Designer fühlt sich das noch immer unbehaglich an. Ist eine solche Designagentur gesetzt, dann ist eine intensive Zusammenarbeit mit Ihren UX-Experten und Visual Designern ein Muss. Ohnehin natürlich, dann aber wirklich von Anfang an. Das Fundament können Sie nämlich nur einmal richtig legen. Die Abbildung unten zeigt ein Designsystem, mit dem wir Offline und Online in der Basis miteinander verbinden. Von der gemeinsamen Basis aus können die Spezialisten anschließend die Markenmedien für die verschiedenen Kanäle gestalten; zentral begleitet vom Art Director.

Das Atomic-Design-Modell von Brad Frost

4. Zusammenarbeit

Dass Zusammenarbeit angebracht ist, ist eine Binsenwahrheit. Wenn Ihre Organisation agil aufgestellt ist, bestehen schon viele nützliche Verbindungen zwischen den Fachbereichen. Ein Rebranding erfordert allerdings eine vorübergehende, aber enorme Intensivierung des Visual Designs. Kapazität zu organisieren und das Backlog zu aktualisieren ist dann keine Kleinigkeit.

Unterm Strich lässt sich kein Visual Design erstellen ohne intensive Zusammenarbeit mit:

• UX-Experten/Interaction Designern (die wissen, welche Interaktion bzw. welcher Flow pro Seite beabsichtigt ist)

• Entwicklern/Frontend- und Backend-Spezialisten (die wissen, was Ihre Plattform kann)

Sorgen Sie deshalb für (zwei-)wöchentliche Sessions, in denen der Visual Designer neu entwickelte Komponenten und Seiten dem Team erläutern kann. Nehmen Sie sich ausreichend Zeit für Feedback und gegebenenfalls Recherche. Und wenn Sie schon ein breit getragenes Ergebnis anstreben: Beziehen Sie die Fachleute aus dem Propositions- und Produktmanagement sowie aus Marketing & Kommunikation ein. Sie haben ohne Zweifel lang gehegte Wünsche und Ideen für Verbesserungen; holen Sie sie ab!

„Wenn Ihre Organisation agil aufgestellt ist, bestehen schon viele nützliche Verbindungen zwischen den Fachbereichen.“

5. Datenanalyse: davor, dabei und danach

Selten werden Datenanalysten bereits in den Designprozess einbezogen, und das ist schade. Noch bevor das Design entstanden ist, können sie Input zum Verhalten auf der Website liefern. Und, ebenso wichtig, eine Hypothese aufstellen, warum das neue Design besser abschneidet. So verknüpfen Sie die KPIs der Online-Strategie. Das ist durchaus schwierig, denn harte Wissenschaft fehlt, so meine Beobachtung bislang. Aber es schafft natürlich Vertrauen und damit die nötige Akzeptanz.

Den Schalter umzulegen ist ein sehr spannender Moment, ob Sie stufenweise vorgehen oder alles auf einmal. Web-Analyst Rob Esenkbrink – der mir in diesem Punkt viel Einsicht verschafft hat – bevorzugt bei einem Rebranding ausdrücklich eine Beta-Site. Damit testen Sie direkt, wie das Design interpretiert und bewertet wird. Das beste Feedback ist nämlich die Nutzung durch Ihre Besucher. Ob mit oder ohne Iteration: Sie führen das Neue ein, sobald sich seine gute Wirkung erwiesen hat. Eine Form von A/B-Test, aber mit größeren Schritten.

Danach beginnt die Nachsorge des Feintunings. Aus dem Business kommen Anmerkungen und Fragen, und Online-Analysen liefern Erfahrungswerte. Ein Datenanalyst entschlüsselt diese und übersetzt sie in Input für die Optimierung des Designs. Datenanalysten nicht am Designprozess teilhaben zu lassen, führt zu mehr Trial and Error. Falls Sie sie nicht im Haus haben, lassen Sie Ihre Website zumindest über einen Zeitraum oder notfalls einmalig gründlich durchleuchten. Es gibt zwar viele Analyse-Tools, Sie müssen die Daten aber auch übersetzen können. Das ist eine Kunst.

„Es gibt viele Analyse-Tools, Sie müssen die Daten aber auch übersetzen können.“

6. Teilen: Markenportal oder UI-Library

Bei nahezu jedem Rebranding, das ich begleite, finde ich (manchmal deutlich) mehr Websites, als der Auftraggeber für möglich hält. Unabhängig von der Frage, ob das sinnvoll ist (die wir übrigens noch nie mit „ja“ beantworten konnten), haben Sie also mit mehreren Entwicklern zu tun; intern und extern. Zudem haben komplexere Websites in der Regel mehrere Entwicklungsteams. Wichtig ist deshalb, das Entwickelte zu teilen. Das erhöht die Effizienz und sorgt letztlich für ein einheitliches Markenerlebnis.

Markenportale unterstützen Sie dabei. Das heißt, sie teilen die Basiselemente, Basisentwürfe und angewandten Entwürfe des Markenstils. Gute Markenportale können das auch für nicht statische Designs, doch die sind leider in der Minderheit. Bei online genutzten Elementen wie Buttons, Eingabefeldern, Notifications und Ähnlichem wollen Sie ja sehen können, wie sie sich verhalten. Denken Sie an Mouse-over, Animationen usw.

Markenportale sind, sofern funktionsreich, also gut geeignet, um Visual Design zu teilen. Für einen Entwickler ist das jedoch nicht genug. Für das Teilen gebauter Komponenten/Patterns (Header, Footer, Tiles, Menüs usw.) und eventuell generischer Seiten gelten Markenportale als nicht geeignet. Das ist schade, aus Sicht der Entwickler aber verständlich. Sie nutzen eigene UI-Libraries, in denen Entwicklungen geteilt werden, auch Versuche, Tweaks und Halbfabrikate. Zentral „cross browser“ entwickelt und auf Usability und Performance getestet. Versionsverwaltung ist dann wichtig. Dieser Ansatz der Zusammenarbeit unterscheidet sich von dem der Markenportale, die stärker darauf ausgelegt sind, Endergebnisse bereitzustellen. Die Brücke zwischen beiden Welten lässt sich durchaus bauen, in der Praxis habe ich sie aber noch nicht erfolgreich funktionieren sehen.

Für Komponenten, die plattformabhängig entwickelt werden, ist Teilen übrigens oft kein Thema. Auch unterschiedliche Interaktionsmodelle von Websites oder Website-Teilen können den Nutzen des Teilens begrenzen. So unterscheiden sich zum Beispiel die „Hauptsite“, die Karriereseite und „Über uns“ in der Regel schon so stark, dass viele Komponenten nicht teilbar sind.

Zum Schluss

Bei vielen Projekten des Online-Rebrandings gibt leider oft die Unsicherheit den Ton an. Anders gesagt: Der Fokus liegt darauf, Ärger zu vermeiden. Kein Wunder, denn viele haben online noch nie ein vollständiges Rebranding realisieren müssen. Diese Angst wirkt aber kontraproduktiv. Dabei lässt sich das so gut organisieren, dass Sie die Aufgabe gemeinsam mit Vertrauen bewältigen können. Und – das möchte ich betonen – ein Redesign kann auch viele Chancen bieten. Diese Perspektive geht in der Emotion häufig unter. Muss sie übrigens bieten, sofern Ausgangspunkte und Ausarbeitung gut sind.