Relaunch Report: Konzeption & Design

In der letzten Woche habe ich euch erzählt, wie wir mit unserem letzten Relaunch gestartet sind. Hier waren viele Daten von Analysetools und eine Menge Gehirnschmalz notwendig, um das Projekt effektiv zu planen. Im heutigen Beitrag befasse ich mich mit dem Thema Konzeption, was bei dem Bau einer neuen Website auch viel mit dem Bereich Design zu tun hat. Am Anfang standen natürlich auch hier viele Überlegungen und daher starteten wir mit Konzeptions-Workshops zu folgenden Themen:

  • Touchpoints ermitteln: Als Touchpoints lassen sich alle Situationen/Stellen bezeichnen, in denen (potenzielle) Kunden mit Mittwald in Kontakt kommen. Der „Erstkontakt“ erfolgt dabei nicht zwangsläufig über die Website. Das können auch unsere Social Media Kanäle, Werbeanzeigen, Pressemeldungen, Testberichte usw. sein. In dieser Phase haben wir möglichst umfassend alle Touchpoints ermittelt.
  • Experience-Map erstellen: Nachdem wir die Touchpoints ermittelt hatten, haben wir geschaut, wie die User damit interagieren und welche Erfahrungen sie dabei machen. Mit welchem Vorwissen erreichen sie den Touchpoint? Welche Akteure beeinflussen den Prozess und haben Einfluss auf die User? Welche Ziele und Probleme könnten sie haben und welche Emotionen rufen die Kontakte mit unseren Touchpoints bei den Usern aus? Daraus haben wir eine Experience-Map erstellen, in der ein kompletter Besucherpfad vom ersten Kontakt bis zum Kaufabschluss abgebildet wurde.
  • Knackpunkte ermitteln: Anhand der Experience-Map ließen sich gut die Stellen identifizieren, an denen besonders viele positive oder negative Emotionen vermutet wurden. Diesen Stellen gilt es bei der Konzeption der neuen Seite und der neuen Prozesse besondere Aufmerksamkeit zu widmen.

Bei lockeren Workshops, mit Teilnehmern aus unterschiedlichen Teams/Bereichen, kommen meist extrem viele, gute Ideen heraus. Wir haben damit bisher immer sehr gute Erfahrungen gemacht.

mittwald timeline

User Centered Design

Wir haben den Ansatz des User Centered Designs (nutzerorientierte Gestaltung) eingesetzt, um unserem Ziel näher zu kommen. Beim diesem Vorgehen geht es darum, die Bedürfnisse des Kunden in den Fokus zu rücken und das Design „drum herum“ zu entwickeln und die Usability auf diese Bedürfnisse auszurichten. Dazu gehört z. B. die Erstellung von Personas oder das Card-Sorting für die Optimierung der Menüstruktur. Wir haben dann die unterschiedlichen Seitentypen identifiziert und geschaut, welche Aufgaben sie konkret erfüllen sollen. Zum Beispiel ist es ein großer Unterschied, ob wir ein Produkt verkaufen (https://www.mittwald.de/hosting/managed-server) oder die Philosophie unseres Unternehmens vorstellen möchten (https://www.mittwald.de/unternehmen/philosophie).

Personas

Mit den Personas haben wir versucht, uns die Kunden und deren Bedürfnisse genauer vorzustellen. Es werden quasi „Musterkunden“ erstellt, die dann für bestimmte Zielgruppen stehen. Punkte wie Ausbildung, Wissen, Interessen, Ziele, Aufgaben etc. spielen dabei eine Rolle. Das erleichtert die Planung der Seitentypen ungemein, weil man so ein „Gesicht“ hat, welches für eine gewisse Gruppe von Menschen steht.

Card Sorting

mittwald_cartsortingCard Sorting haben wir z. B. bei der Planung des Menüs eingesetzt. Dabei werden alle Menüpunkte auf Karten geschrieben (auch in verschiedenen Varianten/Bezeichnungen). Wir haben uns gefragt, welche Inhalte User hinter einem Begriff vermuten und an welcher Stelle im Menü (z. B. unter welchen Oberpunkten) diese Infos gesucht werden würden. Die Begriffe haben wir dann in mögliche Menüstrukturen gebracht und nochmals an Mitarbeitern getestet, die nicht im Projektteam involviert waren.

Must-haves vs. Nice-to-haves

Das kennt ihr sicher auch: Ihr habt einen ganzen Wust an Ideen, wisst aber schon im Vorfeld, dass ihr das niemals alles umsetzen könnt. 🙂 Darum erstellen wir inzwischen grundsätzlich Must-haves und Nice-to-haves für die Projektplanung.

Dabei kam zum Beispiel heraus, dass wir den Bestellprozess und die interne Suche im ersten Schritt ausklammern. Außerdem wollten wir die Texte unserer alten Website übernehmen, wo es möglich war. Es wurde jedoch auch ein neues Textkonzept erstellt, welches zunächst für Headlines und unsere wichtigsten Seiten angewendet wurde. Das alleine würde reichen, um den „Ton“ auf der Website schon aktivierender und motivierender zu gestalten.

Bei den Must-haves stand das Hauptmenü besonders im Vordergrund: Wir wollten unbedingt kürzere Wege zum Ziel (sprich: zum Bestellprozess :-)) schaffen und das Thema Hosting in den Vordergrund stellen. Außerdem war es uns wichtig, unsere Zielgruppen anzusprechen.

