Am 4. Semester im Rahmen einer Veranstaltung habe ich die Methode Storyframing gelernt und angewendet. Das Ziel dieser Methode ist es, abstrakte Wireframes greifbarer zu machen, indem sie mit Storyboards (Zeichnungen) kombiniert werden. Dadurch sollen auch fachfremde Personen die Idee und den Sinn besser verstehen können, während die Abstraktionsebene beibehalten wird. Dies ermöglicht eine effektive Kommunikation und Vermittlung von Konzepten und Lösungen.
* Um Datenschutzgründe zu wahren, werden das Logo und der Name des betrachteten Unternehmens verändert, den aktuellen Stand wird durch einfacher Wireframes dargestellt, um keine Verbindung zur tatsächlichen Website herzustellen.
Prozess
1 - Themenauswahl
Für die Anwendung der Methode habe ich das Thema "Backen" ausgesucht. Es dient als Grundlage, um eine Unternehmen oder Marke zu finden, wo die Methode angewendet werden. Nach der Findung ein Unternehmen, habe ich ihre Website analysiert, um Schwachstellen in der Benutzererfahrung zu identifizieren. Dabei werden verschiedene Kriterien wie Navigation, Inhaltsstruktur, Benutzerfreundlichkeit usw. berücksichtigt.
2 - Schwachstellen
Basierend auf der Analyse werden konkrete Schwachstellen formuliert. Die Probleme werden anhand Videos vom aktuellen Stand erläutert. Dazu wird auch User Stories formuliert. Diese helfen dabei, die Herausforderungen und Probleme aus Sicht der Benutzer zu verstehen.
3 - Lösungsvorschläge
Mithilfe der abstrakten Wireframes und Storyboards(Zeichnungen) werden Lösungsvorschläge für die identifizierten Schwachstellen entwickelt. Die Wireframes dienen als Grundlage für die visuelle Darstellung der Lösungsideen. Durch die Kombination mit Storyboards werden die Lösungen in eine kontextbezogene Geschichte eingebettet, um die Benutzererfahrung besser zu vermitteln.
#1 Problemstellung
Landing Page
Es gibt keine richtige Landing Page. Der gleiche Inhalt, der auf der Startseite angezeigt wird, wird auch im Dropdown-Menü des Online-Shops aufgelistet. Außerdem gelangt der Nutzer über dasselbe Menü unter "Produkteübersicht" zurück zur Startseite.
! Der Nutzer erkennt nicht, wie er/sie auf der Seite navigieren kann. Es gibt keine relevante Unterscheidung zwischen der Landing Page und dem Online-Shop.
Userstory
Als Nutzer möchte ich auf eine klar strukturierte Landing Page gelangen,
damit ich schnell und einfach durch der Seite navigieren kann.
Lösungsvorschläge
Mein Vorschlag ist es, eine einfache Landing Page für das Unternehmen zu erstellen, auf der der Nutzer das Hauptmenü klar strukturiert wahrnehmen kann. Es gibt jetzt eine separate Seite nur für den Online-Shop.
Zuallererst werden Informationen über ein Hauptprodukt des Unternehmens präsentiert, um dem Nutzer bei der ersten Begegnung die Marke und ihr Produkt vorzustellen. Darunter sind die neuesten Nachrichten der Marke zu finden.
#2 Problemstellung
Online Shop Darstellung
Die Produktdarstellung auf der Online-Shop-Seite ist unübersichtlich und inkonsistent. Einige Produkte werden direkt mit Preisen angezeigt, während andere auf Unterseiten oder in Kategorien aufgeteilt sind.
! Beim Durchklicken verschiebt sich die Menüleiste, abhängig davon, welche Produkte oder Unterseiten angeklickt werden. Dies kann für den Kunden verwirrend sein.
Userstory
Als Nutzer möchte ich auf einer Onlineshop-Seite eine konsistente Darstellung der Produkte haben,
um effizient durch die angebotenen Produkte navigieren zu können und meine Aufmerksamkeit
nicht durch unerwartete Unterbrechungen abgelenkt zu lassen.
Lösungsvorschläge
Auf der Online-Shop-Seite hat der Nutzer jetzt die Möglichkeit, mithilfe der Sidebar-Navigation einen Überblick über die angebotenen Produkte zu behalten. Nach jedem Klick ist nachvollziehbar, wo sich der Nutzer befindet und um welche Produkte es sich handelt.
Die Darstellung der Produkte ist jetzt konsistent und überschaubar.
#3&4 Problemstellungen
Back Akademie Seite
Die Seminarübersicht auf der Unterseite der Back-Akademie enthält nicht nur Informationen über Seminare. Es wird zunächst eine Vorstellung dessen gegeben, was die Back-Akademie ist, bevor man zur eigentlichen Seminarübersicht gelangt.
! Durch die verschiedenen Unterseiten geht der Zweck der Back-Akademie-Seite etwas verloren. Obwohl dort mehr Potenzial steckt, wird es nicht optimal genutzt.
Rezepte Darstellung
Die Rezeptsuche auf der Unterseite der Menüpunkt Back-Akademie wird durch ein Raster dargestellt. Dabei wird ein Bild des Gerichts verwendet, auf das der Name und weitere Text platziert werden, was die Lesbarkeit beeinträchtigen kann.
! Die Anleitungen von den Rezepten werden altmodisch dargestellt, ohne einen Anreiz zu bieten, dass der Nutzer länger auf der Seite bleibt und die Rezepte tatsächlich ausprobieren möchte
Userstory
Als Hobby-Bäcker möchte ich eine klare Übersicht über die angebotenen Seminare haben,
um mich besser auf sie vorbereiten und meine Backfähigkeiten verbessern zu können.
Lösungsvorschläge
Eine Seite für die Back-Akademie wird mit einer Übersicht über die angebotenen Seminare und auch die nächsten Termine erstellt.
Darunter wird auch eine Sammlung von Rezepten angezeigt, mit Namen, Dauer und Schwierigkeitsgrad.
Userstory
Als Besitzer eines Backofens von dieser Unternehme möchte ich Zugang zu Anwendungen und Verwendungs-Möglichkeiten
haben, um meine Kochfähigkeiten zu verbessern und optimale Ergebnisse zu erzielen.
Lösungsvorschläge
Am Anfang werden die Zutaten angezeigt und anschließend erhält der Nutzer eine schrittweise Anleitung in Form von Videos, um eine bessere Verständlichkeit zu gewährleisten.
Click Dummy - Lösungsvorschläge
Zeichnungen
