wirHub
wirHub ist ein SaaS-Brand-Management-System der Markenagentur wirDesign, das als zentraler Ort für Assets und Guidelines bei der Erstellung markenkonformer Kommunikation unterstützt.
Um die Usability ganzheitlich zu verbessern, wurden Schwachstellen der UI durch eine heuristische Evaluation aufgedeckt und neue Features auf Basis von Stakeholder-Interviews entwickelt. Beides wurde als Figma-Prototyp umgesetzt und neue Userflows damit in kleinen Usability-Tests validiert. Die Ergebnisse wurden anschließend an den Product Owner übergeben und in die Roadmap aufgenommen.
Zeitraum
2022 – 3 Monate
Leistungen
UX Research, Design System, Usability-Testing
Problem statement
wirHub bewegt sich im BMS-Markt zwischen etablierten Plattformen wie Frontify und Bynder. Wie kann das System seine Marktposition stärken und bestehenden Kunden als auch Neukunden einen Mehrwert im täglichen Umgang mit ihrer Marke bietet?
Desk Research
Nischen zwischen Individualismus und Standards
wirHub wird kontinuierlich erweitert, überwiegend auf Kundenwunsch. Um die Marktposition besser zu verstehen, wurden die Hauptfunktionen anderer BMS analysiert. Später können diese Erkenntnisse helfen, neue Features zu planen und ihre Auswirkungen auf die Marktposition zu bewerten. Die Systeme wirHub, Frontify, Brandfolder und Corebook wurden in sechs Schlüsselbereichen verglichen.
Untersuchung Status-Quo
Heuristische Evaluation liefert Grundlage für Verbesserungen
Um grundlegende Usability-Schwachstellen effizient zu identifizieren, nutzte ich eine heuristische Evaluation (formative Inspektionsmethode). Dabei bewertete ich den Bearbeitungsmodus von wirHub anhand von Jakob Nielsens „10 Usability-Heuristiken für das Benutzeroberflächendesign“. Ermittelte Probleme wurden anschließend nach Schweregrad priorisiert.
Missliche Auswahl von Eingabefelder
Inkonsequente Gestaltung
Keine Pflichtfelder und Validierung von Eingaben
Kein Feedback zu Systemzustand
Design System
Mit kohärenter UI frühzeitig Usability-Probleme verhindern
Die heuristische Evaluation deckte wiederkehrende Usability-Schwachstellen auf. Das vorhandene Design System wurde entsprechend optimiert.
Redesign von Navigation bis Markdown-Editor
Durch die kontinuierliche Weiterentwicklung des wirHub, z. B. für die vollständige live Bearbeitung der Inhalte, befanden sich viele Module auf unterschiedlichen Entwicklungsständen. Daher wurden sie angeglichen und mit Best Practices wie Eingabevalidierung ergänzt – orientiert an Nielsens Heuristiken für Konsistenz und Standards.
Before
After
Before
After
Interviews
Stakeholder-Interviews für echte Nutzerperspektiven
Für qualitative Insights wurden 13 Interviews mit verschiedenen Stakeholdergruppen durchgeführt. Ein teilstrukturierter Leitfaden diente als Gesprächsgrundlage, um Nutzungserfahrungen, Stimmungsbilder und Zukunftswünsche zu erfassen.
Die Stakeholder wurden nach dem Strategic-Selling-Modell in „Wächter“ und „Anwender“ unterteilt. Wächter bewerten die Anschaffung und verwalten das System, Anwender nutzen wirHub direkt. Das Feedback war insgesamt sehr positiv und zeigte hohe Zufriedenheit.
Wächter-Feedback
Keine Anbindung für eine Bilddatenbank
Mühsames manuelles Anlegen von Nutzern durch Administratoren
Redaktion bedarf einer Schulung
Mehr Transparenz bei neuen Features im wirHub
Redundante Aufgaben sollten automatisiert werden
Anwender-Feedback
Kein Hinweis zur Aktualität von Assets
Keine personalisierten Inhalte oder Anpassung an individuelle Bedürfnisse
Bearbeitungsmodus nicht in Echtzeit
Zurück und Wiederherstellen von Aktionen für Contentpflege
Anbindung von Tools, smarten Lösungen und Automatisierung / Generatoren
Ideation
Brainstorming und Priorisierung neuer Funktionen
Aus den Erkenntnissen der Marktrecherche, Interviews und der heuristischen Evaluation wurden neue Nutzungsanforderungen abgeleitet und in vier Kategorien eingeteilt: Asset-Management, Bearbeitungsmodus, Benutzeransicht und Tools/Prozesse.
Die Ideen wurden nach der MoSCoW-Methode priorisiert („Must have“, „Should have“, „Nice to have“) und in enger Abstimmung mit der Product Ownerin bewertet. „Must have“ und „Should have“-Funktionen wurden anschließend in einer Effort-Impact-Matrix analysiert, um Nutzen für die User sowie Komplexität und Kosten der Umsetzung abzuwägen.
wirHub muss eine zeitlich effiziente Registrierung neuer Nutzer erlauben.
wirHub muss genug Dateiinformationen bieten, um das gewünschte Asset auszusuchen.
wirHub muss den Nutzer über neue Funktionen informieren.
wirHub muss intuitive Lösungen für unabsichtlich oder falsch ausgeführte Aktionen bieten.
Neuer Prozess für Registrierung
Zuvor wurden neue Accounts ausschließlich von Administratoren angelegt. Die Stakeholder-Interviews zeigten jedoch den Wunsch nach einem einfacheren Registrierungsprozess. Der Aufwand ist gering, der Nutzen hoch – daher wird das Feature als Quick Win priorisiert.
User Stories
Verlinkungen leicht gemacht mit Progressive Disclosure
In vielen Modulen konnten Verlinkungen nur über fest implementierte Buttons oder den Markdown-Editor mittels HTML-Tags eingefügt werden. Ein neues Modal ermöglicht nun einfache Verlinkungen zu internen Seiten, Ankerlinks und externen Quellen. Dabei kommt das Prinzip des Progressiven Disclosures zum Einsatz: Die spezifischen Eingabefelder werden erst nach Auswahl der jeweiligen Option angezeigt.
User Story
Erstmals Analytics für Admins
wirHub sammelte bereits Daten, die bisher kaum genutzt wurden. Mit geringem Aufwand konnte ein Dashboard für Administratoren umgesetzt werden, die Marktposition des wirHub im Bereich Analytics zu stärken.
User Stories
Usability Testing
Validierung ausgewählter Features am Prototypen
Einige neue Funktionen wurden in einem asynchronen, remote Usability-Test getestet. Drei Teilnehmer bearbeiteten sechs Aufgaben im Figma-Prototypen und nutzten dabei das periaktionale „Laut Denken“, um Gedanken und Reaktionen direkt zu teilen. Alle Teilnehmer hatten grundlegende Erfahrung mit dem System. Die Auswertung kombinierte qualitative Daten aus Aussagen und Beobachtungen mit quantitativen Daten zu den Aufgabenbewältigung.
Ein Teil des Test galt dem Dateimanagement: Nach dem Verlinken einer Datei aus dem Asset Manager sollten die Datei-Analytics aufgerufen werden, was zwei Teilnehmer nicht erfolgreich konnten.
Erkenntnisse durch Tests
Eigenes Modal für Datei-Analytics notwenig
Zusätzliche Labels
Wording an gewohntes Repertoire angepassen
Before
After
Projektabgabe im März 2020
Das Projekt wurde am Ende meines dritten Studiensemester fertig gestellt und als Demo erfolgreich präsentiert. (Note 1,0)