Mittwald Hauptmenü

Aus den unterschiedlichen Menüstrukturen des Card Sortings haben wir diverse Menü-Prototypen erstellt und an unseren Kollegen getestet. Über einen Fragebogen wurden den Kollegen gezielt Aufgaben gestellt, die sie mit dem Menü-Prototypen lösen mussten. So wurde uns schnell klar, was bereits gut funktionierte und an welchen Stellen noch Probleme in der Menüstruktur oder den Bezeichnungen bestanden. Diese Erkenntnisse flossen direkt in den nächsten Menü-Prototypen, der dann wiederum getestet wurde.

Für die Wireframes und Prototypen verwendeten wir übrigens Balsamiq und Axure mit denen wir auch schon beim letzten Relaunch gute Erfahrungen gemacht hatten. Zu guter Letzt kamen natürlich auch unsere analogen Whiteboards zum Einsatz. 😉 #oldschool

Responsive Design und Gestaltung

Besonders wichtig ist für uns natürlich das Design. Zum einen „isst” das Auge bekanntlich mit, zum anderen sind viele unserer Kunden selbst Webdesigner und sollen natürlich einen möglichst professionellen Eindruck von uns bekommen. Man spricht ja immer vom „Look & Feel“: Uns war es besonders wichtig eine Umgebung zu schaffen, in der sich der Website-Besucher wohl fühlt und schnell zu den Infos gelangt, die er sucht.

Ein Hauptziel des Relaunches war die Umstellung auf ein Responsive Design. Unsere Seite sollte also auf allen Endgeräten bestmöglich aussehen und nutzbar sein. Wir haben uns für ein 12-spaltiges Raster schieden. Inhaltelemente wurden in Blöcke zusammengefasst, die sich je nach Auflösung des Endgeräts unterschiedlich anordnen.

Für unsere Grafiker bestand die Herausforderung darin, Layout-Regeln zu definieren, die auf den unterschiedlichsten Auflösungen funktionieren. Unsere alte Website hatte noch einen stärkeren „Magazin-Charakter“, der teilweise eher einem Printlayout angelehnt war. Das galt es für das Responsive Design aufzubrechen. Inhaltlich zusammenhängende Bereiche sollten über die gesamte Breite der Seite dargestellt werden und nicht in einzelnen Spalten neben anderen Themen. Zudem war im neuen Design vorgehsehen, Inhalte auch durch farbige Hintergründe in einem Blau- oder Sandton optisch voneinander zu trennen.

Auch zahlreiche neue Seitenelemente wurden in diesem Prozess ins Leben gerufen und gestaltet. Dazu zählen unter anderem Slider, Akkordeon-Boxen, Call-to-Action-Buttons oder natürlich unsere überarbeiteten Tariftabellen.