User-Centered Design Reality-Check: Der Relaunch von eresult.de

Wer kennt sie nicht, die Ausrede vom Schuster, der die schlechtesten Schuhe trägt. Nach langer Zeit haben wir uns bei eResult ein Herz gefasst und sind unsere eigene Website angegangen, statt immer nur die unserer Kunden zu verbessern. Die Ansprüche und Erwartungen an ein solches Projekt sind natürlich hoch – sowohl intern als auch extern. Und es soll logischerweise nach User-Centered Design ablaufen, am besten mustergültig.

Schnell aber treffen dabei die hehren Ziele der Theorie auf die erbarmungslose Wirklichkeit von fehlender Zeit, kleinem Budget und schwierigen Zielgruppen. Mein Verständnis für die Herausforderungen unserer Kunden ist in dieser Zeit enorm gestiegen. Aber auch wenn nicht alles perfekt nach ISO-Norm ablaufen kann, so gibt es doch an vielen Stellen die Möglichkeit, zumindest im Kleinen an die Nutzer zu denken, sich in sie hineinzuversetzen und sie einzubeziehen in die Konzeption einer Website. Von meinen Erfahrungen damit möchte ich heute berichten.

Das Projekt: Relaunch von eresult.de

Unsere alte Website bestand in ihrer grundsätzlichen Form bereits seit 2009 – und das sah man ihr auch sicherlich an. Abgesehen vom altehrwürdigen Design war vor allem die mangelnde Darstellung auf mobilen Endgeräten nicht mehr akzeptabel. Und auch im Hintergrund waren einige Änderungen nötig, denn es war bisher noch kein CMS im Einsatz.

Seit dem 13.10 ist die neue Website nun live (siehe Abb. 1), aber fertig sind wir natürlich noch lange nicht. Es gibt weiterhin einiges an Feinschliff zu tun, dem wir uns nun nach und nach widmen werden, getreu dem Motto: Nach dem Relaunch ist vor dem Relaunch.

Abb. 1: Die neue eResult-Website

Abb. 1: Die neue eResult-Website

Aber wie kam es zu dem heutigen Stand? Welche Methoden und UCD-Aktivitäten haben wir durchgeführt in diesem Projekt? Grob lassen sich dabei folgende Abschnitte identifizieren:

  1. Research mit Wettbewerbsanalyse und Personas
  2. Informationsarchitektur mit Card Sorting
  3. Konzeption mit Workshop und Wireframes
  4. Evaluation mit Experten und Nutzern

Um die ersten beiden Aspekte soll es heute in diesem Artikel gehen. Die beiden weiteren folgen dann im nächsten Beitrag, vermutlich Ende November.

Das visuelle Design und die technische Umsetzung klammere ich bewusst aus, denn diese haben wir nicht selber übernommen. Unser Dank dafür geht an die Agenturen Elbfeuer (Hamburg) und Überblick (Bielefeld).

1. Research mit Wettbewerbsanalyse und Personas

Um zu erkennen, wohin die Reise gehen kann und sich inspirieren zu lassen hilft es häufig, einmal über den Tellerrand hinaus zu gucken. Es ist ungemein interessant, die Konkurrenz zu betrachten und zu analysieren:

  • Was machen sie ähnlich, was machen sie anders?
  • Was funktioniert gut, was weniger gut?
  • Was könnte auch für uns etwas sein?

Für uns von Interesse war dabei vor allem die Informationsarchitektur, speziell die Strukturierung des Leistungsportfolios. Denn diese war auf unserer alten Seite eine Katastrophe und bereitete uns ziemliche Probleme. Auch die Inhalte der Startseite und die Einstiege in das Websiteangebot schauten wir uns näher an. Dabei war es sehr spannend, nicht nur deutsche Websites anzuschauen sondern auch die internationale Konkurrenz zu analysieren. Dort finden sich teilweise komplett andere Ansätze, die uns auf ganz neue Ideen brachten (siehe Abb. 2).

Abb. 2: Website von bunnyfoot.co.uk

