Website-Relaunch: Vom Wasserfall zum Rapid Prototyping

Es gibt wohl 100 Möglichkeiten, den Relaunch einer komplexen Corporate Website zu planen und zu organisieren. Wir haben diesmal einen neuen Weg eingeschlagen – mit interessanten Erkenntnissen …

Alles ist im Fluss, ständig gibt es kleine Veränderungen und Verbesserungen auf einer Unternehmes-Website. Doch alle vier bis fünf Jahre holen wir bei datev.de zum großen Rundumschlag aus. Zuletzt wurde die Website 2009 generalüberholt, jetzt arbeiten wir am nächsten großen Relaunch.

Wasserfall mit Problemen

2009 sind wir klassisch nach einem Wasserfallmodell vorgegangen. Auf Planung und Analyse inklusive Sammlung und Priorisierung aller Anforderungen folgte eine Entwurfsphase mit Wireframes, Layouts und Prototyp, anschließend wurde die Website programmiert, in einer umfangreichen Qualitätssicherung getestet und schließlich veröffentlicht.

Diese Vorgehensweise hat zwar zu einem guten Ergebnis geführt, hatte aber ihre Nachteile, weshalb wir uns diesmal für einen anderen Prozess entschieden haben. Das größte Problem war kurz gesagt die strikte Trennung zwischen Konzeption und Realisierung. Wie bei einem Wasserfall so üblich, fließt das Wasser nur in eine Richtung. Auf Analyse folgt Realisierung und fertig, ein Zurück gibt es nicht. Das klingt linear und damit zielstrebig, es fehlen aber Instanzen, die es einem ermöglichen, die Ideen aus der Konzeptionsphase mit der Praxis aus der Realisierungsphase abzugleichen.

Wo kommt der Nutzer ins Spiel?

Vor der Scheibe - Arbeitsplatz des Probanden im Benutzerlabor
Vor der Scheibe – Arbeitsplatz des Probanden im Benutzerlabor

Am besten zeigt sich das Problem anhand einer konkreten Frage, die da lautet: Wo kommt eigentlich der Nutzer ins Spiel? Bei unserem 2009er-Relaunch kam er bei einem Benutzerlabor ins Spiel, das wir (und das ist typisch für solche Projekte) relativ spät durchführten und das mehr oder weniger dazu diente, die Ideen der Analyse- und Konzeptphase zu bestätigen.

Das Benutzerlabor war gut und wichtig, aber es lag zeitlich zu spät. Die Konzeptphase war bereits abgeschlossen, das Wasser weiter in Richtung Programmierung geflossen, die Umsetzung war in vollem Gange. Konsequenterweise konnten diejenigen Erkenntnisse aus dem Benutzerlabor, die nicht Bestätigung waren, kaum noch berücksichtigt werden – dabei sind genau das die wichtigsten und wertvollsten Erkenntnisse.

Agiler Prozess mit Rapid Prototyping

Diesmal wollten wir den Nutzer viel früher beteiligen, von ihm lernen und diese Erkenntnisse vor allem viel stärker in die Entwicklung der neuen Website einfließen lassen. Dazu musste die strikte Trennung zwischen Konzept und Realisierung aufgehoben, der Prozess musste flexibler und agiler werden.

Natürlich standen auch diesmal am Anfang Vorüberlegungen und Ideen, die aber sehr schnell in einen ersten klickbaren Prototypen einflossen, der sehr früh in einem ersten Benutzerlabor verprobt wurde. Auf Basis dieser Erkenntnisse wurde der Prototyp umgehend weiterentwickelt (daher „Rapid Prototyping“) und wiederum in einer zweiten Iteration in einem Benutzerlabor verprobt. Und auch diese Erkenntnisse führten in einer weiteren Schleife zur Weiterentwicklung des Prototypen und zur dritten Verprobung im Benutzerlabor. Danach waren sozusagen kaum noch Fragen offen. Wichtig: Bei den Benutzerlaboren und den abschließenden Workshops müssen alle wesentlichen Beteiligten – vom Planer bis zum Entwickler – anwesend sein, um die gewonnenen Erkenntnisse sofort in die nächste Iteration einfließen zu lassen.

Klärung wichtiger Fragen im Benutzerlabor

Hinter der Scheibe - Beobachter im Benutzerlabor
Hinter der Scheibe – Beobachter im Benutzerlabor

