In diesem Artikel spreche ich über meinen Prozess der Arbeit an einem der umfangreichen Projekte zur Überarbeitung des internen Tools von Probo (wir nennen es Cerebro ) für einen besseren Kundensupport.

Was ist Cerebro?

Cerebro ist eine einzige Quelle der Wahrheit für alles, was mit Probo zu tun hat! Es ist das interne Tool von Probo, das aus mehreren Abschnitten besteht, darunter Inhaltserstellung (zum Erstellen und Übertragen von Inhalten an die App), Tags (Erstellen von Benutzer-Tags und Zuweisen einer Aktion zu diesen Tags), Dashboard und Benutzer.

Der Abschnitt Benutzerdetails ist die Benutzerdatenbank, in der das CX-Team Informationen zu Benutzerbeschwerden überprüfen und auf den Benutzer zurückgreifen kann.

In diesem Artikel sehen Sie sich an, wie wir den Abschnitt mit den Benutzerdetails von Cerebro neu gestaltet haben.

Der Auftrag

Neugestaltung des Abschnitts Benutzerdetails auf Cerebro, um UX und Produktivität für das Kundensupport-Team von Probo zu verbessern.

Das Problem verstehen

Das Support-Team verwendet Cerebro, um die Aktivitäten der Benutzer in der App zu überprüfen.

Für diese Aufgabe habe ich zunächst zentrale Benutzerströme identifiziert und dann darin nach UX-Problemen gesucht:

Während ich mit dem Support-Team saß, um ihre Arbeitsabläufe zu beobachten und Usability-Probleme zu identifizieren, habe ich einige Tickets selbst gelöst. Das war während der IPL-Saison, als wir mehr als 1000 Tickets pro Gemeindevorstand erhielten, daher war ihre Arbeitsbelastung immens.

Zu sehen, dass sie so entschlossen sind, Probo-Benutzern das beste Support-Erlebnis zu bieten, hat mich berührt und mich weiter angespornt, ihre tägliche Erfahrung durch Design zu verbessern.

Identifizierte Kernprobleme:

1. Schlechte Durchsuchbarkeit von Informationen: Die Hauptarbeit der Benutzer besteht darin, Informationen von Cerebro zu erhalten, aber das Durchsuchen der Tabellen erforderte eine Menge kognitiver Anstrengung, da sie sich sehr konzentrieren mussten, um die erforderlichen Informationen auf dem Bildschirm zu finden.
2. Komplexe Navigation: Bei einigen Benutzerflows war die Navigation komplex und verborgen.
3. Erhöhte kognitive Belastung: Das frühere Design entsprach nicht den Gestaltgesetzen der Hierarchie und Nähe, um die kognitive Belastung der Benutzer zu verringern.
   Darüber hinaus mussten sich die Benutzer bei bestimmten Benutzerabläufen Informationen aus einer Tabelle merken und zu einer anderen Tabelle wechseln, um sie zu vergleichen, was die Zeit zum Abschließen einer Aufgabe verlängerte.
4. Die Markenidentität ist nicht angepasst: Das Branding von Probo wurde vor einigen Monaten neu gestaltet, sodass die Neugestaltung von Cerebro die Gelegenheit bot, sich an das neue Branding anzupassen.

Die App und die Website von Probo wurden vor einigen Monaten mit neuem Branding neu gestaltet, es war höchste Zeit, dies auch bei internen Tools zu tun.

Sehen wir uns das Vorher vs. Nachher einiger Seiten an:

Designs – Vorher vs. Nachher

Lassen Sie uns diese Neugestaltungen also einzeln aufschlüsseln.

Vorher vs. Nachher – Designaufschlüsselung

Abschnitt Benutzerzusammenfassung:
Dieser Abschnitt besteht aus den verfügbaren Basisinformationen der Benutzer, die in drei Teile unterteilt sind; ähnliche Informationen werden zusammengehalten.

• Die wichtigsten Informationen werden auf Fronten hervorgehoben, wie z. B. die Details und der Status des Benutzers.
• Aktionspriorisierung: Im alten Design sind drei CTAs ohne Hierarchie für primäre/sekundäre Aktionen vorhanden.
  Außerdem habe ich nach der Analyse erfahren, dass keine davon CTAs oder primäre Aktionen sind und daher nicht offen und konzentriert auf den Bildschirm sein müssen. Aktionsschaltflächen bestehen aus einer Schaltfläche namens „Optionen“.

