SaaS-Applikation für die Darstellung von 360°-Umfrageergebnissen und Handlungsempfehlungen.
Tools: Figma
Rolle: UX und UI Designer
Firma: Questback GmbH
Zeitraum: September 2019 – Februar 2020

Das Problem
Die Firma Questback möchte nicht nur Umfrageergebnisse übersichtlich darstellen. Den Kunden sollen zudem Handlungsempfehlungen zur Behebung der gefundenen Probleme angeboten werden.
Die bisherige Darstellung von 360°-Umfrageergebnissen wies folgende Mängel auf:
In User-Tests hatte sich gezeigt, dass
- die weißen Kacheln auf der initialen Ansicht (Abb. 1) als klickbar wahrgenommen werden, obwohl sie es nicht sind.
- nicht klar ist welche Aktion der Button “How can I improve” ausführt (müsste eigentlich ein Link sein, Benennung problematisch)
- unklar ist, dass die hellblauen Kacheln auf Abb. 2 anklickbar sind und was die Zahlen darin bedeuten
- im Balkendiagramm nicht klar ist, wo die Eigenbewertung dargestellt wird
- der grüne Kreis mit dem Plus-Zeichen als Button wahrgenommen wird und die Bedeutung unklar ist.
- der Pfeil rechts zum ausklappen der Kategorien übersehen wird.
- unter Comments “Start”, “Continue” usw. nicht als klickbar empfunden wird.
- die Questions–View sehr unübersichtlich ist.
- das Design als unprofessionell wahrgenommen wird.
Barrierefreiheit: Einige Informationen wurden nur beim “Hovern” (mit der Maus darüber “schweben”) angezeigt und konnten so von Nutzern ohne Maus nicht gesehen werden. (blaues Info-Icon (Abb 2) das eine Legende für die verwendeten Symbole enthält, Diagramm-Icon und die Verteilung der Antworten)
Schwächen im responsiven Design: Da das Design nur für Desktop konzipiert wurde, war die Darstellung auf anderen Bildschirmgrößen nicht optimal.
Das Ziel
In erster Linie galt es die aufgetretenen Usability-Probleme gestalterisch zu beheben, um die User Experience zu verbessern. Die für „Dashboard“ geschaffenen Design-Komponenten sollen außerdem weiterverwendet werden, um eine konsistente Corporate Identity zu schaffen (Die „Dashbo“ Case Study findest du hier). Da einige Kunden der Firma Questback große Konzerne sind lag ein weiteres Ziel in einer barrierefreien Gestaltung.
Die Herangehensweise
Zuerst überlegte ich wie ich die Design-Komponenten von „Dashboard“ auf das 360°-Umfrage-Szenario anwenden kann. Diese Umfragen unterscheiden sich von normalen dadurch, dass es verschiedene Bewertungsgruppen und eine Eigenbewertung gibt. Es sind also entsprechende Filtermöglichkeiten nötig. Als zusätzliche Transferleistung werden die Ergebnisse je nach Diskrepanz von Eigen- und Fremdbewertung kategorisiert:
- Eigenbewertung entspricht Fremdbewertung: bewusste Stärke oder Schwäche
- Eigenbewertung widerspricht Fremdbewertung: unbewusste Stärke oder Schwäche
Iterativer Design-Prozess
Der Einstieg
Ich entwickelte zunächst einige Ideen wie man den Einstieg gestalten könnte:
All diese Vorschläge sind für einen ersten Einstieg zu komplex. Sie stellen zu viele Informationen auf einmal dar. Die auf Abbildung 4 und 5 verwendeten Icon-Legenden erschweren die Erfassung der Informationen statt sie zu erleichtern.
Da diese Entwürfe zu viele Informationen auf einmal darstellen, entschied ich mich einen konkreten Einstiegspunkt zu schaffen:
Hier hat man zwei klare Einstiegspunkte: Über die Stärken oder die Schwächen.
Ansicht für Stärken und Schwächen
Dann erfolgt die Unterscheiden zwischen bewussten und unbewussten Stärken oder Schwächen.
Ein kurzer Pre-Test zeigte allerdings, dass Erklärungen für “Obvious” und “Hidden” Strengths benötigt werden. Zudem sorgen die Positionierung der Legende “Self perception” für Verwirrung.
Außerdem besteht die Möglichkeit nach Bewertungsgruppen zu filtern. Hier habe ich mich für segmentierte Buttons entschieden. Diese bieten den Vorteil, dass alle Filteroptionen jederzeit sichtbar sind und keinen Content verdecken (wie beispielsweise durch ein Dropdowns) (https://uxmovement.com/buttons/why-segmented-buttons-are-better-filters-than-dropdowns/)
Mit Klick auf eine Kategorie gelangt man zur Fragenansicht:
Die ähnelt stark der „Dashboard“-Ansicht. Man hat hier allerdings wieder die Möglichkeit nach Bewertungsgruppen zu filtern. Zudem hatte sich beim Pre-Test gezeigt, dass die Angabe des Gesamtrating noch gewünscht war. Dies habe ich oben rechts positioniert.
Kommentaransicht
Die Kommentare sind ebenfalls nach Bewertungsgruppen filterbar:
Das Ergebnis
Den klickbaren Prototypen findest du hier.
Usability-Evaluierung
Ich habe die Designs mithilfe von selbstdurchgeführten Inhouse-Usability-Tests evaluiert. Als Testpersonen habe ich Kollegen gewählt, die noch nicht mit 360°-Umfragen in Berührung gekommen sind.
Das Szenario
„Du bist Manager der IT Abteilung. Du hast heute von der HR Abteilung eine Email bekommen. Darin steht, dass deine Firma ein Tool gekauft hat, womit jeder Mitarbeiter eine Umfrage über sich selbst durchführen kann. Du kannst diese von verschiedenen Gruppen; deinen Mitarbeitern, Kollegen und deinen Vorgesetzten durchführen lassen.
Anschließend hast du eine Umfrage gestartet, die Fragen mit Bewertungsskalen zu 7 verschiedenen Kategorien und drei offene Fragen enthält. Die Kategorien sind bezogen auf deine Kompetenzen als Führungskraft. Du hast die Umfrage an Personen, die du selbst ausgewählt hast geschickt.
Zusätzlich hast du dich selbst bewertet mit dem Ziel deine Selbstwahrnehmung zu erfassen.
Eine Woche später erhältst du einen Link zu den Ergebnissen. Du möchtest herausfinden, wie dein Ergebnis ist.“
Test-Ergebnisse und Lösungsvorschläge
Ich habe die gefundenen Probleme nach Schweregrad beurteilt. Zwei der gefundenen Probleme würde ich als kritisch bezeichnen. Das heißt, dass sie die vollständige Bearbeitung der Aufgabe verhindern.
Diese sind:
- Bedeutung “hidden” und “obvious” in Bezug auf Stärken und Schwächen unklar.
- Zusammensetzung des Gesamtratings auf der Heatmap unklar
zu 1. Um diese Problematik zu lösen muss man andere Formulierungen finden. Ich habe mich entschieden die Überschriften in “Strengths you are aware of” und “Strengths you are not aware of” ändern. So kann man sich die Erklärtext sparen. Zumal auch moniert wurde, dass es auf dem Screen an Übersichtlichkeit hapert.
zu 2. Es muss gestalterisch klar werden, dass die Eigenbewertung nicht in die Gesamtbewertung miteinfließt. Daher habe ich die Selbsteinschätzung ganz nach rechts verschoben und durch einen größeren Abstand abgegrenzt. Da zudem nicht eindeutig war, was links dargestellt wird, habe ich die Überschrift “Categories” ergänzt.
Geringe Fehler verärgern Nutzer, behindern aber nicht die Erfüllung der Aufgabe.
So war nicht klar, was sich hinter “Resources” verbirgt. Ich habe mich entschieden sie in “Articles” umzubenennen.
Nächste Schritte
Da vielen Probanden nicht klar war, was Actions sind, wird eine Führung durchs Programm benötigt.