Das ist zwar aufwändig, sorgt aber dafür, dass zwischen abstrakter Idee und konkreter Umsetzung der Nutzer ausführlich zu Wort kommt und die Verbesserungen aufgrund seiner Rückmeldungen tatsächlich noch eingearbeitet werden können.

Die Benutzerlabor-Iterationen helfen dabei sowohl bei der Klärung „großer“ Fragen als auch bei Detailentscheidungen. Wie muss die Startseite strukturiert sein? Welche Navigation nutzt der Nutzer wie? Kommt er mit einem Mega-Dropdown zurecht? Wie kann man ihm am besten komplexe Produktabhängigkeiten verständlich machen? Wie muss eine Buy-Box gestaltet sein, damit er möglichst unkompliziert das richtige Produkt bestellen kann? Versteht er unser Wording? Bevorzugt er eine Listen- oder Kacheldarstellung? Diese und weitere Fragen konnten wir klären.

Benutzerlabor: Von der Weichenstellung zum Feintuning

Besonders interessant fand ich, dass pro Iteration unterschiedliche Erkenntnisse gewonnen werden konnten bzw. dass jede Iteration einen anderen Zweck erfüllte. Ins erste Benutzerlabor gingen wir naturgemäß noch mit „ungeprüften“ Ideen in unterschiedlichen Varianten. Hier fielen manche Ansätze komplett durch, wir hatten aber danach eine klare Vorstellung, welche Ideen wir wie weiterentwickeln können.

Das zweite Labor war nicht nur hilfreich, sondern auch befriedigend, da sich zeigte, dass die Weiterentwicklung in die richtige Richtung gegangen war. Es gab noch Detailkritik und -erkenntnisse, im Großen und Ganzen war es aber eine Bestätigung der Arbeit. Im dritten Benutzerlabor ging es folgerichtig um Feintuning, außerdem hatten wir Spielraum, noch ein wenig zu experimentieren.

Aufwand, der sich lohnt

Abschluss-Workshop zum Benutzerlabor
Abschluss-Workshop zum Benutzerlabor

Auch wenn sich das nicht verallgemeinern lässt, würde ich doch sagen, dass daher drei Iterationen die ideale Anzahl für so ein komplexes Projekt sind, vor allem wenn man wie wir die Website responsiv für verschiedene Endgeräteklassen entwickelt und im Benutzerlabor den Nutzer sowohl am Desktop-PC als auch am Tablet und Smartphone arbeiten lässt (und gerade in Sachen Smartphone-Navigation haben wir sehr viel gelernt …).

Natürlich gibt es das alles nicht umsonst. Die Konzeptionsphase wird aufwändiger, die Entwicklungsarbeit am Prototypen zieht sich in die Länge und jedes Benutzerlabor kostet Geld. Doch der Aufwand lohnt sich, da bin ich mir sicher.

Wer übrigens auf der Suche nach Agenturen ist, mit denen er so etwas realisieren kann, dem empfehle ich unsere Partner von Ray Sono, a&i, Former 03 und GfK SirValUse, die das in tollem Teamwork kreativ, agil und professionell für uns auf die Beine gestellt haben.

Mehr lesen

Dieser Beitrag ist der erste Teil einer kleinen Artikel-Serie, die ich im Zusammenhang mit unserem Website-Relaunch geschrieben habe. Weitere Beiträge sind:

Im DATEV-Blog gibt es drei Beiträge, die sich mit dem Relaunch beschäftigen:

8 Gedanken zu “Website-Relaunch: Vom Wasserfall zum Rapid Prototyping

  1. Hallo christian,

    der link zu Deinem Blog funktioniert bei mir nicht mehr. Liegt das an mir oder an dir??

    Gute Woche. Wo geht’s denn diese Woche zum Biertesten hin? Am Freitag bring ich Dir ein selbstgebrautes Bier vom Rainer mit. Keine Angst! Ist schon vielfach getestet und für sehr lecker befunden.

    LG

    Elke

    Gefällt mir

  2. Spannender Artikel. An manchen Stellen hätte ich mir etwas mehr Details gewünscht, da mich das Thema natürlich sehr interessiert – insbesondere agile Vorgehensweisen vs. klassischem Vorgehen.
    Beim Testlabor hätte mich noch interessiert, ob die Test-Teams in den drei Iterationen aus den selben Benutzern zusammengesetzt waren, oder ob es jeweils neue Tester waren.
    Insgesamt ist es natürlich niemals falsch, den Benutzer möglichst früh in die Entwicklung einzubeziehen – da ist das agile oder zumindest iterative Vorgehen dem Wasserfall klar überlegen. Wobei man das u. U. auch im Wasserfall bereits in der Definitions- oder Entwurfsphase unterbringen könnte.

    Gefällt mir

    • Es waren jeweils neue, nicht „vorbelastete“ Probanden, da der jeweils neue Stand ja für sich funktionieren sollte. Die Lernkurve war für uns wichtig, Probanden mit Lernkurve hätten dagegen das Ergebnis verfälscht …

      Gefällt mir

  3. Ich möchte noch ein paar Ergänzungen zu Deiner schönen Übersicht hinzufügen:

    Der Ansatz – nach der grundsätzlichen Designentscheidung – statt mit verlinkten Bildchen direkt in HTML weiter zu entwickeln halte ich für wahnsinnig wichtig und gut. Zum einen fallen alle „Verfälschungen“ wie andere Schriftenglättung, fehlende Mouseovers (oder auch nur Cursorveränderungen), fehlende Wischgesten auf Touchgeräten etc. weg – zum anderen kann man mit CSS3 und etwas JavaScript mittlerer Weile fast effizienter gestalten und anpassen als mit einem „klassischen“ Photoshop-Workflow. Gerade wenn man verschiedenes Wording oder verschiedene Navigationen auf mind. drei Geräteklassen (Smartphone, Tablet, PC) gegeneinander vertestet würde man mit Photoshop-Screens wahnsinnig.
    Zudem ist das schnelle direkte Feedback bei Interaktionen wichtig – bei „Bildwechseln“ fühlt sich das einfach nicht echt an und das hätte uns sicher partiell andere Ergebnisse gebracht.
    Ich möchte sogar so weit gehen, dass bei responsivem Design grundsätzlich nach der Grunddesignentscheidung für eine Layoutlinie in HTML/CSS gearbeitet werden muss – alles andere ist gerade in Hinsicht auf Testing und Check auf den Geräten nicht verlässlich. Bei einer guten Verzahnung von Frontendtechnik und Design in der Agentur ist dieser Ansatz vermutlich sogar budgetär günstiger. Und: Im Idealfall kann das CSS des Klickdummies später zu großen Teilen für die „echten“ Templates übernommen werden.

    Ansonsten war es toll mit drei Iterationen von den Nutzern lernen zu dürfen. Es gibt kein besseres und schonungsloseres Feedback. Und toll war es in drei Runden bewusst zu experimentieren: Es gab Elemente bei denen ich gewettet hätte die User verstehen Sie sofort – und sie haben es nicht. Und es gab aber auch knifflige Neuerungen bei denen ich mir wirklich nicht sicher war ob die Benutzer das verstehen – und es klappte auf Anhieb. Das ist toll. So kann man Innovationen vorantreiben – und muss nicht auf möglicherweise veraltete Paradigmen wie „Benutzer scrollen nicht“ zurückgreifen.
    Als einziges „Manko“ möchte ich festhalten, dass nach 50% der Probanden in der letzten Iteration eigentlich alles klar war. Da hätten wir noch ein paar „Experimente“ mehr vorbereiten können und diese vertesten können.

    Zuletzt möchte ich mich auch bei Euch bedanken: Es gibt wenige Kunden, die sich auf so einen Prozess einlassen, es bedeutet ja immensen Aufwand und viel Vorbereitungszeit. Und ganz wichtig ist auch, das Scheitern von Experimenten ein zu kalkulieren – nur so kommt man voran. Es ist eben kein „Abnicken“ am Projektende sondern ein agiler Prozess mit Raum für Fehlschläge. Auch diesen Raum bekommt man nicht oft eingeräumt.

    Gefällt mir

  4. […] Vor allem auf der User Experience. Für mich ist das die wichtigste Säule, da wir hierbei die Chance haben, vom Köder zu erfahren, wie ihm der Fisch schmeckt. Methoden gibt es viele, von Befragungen über A/B-Tests und multivariate Tests bis hin zu Benutzerlaboren, über deren Rolle in einem Relaunch-Projekt ich ja kürzlich schon gebloggt habe. […]

    Gefällt mir

Und jetzt sag deine Meinung:

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s