Abb. 2: Website von bunnyfoot.co.uk

Bei der Wettbewerbsanalyse geht es natürlich vor allem um die eigene Sichtweise und die Unternehmensziele. Wie wir ja eigentlich am Besten wissen sollten, ist dies aber nur die eine Seite der Medaille. Wenn die Website nicht zu den Nutzern, ihren Bedürfnissen und Zielen passt, dann nützt sie auch dem Unternehmen nichts.

Um Nutzer besser zu verstehen und ihre Eigenheiten für alle Projektbeteiligten zu veranschaulichen sind Personas eine bewährte Methode. Aus diesem Grund wollten wir sie auch in unserem Relaunch-Projekt einsetzen. Personas sind aber immer nur so gut wie die Daten, auf denen sie basieren. Hier zeigte sich dann auch zum ersten Mal, was noch öfter zur Herausforderung werden sollte: Unsere Zielgruppe ist schon ziemlich speziell und lässt sich nicht mal eben so rekrutieren. Eine umfangreiche quantitative und qualitative Erhebung mit Online-Befragung und Einzelinterviews war deshalb nicht realistisch.

Glücklicherweise konnten wir noch auf Daten von einer Onsite-Befragung aus dem Jahr 2009 zurückgreifen. Diese lieferten uns viele wichtige Erkenntnisse zur Nutzerstruktur unserer Website, den Nutzungsintentionen und den Hintergründen unserer Nutzer. Nun muss man mit mehreren Jahre alten Daten natürlich immer sehr vorsichtig sein – wir hinterfragten diese deshalb kritisch und glichen sie mit unseren eigenen Eindrücken ab. Denn hier liegt zum Glück einer unserer Vorteile: Als Dienstleister sind wir doch sehr nah an unseren Kunden. Gerade unsere Kundenbetreuer haben tagtäglich persönlichen Kontakt, so dass sie wertvollen Input für die Personas liefern konnten..

So entstanden aus den quantitativen Daten der Onsite-Befragung und unseren qualitativen Einschätzungen insgesamt 6 Personas – 4 primäre und 2 sekundäre:

  • Manfred Macher: Entscheider (Unternehmen)
  • Sarah Sorgfältig: Entscheidungsvorbereiter (Unternehmen; UX-erfahren):
  • Frauke Forscher: Entscheidungsvorbereiter (Unternehmen; MaFo)
  • Quentin Querkopf: Entscheidungsvorbereiter (Agentur)
  • Stefan Studenheimer: Studenten
  • Doris Dankbar: Jobsuchende

Alle Personas bereiteten wir so auf, wie wir dies auch in Kundenprojekten tun: Mit Namen, Bild, demographischen Daten, Zielen und Herausforderungen sowie den Implikationen für unsere Website (siehe Auszug in Abb. 3).

Abb. 3: Ein Auszug der eResult-Persona Manfred Macher für das User-Centered Design von eresult.de

Abb. 3: Ein Auszug der eResult-Persona Manfred Macher

Informationsarchitektur mit Card Sorting

Die Informationsarchitektur der neuen Website war ein großes und kompliziertes Thema. Wir wussten, dass die alte Seite ziemlich umfangreich ist. Wie umfangreich, nämlich mehrere hundert Einzelseiten, das stellte sich aber erst beim so genannten Content Inventory heraus, bei dem wir alle bestehenden Inhalte erfassten. Dieser Schritt ist sehr wichtig, um nicht im Laufe des Redesigns irgendetwas zu vergessen. Für uns, wie eigentlich für jede Website heutzutage, ist es sehr wichtig, über Google gefunden zu werden. Bei einem Relaunch kann das Ranking nur erhalten bleiben, wenn auch wirklich alle alten URLs ordnungsgemäß weitergeleitet werden. Zudem diente uns das Content Inventory natürlich auch als Basis für die neue Struktur. Ein paar neue Inhalte gab es auch, aber hauptsächlich sollten diese nur umstrukturiert werden.

