- Design Studie der QR-Rechnung App für Shopify
- UX und UI Design
- Durchführen von Studien
Im November 2022 habe ich den Lehrgang als UX Designer begonnen. Dabei ist das Projekt „QR-Rechnung für Shopify“ entstanden.
Über das Projekt
Als ich für einen Kunden einen Shopify Shop aufgesetzt habe, ist mir aufgefallen, dass die verfügbaren QR-Rechnungs Apps im Bereich Integration & Ersteinstellung viel Verbesserungspotenzial haben. Aus diesem Grund habe ich mich, im Rahmen des zweiten Projekts für den UX Lehrgang, entscheiden genau einen Solchen Einrichtungsprozess zu gestalten.
Projekt Zeitraum: Januar 2023 – März 2023
Meine Rolle: UX Researcher & UX Designer
Verantwortlichkeiten:
– Grundlegende Forschung
– Forschungen über Konkurenzprodukten
– Durchführen von Studien
– Erstellen von Konzeptzeichnungen
– Erstellen von Wireframes und Mockups
Das Problem
Um einen QR-Rechnungs Code in das Shopsystem zu integrieren sind einige Einstellungen nötig. Sind diese nicht korrekt oder Fehlen, wird kein oder ein falscher Code angezeigt.
Das Ziel
Eine einfache Shopify-App, welche dem Administrator des Shops die Einrichtung erleichtert und hilft, Fehler zu vermeiden.
Erforschung von Nutzergruppen
Es wurden mehrere Studien erstellt welche halfen, die Zielgruppe zu definieren und die Probleme bestehender Lösungen herauszufinden. Hierbei wurde der potenzielle Nutzer an erster Stelle gesetzt und die Lösung auf die Nutzergruppe zugeschnitten. Dabei ergaben sich vier Hauptthemen.
1
Fehlerhafte eingaben
Oftmals kann kein QR-Rechungs-Code angezeigt werden, weil Details wie Kontonummer oder Adresse fehlen
2
Referenzcode für automatischen Abgleich
Um die Rechnungsbeträge im E-Banking später einer Bestellung zuordnen zu können, wird ein eindeutiger Referenzcode benötigt
3
Integration
Die Integration ist gerade für Administratoren ohne Coding Erfahrung sehr schweirig
Personas
Um sich die künftigen Benutzer besser vorstellen zu können wurden mehrere Personas erstellt. Dies sind fiktionale Personen, welche einen repräsentativen Teil der künftigen Nutzer widerspiegelt.
Für die Personas wurde jeweils eine User Journey Map erstellt. Diese zeigt auf, welche Aktionen und Emotionen während der Nutzung der App auftreten. Auch sind in diesem Schritt bereits erste Optimierungen für den Prozess erkennbar.
Anthony
Hauptziel
Anthony ist Modedesigner und betreibt einen kleinen Shopify Shop in welchem er seine Designs verkauft. Er will seinen Kunden das unkomplizierte Bezahlen per Rechnung anbieten.
- Alter: 41
- Ausbildung: Grundschuhlabschluss
- Wohnort: Zürich
- Familie: Frau mit zwei Kindern
- Berufung: Modedesigner
Ziele
- Er liebt es zu tanzen, insbesondere Tango
- Möchte eine einfache Möglichkeit haben, wie seine Kunden im Shop bezahlen können
- Liebt es Leute mit Kleidern zu transformieren indem er Kleider für sie erstellt
Frustrationen
- „Ich hasse es wenn ich warten muss. Ich bin sehr ungeduldig.“
- „Leute welche keinen Sinn für Mode haben sind für mich schwer zu ertragen.“
- „Ich nutze das Internet so viel wie ich muss, finde aber das es nervt.“
Über Anthony
Anthony ist ein Modedesigner der alten Schule. Er ist in Zürich aufgewachsen und hat sein ganzes Leben lang als Designer gearbeitet. Als junger Erwachsener war er 2 Jahre im Ausland und verbrachte die Zeit in London und New York. Er hatte nie grosses Interesse an moderner Technologie und Internet. Er glaubt an echte Dinge, wie schöne Stoffe und handgemachtes Handwerk. In seiner Freizeit tanzt er gerne Tango und trifft sich mit Freunden. Er betreibt einen kleinen Shopify-Shop, um seine Designs zu verkaufen.
Wireframes
Auf Papier wurden die ersten Entwürfe gemacht. Dabei wurden 8 verschiedene Lösungen für den Hauptbildschirm skizziert. Danach wurden die besten Elemente in einen digitalen Wireframe zusammengebracht.
Sitemap / Information Architecture
Um den Ablauf des Assistenten zu visualisieren und die verschiedenen Seiten zu skizieren wurde eine Sitemap erstellt.
Diese zeigt welche Seiten wie miteinander verknüpft sind. So sind die Grünen Elemente nur nach der Installation der App verfügbar und werden, wenn die Einrichtung abgeschlossen ist, nicht mehr angezeigt.
Digitale Wireframes
In Adobe DX wurden nun digitale Wireframes erstellt. Diese zeigen die Funktion zur Dienständerung. Es wurde ein Prototyp erstellt, welcher von acht Personen aus der Zielgruppe getestet wurde.
Mockup
Die Erkenntnisse aus der Studie zum Wireframe Prototypen wurden bei der Entwicklung des Mockups mit einbezogen.
Ein Mockup enthält das endgültige Look and Feel der App. Dies beinhaltet unter anderem Farben, Typografie und Animationen.
Damit die App wie ein Teil von Shopify wirkt und sich perfekt integriert, wurde das Design System „Polaris“ von Shopify verwendet. In diesem Dokument sind alle Elemente beschrieben wie sie auszusehen und zu verhalten haben.
Dies sorgt nun im fertigen Mockup dafür, das alles wie aus einem Guss wirkt.
Der hier gezeigte Referenz Bildschirm musste für die Mobile Anicht optimiert werden. Insbesondere da bestimmte Funktionen wie „Drag & Drop“ nicht so gut auf dem Smartphone funktionieren würde.
Auch war in der ersten Version geplant, das die einzelnen Einrichtungsbildschirme von unten einfliegen würden. Dies wurde dann aber verworfen um besser in Shopify integriert zu sein.
Mockup – Einstellungen
Der Einstellungsbildschirm ermöglicht die Code-Integration sowie die eingegebenen Daten zu bearbeiten.
Für die Navigation habe ich mich gegen ein Hamburger-Menu für die App auf den Mobilen Geräten entschieden, da es zu Verwirrungen hätte führen können. So wurde aus „Über QR-Rechungen App“ auf dem Desktop nur noch „Über“ auf dem Smartphone.
Um die Integration zusätzlich zu Erleichtern gibt es neben einem geschriebenen Text, auch das ganze als Video zum anschauen.
Erkenntnisse aus den Nutzbarkeitsstudien
Es wurden insgesamt eine Nutzbarkeitsstudie durchgeführt. Die Studie wurde mittels eines Formulars gemacht, welche die Teilnehmer selbstständig ausgefüllt haben. Ziel der Studie war, herauszufinden ob der Einrichtungsassistent funktioniert und nützlich ist.
Die Studien wurden mit jeweils 7 Personen unterschiedlicher Berufungen innerhalb der Zielgruppe durchgeführt.
Studie des Wireframe (Lo-fi) Prototypen
- Die meisten Testpersonen hatten keine Probleme den Assistenten zu nutzen
- Des weiteren hat die nachtäglichen Befragung ergeben, das ein überspringen des Assistenten kein Bedürfnis war.
- 6 von 7 Personen konnten nach der Einrichtung die Einstellungen für die angegebenen Daten finden
- Dies zeigte, das die Beschriftung und Position der Elemente sinnvoll war
- Die Integration war für die meisten Probanden nicht verständlich
- Dieses Problem wurde mit besserer Beschreibung und Erklärvideos behoben
Der finale Prototyp
Der fertige Prototyp wurde als Desktop und Mobile variante entwickelt. Hier die Smartphone Variante zum testen:
Inklusives Design & Zugänglichkeit
Die App wurde stets mit dem Gedanken entwickelt, für möglichst viele unterschiedliche Nutzer zugänglich zu sein, insbesondere für Personen mit Einschränkungen.
1
Durch die Verwendung des Design Systems von Shopify befindet sich der Nutzer bereits in einer Gewohnten Umgebung und findet sich schnell zurecht
2
Der Einrichtungsassistenten hilft neuen Benutzern die App einzurichten. Erfahrene User können diesen Überspringen und alle Daten in den Einstellungen eingeben
3
Erklärvideos helfen bei der Integration in das System und sind so auch für unerfahrenere Benutzer zugänglich
Lernprozess und weitere Schritte
Dies Studie zeigte sehr effektiv, welche auswirkungen sorgfältige Nutzbarkeitsstuden haben. Während der Testphasen wurden wichtige Erkentnisse gemacht, welche die App sichtbar verbesserten. Auch können so schon vor der kostspieligen Entwicklung Funktionen und Konzepte auf ihre effizienz getestet werden.
Nach dieser Studie ist die App bereit, dem Entwickler-Team übergeben zu werden. Nach der Entwicklung wird die App dann in einer Ausgewählten Gruppe von bis zu 10 Personen getestet und nach Fehlerbehebungen und Anpassungen dann der Öffentlichkeit Zugänglich gemacht.
Kontakt und besondere Dank
Ein besonderer Dank geht an die Tester des Prototypen und Unterstützer der Studie.
Bild QR-Code Scanner von storyset – Freepik
Kontakt: Daniel Spycher – dev@dans-art.ch