Smarter Hub für digitale Markenführung
– UX-Audit und Redesign eines SaaS-basierten Brand Management Systems
Meine Rolle
UX-Designer
Zeitplan
04/2020 – 07/2020
Leistungen
UX Audit
UI Pattern Library
UX Design
wirHub ist ein Brand-Management-System der Markenagentur wirDesign und wird als SaaS in Form einer White-Label-Lösung vertrieben. Es fungiert als zentraler Speicher für alle Informationen und Daten einer Marke und unterstützt Designer und andere Verantwortliche bei der Erstellung markenkonformer Kommunikation.
Das Ziel des Projekts bestand darin, die Usability von wirHub ganzheitlich zu verbessern und eine zukunftsweisende Vision basierend auf Kundenfeedback zu entwickeln. Hierfür wurden analytische und empirische Methoden eingesetzt, um Verbesserungen und neue Features abzuleiten.
Problem Statement
wirHub agiert im BMS-Markt zwischen etablierten Plattformen wie Frontify und Bynder sowie zahlreichen individuellen Lösungen. Wie kann das System seine Marktposition stärken und eine zukunftssichere Roadmap verfolgen, die sowohl bestehenden Stammkunden als auch Neukunden einen Mehrwert im täglichen Umgang mit ihrer Marke bietet?
Prozess
Nutzerzentrierter Workflow im Double-Diamond
Der Ablauf folgte dem nutzerzentrierten Double-Diamond-Prozess. Zunächst wurde durch Interviews ein tiefes Verständnis für den Nutzungskontext und die Bedürfnisse der Stakeholder geschaffen. In Kombination mit einer Marktrecherche und einer Heuristische Evaluation wurden Daten gesammelt und erste Chancen identifiziert. In der nächsten Phase wurden diese Insights konkretisiert.
Ab dem Scheitelpunkt des Double-Diamond wurden Lösungen entwickelt und in einem Prototypen umgesetzt. Abschließend wurden durch Usability-Tests und Iterationen die Entwürfe optimiert.
Marktposition
Nischen zwischen Individualismus und Standards
Brand Experience
Effektivität und Intensität der Anwendung der Marke auf das Whie-Label-System
Workflow
Unterstützung der Benutzer bei der Arbeit mit der Marke (Projektplanung, Austausch usw.)
Integration
Anbindung anderer Anwendungen an das System
Asset Management
Verwaltung von Dateien im System
Analytics
Zugänglichkeit von Daten zur Analyse des Nutzerverhaltens
Sicherheitsstandards
Anpassungsfähigkeit des Systemsetups an Sicherheitsanforderungen
UX Audit
Heuristische Evaluation liefert Grundlage für Verbesserungen
Um grundlegende Usability-Schwachstellen effizient aufzudecken, bot sich eine formative Inspektionsmethode an. Bei einer Heuristischen Evaluation bewertet ein UX-Experte eine Anwendung anhand bestimmter Regeln. Ich wählte dafür die „10 Usability-Heuristiken für das Benutzeroberflächendesign” von Jakob Nielsen aus und konzentrierte mich auf den Bearbeitungsmodus des wirHub. Die einzelnen Module, sogenannte SmartBlocks, wurden nacheinander untersucht und anschließend wurden die Probleme nach ihrem Schweregrad priorisiert.
Missliche Auswahl von Eingabefelder
Im wirHub werden häufig Radio Buttons für Optionenauswahl verwendet. An einigen Stellen wäre jedoch eine andere Komponente wie Checkbox, ein Toggle oder ein Segment Button semantisch passender und effizienter, um z.B. eine Option zu eliminieren.
Keine Pflichtfelder und Validierung von Eingaben
Die meisten SmartBlocks haben keine Pflichtfelder oder Validierungen, wodurch die Überprüfung von Dateiformaten fehlt und leere Module erstellt werden können. Teilweise fehlen auch Default-Werte für Auswahlmöglichkeiten wie Segment-Buttons. Dieses führt im schlimmsten Fall zu einer Fehlerseite. Der User wird nicht darüber informiert, wie dieser Fehler aufgetreten ist und muss seine letzten Bearbeitungsschritte wiederholen.
Kein Feedback zu Systemzustand
Der User erhält nur selten Fehlermeldungen und Feedback zu seinen Aktionen. Idealerweise sollte ein Hinweis z. B. in Form einer Snackbar nach wichtigen Änderungen im System erscheinen und so dem User bei seiner Arbeit Sicherheit geben.
Inkonsequente Gestaltung
Viele UI-Elemente und Interaktionsmuster wiederholen sich im System, weichen jedoch ohne erkennbaren Grund in ihrem Design voneinander ab. Beispielsweise gibt es unterschiedliche Designs für den Download von Anhängen oder verschiedene Icons für dieselbe Funktion. Diese inkonsequente Gestaltung führt zu Verwirrung und erschwert das Erlernen von Abläufen.
Stakeholder-Interviews für echte Nutzerperspektiven
Um wichtige subjektive, qualitative Daten zu sammeln, wurden 13 Interviews mit Personen aus verschiedenen Stakeholdergruppen durchgeführt. Ein Leitfaden mit einem teilstrukturierten und explorativen Teil diente als flexible Grundlage für das Gespräch. Ziel war es, herauszufinden, wie Nutzer mit wirHub arbeiten, sowie ein allgemeines Stimmungsbild abzufragen. Zuletzt wurden auch Zukunftswünsche der Stakeholder erfragt.
Nach dem Modell des Strategic Selling wurden die Stakeholder in Wächter und Anwender unterteilt. "Wächter" sind Personen im Unternehmen des Kunden, die die Anschaffung eines potenziellen BMS bewerten und den Erstkontakt zu wirDesign herstellen. Oft sind sie auch für die Verwaltung des wirHub zuständig und fungieren als direkte Ansprechpartner auf Kundenseite. "Anwender" bezeichnet die User des wirHub und damit die primären Stakeholder. Insgesamt fiel das Feedback sehr positiv aus und zeigte eine große Zufriedenheit.
4 Wächter
9 Anwender
Key-Feedback der Wächter
Es gibt keine Anbindung für eine Bilddatenbank.
Die manuelle Registrierung eines Nutzers durch einen Administrator ist zeitaufwendig und mühsam.
Die Einstellung von Inhalten bedarf einer Schulung, sodass Mitarbeiter / Abteilungen sagen: „Wir haben keine Zeit Inhalte einzustellen.”
Mehr Transparenz bei neuen Features im wirHub.
Redundante Aufgaben sollten automatisiert werden, wie z. B. die Überprüfung von marktkonformer Gestaltung anhand der Gestaltungsregeln.
Key-Feedback der Anwender
Man weiß nicht, ob es seit dem letzten Download ein Asset-Update gab. Wodurch ständig die selben Assets erneut heruntergeladen werden.
Es fehlen personalisierte Inhalte und eine allgemeine Anpassung an die individuellen Bedürfnisse des Nutzers.
Für eine schnelle Contentpflege sollte der Bearbeitungsmodus noch mehr in Echtzeit funktionieren.
Eine Änderungsverlauf zum Rückgängigmachen und Wiederherstellen von Aktionen würde die Contentpflege erleichtern.
Die Anbindung von Tools, smarten Lösungen und Automatisierung / Generatoren sollte weiter verfolgt werden.
Ideation
Brainstorming und Priorisierung neuer Funktionen
In einer Brainstorming-Session wurden aus den kombinierten Erkenntnissen der Marktforschung, Interviews und der heuristischen Evaluation neue Nutzungsanforderungen abgeleitet und in vier Kategorien eingeteilt: Asset-Management, Bearbeitungsmodus, Benutzeransicht und Tools/Prozesse.
Aufgrund der Fülle an Ideen wurden diese nach der MoSCoW-Priorisierung, basierend auf ihrem Nutzen für den wirHub, in die Gruppen "Must have", "Should have" und "Nice to have" sortiert, in enger Abstimmung mit der Product Ownerin des wirHub. Die Ideen aus den Kategorien "Must have" und "Should have" wurden unter Berücksichtigung des Inputs der Entwickler in einer Effort-Impact-Matrix bewertet, um den Nutzen der Funktion für die User sowie die Komplexität und Kosten der Implementierung abzuwägen.
UI Pattern Library
Mit kohärenter UI frühzeitig Usability-Probleme verhindern
Prototyping
Redesign von Navigation bis Markdown-Editor
Vor der Implementierung neuer Features wurden zunächst die Usability-Probleme aus der heuristischen Evaluation behoben. Dabei wurden wichtige Funktionen wie die vierstufige Navigation mit responsiven Breakpoints, der Live-Edit-Modus sowie die Validierung von Texteingaben und Uploads in einem Figma-Prototypen umgesetzt.
Die Angleichung des Designs der einzelnen SmartBlocks war von höchster Priorität, um eine systeminterne Konsistenz sicherzustellen. Dies entspricht der vierten Heuristik von Jakob Nielsen: Beständigkeit und Standards und bildet die notwendige Basis für alle Designanpassungen.
Der Bearbeitungsmodus wird über Toolbars direkt am SmartBlock und einem zusätzlichen Sidepanel gesteuert. Um eine weitgehend Echtzeit-Content-Pflege zu ermöglichen, wurden diese Toolbars erweitert. Ein Beispiel dafür ist der Farbkachel-SmartBlock.
Before
After
Before
After
Registrierung
Im Status Quo des wirHub gab es keinen Registrierungsprozess. Stattdessen wurden neue Accounts von Administratoren angelegt. Der Wunsch nach einem einfacheren Verfahren kam schnell in den Stakeholder-Interviews auf und zwei Wächter ihr Interesse bekundeten.
Der Aufwand verhält sich zum Mehrwert relativ gering und gilt in der Feature-Priorisierung als Quick Win.
Als Administrator möchte ich, dass potenzielle Nutzer ihre Zugangsdaten selbst übermitteln, um viel Zeit und administrative Arbeit zu sparen.
Als Administrator und Brand Manager möchte ich die Kontrolle über zugelassene Accounts meiner Kollegen und Dienstleister behalten, um die unsachgemäße Verwendung der Informationen im wirHub zu unterbinden.
Verlinkungen
In vielen SmartBlocks war es möglich, Verlinkungen über fest implementierte Buttons oder den Markdown-Editor einzufügen. Allerdings war dieser Prozess nicht standardisiert und musste oft mit HTML-Tags durchgeführt werden.
Ein neues Modal wurde eingeführt, das eine einfache Verlinkung zu internen Seiten, Ankerlinks und externen Quellen ermöglicht. Dabei wird das Prinzip des Progressiven Disclosures verwendet, um die individuellen Eingabefelder für jede Option erst nach der Auswahl anzuzeigen.
Als Redakteur möchte ich schnell aus einem SmartBlock heraus eine Verlinkung zu einem beliebigen Element der vier Navigationsebenen oder einem externen Ziel setzen, um die Nutzerführung individuell zu bestimmen.
Analytics
wirHub sammelte im Hintergrund bereits Daten, die bisher kaum genutzt oder visualisiert wurden. Mit geringem Aufwand bot sich die Möglichkeit, die Marktposition des wirHub im Bereich Analytics zu stärken. Das Dashboard ist für Administratoren im Backend sichtbar.
Als Administrator möchte ich sehen, wie oft eine Seite angesehen und sich die Downloads auf der Seite heruntergeladen wurden, um das Verhalten und die Bedürfnisse der Benutzer besser zu verstehen.
Als Administrator möchte ich Nutzerdaten wie Login-Rate, Sitzungsdauer vergleichen können, um das durchschnittliche Benutzerverhalten zu registrieren.
Usability Testing
Validierung ausgewählter Features am Prototypen
Ein Bereich des Tests konzentrierte sich auf das Dateimanagement. Nach dem Verlinken einer Datei aus dem neuen Asset Manager sollten die Datei-Analytics aufgerufen werden. Zwei Teilnehmer konnten diese jedoch nicht erfolgreich finden.
Die Analytics-Daten waren im Bearbeitungsmodal in einem Dropdown-Menü versteckt. Nach dem Test wurde die Analytics-Ansicht in ein eigenes Modal in der Toolbar verschoben.
Insgesamt wurden von jedem Teilnehmer fünf von acht Teilaufgaben korrekt bearbeitet. An einigen Stellen im Prototypen wurden Labels hinzugefügt oder das Wording angepasst.
Before
After
UX-Audit endet und Development beginnt
Neue Funktionalitäten wie ein Asset-Management, eine Registrierung und die hub-interne Analytics wurden erfolgreich implementiert, während die Echtzeit-Bearbeitung vorangetrieben wurde. Diese Neuerungen bieten einen Mehrwert für User und Redakteure, indem sie einen effizienteren Workflow und eine verbesserte Usability bieten.
Obwohl das Projekt endet, ermöglicht der Double-Diamond-Prozess einen fortlaufenden Zyklus aus Verbesserungen und Iterationen.