Klassischerweise führen wir für das Erstellen einer neuen Informationsarchitektur ein Card Sorting mit Nutzern durch, bei dem wir mehr über das mentale Modell der Nutzer erfahren und sich sinnvolle Kategorien für die Inhalte herauskristallisieren. Diese Wunschvorstellung scheiterte aber auch hier wieder an der Problematik der Rekrutierung. Stattdessen versuchten wir, gemeinsam mit einigen Mitarbeitern dem Chaos Herr zu werden. In einem gemeinsamen Workshop führten wir ein expertenbasiertes Card Sorting durch – eine Methode, die auch schon bei Kunden häufiger zum Einsatz kam. Dabei ließen wir auch unsere gesammelten Ideen aus der Wettbewerbsanalyse einfließen. Es stellte sich aber schnell heraus: Die perfekte Lösung hat auch noch niemand anders gefunden und irgendwie ist ja doch wieder jede Website ein bisschen anders.

Nach einigen weiteren Schleifen im Unternehmen kristallisierte sich dann eine Struktur heraus, die wir in einer Sitemap festhielten (siehe Abb. 4). Bitte wundern Sie sich aber nicht: Bei der Live-Website ist noch einmal einiges anders gekommen als es geplant war. Denn für den ersten Schritt hätte die angedachte Struktur zu viel neuen Content erfordert. Deshalb mussten wir später im Projekt noch einmal umdisponieren.

Abb. 4: Die obersten Ebenen der neuen Sitemap von eresult.de

Abb. 4: Die obersten Ebenen der neuen Sitemap von eresult.de

Als einen wichtigen Schritt sehe ich besonders den neu geschaffenen Bereich „UX Wissen“. In diesem finden sich nun alle unsere Studien, Forschungsbeiträge und weitere Informationen rund um die Themen Usability und User Experience. Auf der alten Website waren diese Inhalte noch wesentlich verstreuter und weniger sichtbar. Das Zitat einer Kundin sagt da alles: „Super Benutzerführung, der Bereich UX Wissen ist mir z.B. auf der alten Seite gar nicht aufgefallen.“

Fazit: Perfektes User-Centered Design ist schwer

Auch wenn es ja eigentlich unser Job ist: Den mustergültigen UCD-Prozess konnten wir bei unserem Relaunch nicht verwirklichen. Genau wie häufig bei unseren Kunden scheiterte dieses Vorhaben an den Einschränkungen, die ein Projekt immer hat: Zeit, Budget, schwierige Zielgruppen, interne Meinungen und sicher noch viele weitere.

Wichtig finde ich aber: Wir haben es versucht und zumindest das getan, was möglich war. Denn ein bisschen nutzerzentriert ist immer noch um ein Vielfaches besser als gar nicht nutzerzentriert. Ein paar Ideen, die wir dafür bei unserem Relaunch angewendet haben:

  • Die Konkurrenz analysieren und von ihr lernen
  • Alte Daten sammeln und (mit Vorsicht) nutzen
  • Eindrücke der Nutzer von direkten Kontaktpersonen sammeln (Vertrieb, Support)
  • Zumindest ein paar Nutzer nach kurzem Feedback fragen

Lassen Sie also den Kopf nicht hängen, wenn richtiges UCD unglaublich weit weg erscheint, und fangen Sie an mit den kleinen Dingen.

Ich hoffe, dass dieser kleine Blick hinter die Kulissen interessant für Sie war. Ihr Feedback interessiert mich – zu unserem Vorgehen und auch zu unserer neuen Website. Vielleicht haben Sie ja auch ein paar Tipps und Tricks, die Sie schon in Projekten angewendet haben?

Voraussichtlich Ende November gibt es dann noch den zweiten Teil dieser Reihe. Ich berichte von den weiteren Projektphasen: Der Konzeption inklusive Wireframes und der Evaluation der Entwürfe. Seien Sie gespannt.

Portraitfoto: Jan Pohlmann

Jan Pohlmann

UX Designer

BMW AG

Bisher veröffentlichte Beiträge: 60

3 Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.