Verbesserung eines Content Editors zur Maximierung des Kundennutzens
anybill (www.anybill.de), ein Anbieter digitaler Kassenbons, hat bereits eine Funktion namens "Content Areas" eingeführt, die es B2B-Kunden ermöglicht, anpassbare Werbeflächen auf ihren digitalen Quittungen zu zeigen. Als nächster Produktmeilenstein waren erweiterte Optionen geplant, die es den Vermarktern der Kunden ermöglichen, ihre Content Areas mit größerer Präzision und Flexibilität zu gestalten. Diese Studie beschreibt den iterativen Designprozess, bei dem alle ursprünglichen Anforderungen berücksichtigt wurden und der schließlich dazu führte, dass diese Upselling-Funktion ein klarer Gewinn für Nutzer, Kunden und das SaaS-Unternehmen gleichermaßen war.
Hintergrund
Content Management 1.0 ("CM 1.0"): Kunden können die Inhalte ihrer digitalen Kassenbons innerhalb anybills Portal-Website bearbeiten. Die erste Version des Content Management ("CM 1.0") ermöglicht bereits die Konfiguration (Hochladen einer benutzerdefinierten Bilddatei oder mit Hilfe eines einfachen WYSIWYG-Editors) und die Aktivierung/Deaktivierung auf den Belegen. Weitere Einzelheiten zeigen die folgenden Abbildungen mit Screenshots aus der offiziellen Benutzerdokumentation.
Abbildung 1. CM 1.0: Menü Content Management im Kundenportal: Übersichtstabelle.
Abbildung 2. CM 1.0: Hauptdialog des Inhaltsbereichs.
Abbildung 3. CM 1.0: Dialogfeld des Bildbeschneidungseditors.
Abbildung 4. CM 1.0: Vorschaudialog mit selbstkonfigurierten Inhaltsbereichen auf den jeweiligen Belegarten.
Ziele
Entwicklung einer erweiterten Content-Management-Funktion ("CM 2.0"), die mehr Flexibilität für fortgeschrittene Benutzer von Unternehmenskunden, z. B. Marketingspezialisten, bietet.
Entwicklung einer geeigneten Geschäftslogik, die idealerweise alle Faktoren aus der vorangegangenen Anforderungsanalyse berücksichtigt. Diese Faktoren sind: Filialen, Zeitspanne, Bonart und Position (siehe Abschnitt "Einblicke" unten für weitere Einzelheiten).
Vermeidung, "einfache" Benutzer, die die neuen erweiterten Funktionen nicht benötigen, mit potenziell überwältigenden Möglichkeiten zu verwirren.
Beibehaltung der einfachen und reduzierten Ästhetik des Portals bei, indem Sie die Benutzeroberfläche nicht mit einer Vielzahl von Optionen überfrachten und so komplexe Änderungen der Benutzeroberfläche vermeiden.
Sicherstellung, dass die mentale Belastung der Benutzer durch die zugrunde liegende Geschäftslogik nicht zu hoch ist, und Implementierung eines UX-Designs, das den Aufbau eines angemessenen mentalen Modells unterstützt.
Methode
Formative Usability-Tests, welche die iterative Designschritte begleiten
Interaktive 1:1-Interviews, um jede Art von Input und Feedback zu den Design-Iterationen zu sammeln
Keine vordefinierten Benutzerszenarien oder Aufgaben, sondern unvoreingenommene Simulation des Erstkontakts mit der Benutzeroberfläche, um unvoreingenommenes Feedback zu sammeln
Teilnehmer
n = 12
Unternehmensinterne Fachexperten (KMU; aus Produkt-, Management-, Vertriebs- und Technik-Teams) sowie Neulinge (neue Mitarbeiter, Kollegen aus Nicht-Technik-/Nicht-Produkt-Teams)
Wiederholte Interviews mit ausgewählten KMUs/Neulingen, um detailliertes Feedback zu den Iterationen zu erhalten und ihre UX- und auch geschäftsbezogenen Erwartungen zu diskutieren
Erkenntnisse
CM 2.0 business logic
Die folgende formale Geschäftslogik wurde während des Prozesses entwickelt: "Pro Filiale und Zeitbereich und Bonart kann nur ein Inhaltsbereich aktiv oder vorgeplant sein."
Die einzelnen Faktoren innerhalb dieser Geschäftslogik wurden wie folgt spezifiziert:
Filialen. Einzelne Werbeflächen können in einzelnen Filialen angezeigt werden. Beispiel: Eine Kaffee-Aktion auf Bons der Filiale A, eine Milchshake-Aktion auf Bons der Filiale B.
Zeitbereich. Werbeflächen können in bestimmten Zeitspannen angezeigt werden. Anzeigen können auch vorgeplant werden, d.h. für zukünftige Zeiträume konfiguriert werden. Beispiel: Vorplanung von speziellen Coupon-Anzeigen für die kommende Weihnachtszeit.
Quittungstyp. Es gibt vier Arten der Bonauslieferung (mobile Landing Page, PDF, Bon-E-Mail, App), und die Werbeflächen können individuell pro Typ angezeigt werden. Beispiel: Die mobile Landing Page zeigt eine allgemeine Anzeige, das PDF zeigt einen speziellen Aktionscoupon.
Position. Werbeflächen können an einer von drei Positionen innerhalb des Bons angezeigt werden: obere, mittlere oder untere Position. Pro Bon kann nur eine Werbefläche angezeigt werden, nicht mehrere. Beispiel: Eine Anzeige, die einen Kundenkarten-Coupon enthält, wird oben auf dem Bon angezeigt.
Diese Geschäftslogik wurde im Rahmen der Studie verfeinert und intern validiert und für die Entwicklung sowie die Benutzerdokumentation spezifiziert.
Auswirkungen auf die Benutzeroberfläche: siehe Abbildungen 5 bis 12 unten.
Übersichtstabelle: neue Zeilen "Status" (mit Toggle zum direkten Umschalten der Zustände), "Stores", "Time Range", "Playout Channels" (= Empfangsarten), "Position" eingeführt.
Abbildung 5. CM 2.0: Tabellenübersicht im Menü Content Management.
Haupt-Editor-Dialog: Schaltfläche "Verbesserte Anzeigeoptionen" mit Text-Tooltip hinzugefügt.
Abbildung 6. CM 2.0: Haupteditor-Dialog.
Stepper "Erweiterte Anzeigeoptionen": Speicher: Zuweisung von einem oder mehreren Speichern.
Abbildung 7. CM 2.0: Erweiterte Optionen, Schritt 1 "Stores".
Schrittweite "Erweiterte Anzeigeoptionen": Zeitbereich: Auswahl eines individuellen Zeitbereichs mit der Option "offenes Ende".
Abbildung 8. CM 2.0: Verbesserte Optionen, Schritt 2 "Zeitbereich".
Stepper "Erweiterte Anzeigeoptionen": Playout Channel: Zuweisung eines oder mehrerer Quittungstypen (mobile Website, PDF, E-Mail, App).
Abbildung 9. CM 2.0: Erweiterte Optionen, Schritt 3 "Ausspielkanal" (= Empfangsart)
“Enhanced Display Options” stepper: Position: assignment of either upper, middle, or lower position within the receipt.
Figure 10. CM 2.0: Enhanced options, Step 4 Position”.
Hauptdialog des Editors: Zusammenfassung mit anklickbarer Konfiguration, um schnell Änderungen in einem der vorherigen Schritte vorzunehmen.
Abbildung 11. Zusammenfassung der Benutzerkonfiguration.
Warnmeldung
Dieses Dialogfeld wird angezeigt, wenn der Benutzer eine Konfiguration speichern möchte, die mit einer anderen, bereits vorhandenen Konfiguration kollidiert (d. h. Überschneidungen bei Filiale(n), Zeitbereich und Ausspielkanal). Beispiel: Der Benutzer möchte eine neue Werbefläche in der Filiale A im Februar in allen Ausspielkanälen aktivieren, aber es gibt eine andere aktive Werbefläche, der die Filiale A im Februar für den PDF-Bon zugewiesen ist.
Abbildung 12. CM 2.0: Warnmeldung bei einer Überschneidung.
Schlussfolgerungen
Erfolgreiche Entwicklung von CM 2.0 Geschäftslogik
Die neue CM 2.0-Logik wurde in einem iterativen Designprozess erstellt, verfeinert und (intern) validiert.
Diese neue Logik wurde nahtlos und minimalinvasiv in die bestehende UX implementiert, indem mehr Zeilen in der Übersichtstabelle und nur eine weitere Schaltfläche im Haupteditor eingeführt wurden. Daher sollten eher "unprätentiöse" Benutzer nicht von all den neuen Möglichkeiten überwältigt werden (diese Studie lieferte jedoch keinen "Beweis" dafür, da keine externen Benutzer befragt wurden; siehe auch den Abschnitt "Einschränkungen" weiter unten).
Erfolgreiche und effiziente Iterationen im UI-Design
Das Design der Benutzeroberfläche wurde im Allgemeinen von der ursprünglichen CM 1.0-Version übernommen. Dies galt für fast alle UI-Elemente: Übersichtstabelle, Editor und zugehörige Unterdialoge, interaktive Elemente, allgemeiner Benutzerfluss.
Optimierungen des allgemeinen Benutzerflusses:
Zustandsänderungen können nun direkt in der Übersichtstabelle vorgenommen werden (vgl. Abb. 1, 2 und 5 oben).
Der Vorschaudialog ist nun ein optionaler Schritt, da die Schaltfläche "Speichern" in den Haupteditor verschoben wurde (vgl. Abbildungen 2 und 11).
Positive Nebeneffekte auf das UX-Prozessbewusstsein von Unternehmensseite
Dabei stellte sich heraus, dass die ursprünglich spezifizierten Anforderungen zwar auf den ersten Blick klar und deutlich waren, die konkrete Operationalisierung aber eine "harte Nuss" darstellte. Während des Entwurfsprozesses wurde die Logik Schritt für Schritt mit den Befragten spezifiziert und sie wurden dadurch für die zugrunde liegenden UX- und UI-Herausforderungen sensibilisiert.
Ein positiver Nebeneffekt des Projekts war, dass ein adäquates Verständnis für unvorhersehbare Implikationen des UX-Designs innerhalb der Management-, Vertriebs- und Marketingteams geschaffen wurde.
Einschränkungen
Wie bereits erwähnt, wurden im Rahmen der Studie keine "echten" Nutzer befragt, da die Teilnehmer nicht verfügbar waren und das Projektteam nur begrenzte Kapazitäten für die Rekrutierung hatte. Auch mussten geschäftsbedingte Randbedingungen (z. B. die Projektlaufzeit bis zum geplanten Release) berücksichtigt werden. Durch die Befragung interner Teilnehmer aus verschiedenen Bereichen und mit unterschiedlichem Vorwissen waren die Erkenntnisse dennoch sehr nützlich und umsetzbare UI-Implikationen lieferten die gewünschte Produktverbesserung, die nun eine Schlüsselrolle für das Unternehmen spielt.
Eine Validierung mit Nutzern und Kunden wurde in dieser Studie jedoch nicht durchgeführt. Das Feedback der ersten CM 2.0-Nutzer war jedoch sehr positiv und bestätigte das Projektergebnis, einschließlich der Entscheidungen zur Geschäftslogik und den Auswirkungen auf die Benutzeroberfläche.