• Seitliche Navigationsleiste:
  In Bildschirmen mit Datentabellen ist der horizontale Abstand von größter Bedeutung. Daher wurde das Design der seitlichen Navigationsleiste mit Symbolschaltflächen neu gestaltet, die nur minimalen Platz einnehmen.
• Wenn eine Navigationsleiste in voller Größe erforderlich ist, kann der Benutzer auf das Logo klicken und es wird in die Navigationsleiste in voller Größe mit Text+Symbol-Schaltflächen erweitert.
  Ohne ebenfalls zu erweitern, können Benutzer, wenn sie wechseln müssen, den Mauszeiger über Symbole bewegen, um zu sehen, was dies bedeutet:

Aber wie würde das Trennen von Tabs den Datenvergleich zwischen Tabellen in verschiedenen Tabs erleichtern? Wir werden das in einer Weile behandeln!

Tauchen Sie jetzt in einige weitere Details ein:

Optimieren von Datentabellen für eine bessere UX:
Datentabellen haben eine Aufgabe zu erledigen – den Benutzern benötigte Daten schnell bereitzustellen!
Damit diese Aufgabe erledigt werden kann, muss sie schnell durchsuchbar sein , um relevante Informationen zu finden.

Dies sind die Vorher-/Nachher-Designs für die beiden komplexesten Tabellen – Bilanzverlauf und Handelsverlauf

Um das Scannen von Daten einfacher und schneller zu machen, werden im Großen und Ganzen 4 Punkte berücksichtigt:

• Schnelles Scannen zum Auffinden relevanter Informationen – durch Farbcodierung und Hinzufügen von Hierarchie und Nähe zu getrennten Informationen.
• Gruppieren ähnlicher Daten
• Eliminieren von sich wiederholenden Informationen
• Daten zum schnellen Vergleich neu anordnen

Wie hat es funktioniert?

Das Redesign wurde zusammen mit einigen Fehlerkorrekturen für die Entwicklung geplant und durch die Ergebnisse von Usability-Tests wird erwartet, dass es die Produktivität um das Zweifache steigert.

Da sich dies noch in der Entwicklung befindet, ist es derzeit nicht möglich, die endgültige Leistung und die KPIs zu teilen, aber ich werde hier aktualisieren, sobald es live geht.

Was habe ich gelernt?
Die meiste Arbeit, die ich vor diesem Projekt geleistet habe, bezog sich auf das Hinzufügen neuer Designfunktionen zu den Zielseiten der probo-App oder -Website.
Daher war die Arbeit an einem so riesigen Datensatz eine Herausforderung für sich. Ich habe viel darüber gelernt, wie UX ein direktes Ergebnis der Implementierung der Benutzeroberfläche ist.

Auch für Design-Enthusiasten ist hier der Link zu einem Artikel auf der Website der NN-Gruppe, der mir sehr geholfen hat, Datentabellen zu verstehen und zu entwerfen.

Ps. Ich habe auch gelernt, den Designprozess regelmäßig zu dokumentieren, weil ich viel zu lange zum Schreiben dieser Fallstudie gebraucht habe

Was kommt als nächstes?

1. Das Erkunden von Mikrointeraktionen sowie leeren Zuständen, um kleine Freuden zwischen all der Arbeit hinzuzufügen, die derzeit aufgrund von Zeitdruck nicht behandelt wurde.
2. Tastenkombinationen für die Verwendung des Tools erkunden, ab sofort hat jeder im Team MacBooks (Flex 101 ), daher ist es vorerst effizient und einfach, Trackpads zu verwenden.
3. Im Moment ist nur die Neugestaltung des Abschnitts mit den Benutzerdetails abgeschlossen, die nächste Phase sollte die Neugestaltung aller anderen Abschnitte von Cerebro sein.

Ein großes Dankeschön an unser großartiges CX-Team, ich bin während dieses Projekts buchstäblich mindestens fünf Mal am Tag in ihr Zimmer gestürmt, sie haben alle meine Fragen und Zweifel bestmöglich beantwortet, und dies war besonders während der IPL-Saison, der geschäftigsten Zeit des Jahres!

Auch danke an mein großartiges Designteam ❤️ sowie an alle Product Owner, die mir durchweg mit wertvollem Feedback und Vorschlägen geholfen haben.

Danke fürs Lesen! Bis bald mit einer weiteren Fallstudie

Sag Hallo zu Nidhi auf LinkedIn • Instagram • Twitter