Von der Idee zum Produkt: Prototypen und Kundenfeedback

  1. Prototypen: Vollkommen unvollkommen
  2. Guideline zum MVP
    1. Wireframes
    2. Mock-ups und Prototypen 
  3. Wie gestalte ich einen User-Test?
  4. Feedback sammeln und verarbeiten
    1. 1. Wireframes
  5. Step by Step zum MVP
    1. 2. Design
    2. 3. Prototyp
    3. 4. User-Tests
    4. 5. Feedback nutzen
  6. Things to consider
    1. Tipp
Bestes Hosting für Agenturen & Freelancer

Zu Beginn der Artikelserie haben wir über verschiedene Methoden gesprochen, die dir Aufschluss darüber geben, ob deine Produktidee Erfolg haben könnte. Wir haben Märkte analysiert, uns Gedanken über unsere Zielgruppen gemacht und Feedback von potentiellen Kunden eingeholt. Welche Funktionen und Features muss unser Minimal Valuable Product (MVP) bieten, um beim Kunden einen Mehrwert darzustellen für den er bereit ist, auch Geld zu bezahlen? Wir sind uns sicher, dass das Produkt einen Markt hat, ein Problem beim Kunden löst oder für ihn eine grundlegende Arbeitserleichterung erwirkt. Nun geht es für dein Produkt in die nächste Phase: die Entwicklung. 

Schreibtisch mit PC, Laptop und Zeichnungen

Prototypen: Vollkommen unvollkommen

Wirf deinen Perfektionismus über Bord und mach dich frei von ausgeklügelten Formulierungen, pixelgenauen Oberflächen und vollständig optimierten Abläufen. Dein Produkt wird auf dem Feedback der Kunden gebaut und das willst du erst einmal einholen. Du hast natürlich das große Ganze im Kopf und möchtest möglichst das komplette Paket abliefern, aber das benötigt Zeit und vor allem benötigst du Rückmeldungen von deinen Kunden. Damit du dein Produkt auf schnellstem Wege mit Kunden testen kannst, solltest du zuerst an einem MVP arbeiten und dir einen Prototypen erstellen. Dabei möchtest du keine Zeit mit Gedanken an Details verschwenden, sondern das Konzept bzw. die grundlegende Idee deines Produkts überprüfen. Im Internet gibt es keinen „fertigen Zustand“, so dass du ständig am Ball bleiben musst und das nächste Feature im Hinterkopf hast. Digitale Produkte, Websites, Shops, Apps und andere Produkte im Internet müssen stetig aktuell gehalten und weiterentwickelt werden. Ganz gleich, ob es sich dabei um ein neues Feature, die Beseitigung einer Sicherheitslücke oder die Anpassung an neue Standards handelt (z. B. Schnittstellenformat für Warenwirtschaften). Dein Ziel sollte es also sein, dass du möglichst schnell eine erste Version von deinem Produkt mit deinem Kunden testest und die Rückmeldungen dafür verwendest das Produkt zu verbessern um darauf aufbauend eine neue, bessere Version anzufertigen. Prinzipiell wiederholst du daraufhin diesen Prozess.

Guideline zum MVP

Beim Erstellen digitaler Produkte gibt es einige hilfreiche Tools, die dir dabei helfen können, deine Vision schnell umzusetzen. Du kannst Tools wie Figma, Adobe XD und Balsamiq einsetzen um Wireframes oder Klick-Dummies von deinem Produkt zu erstellen − ohne massig Zeit und Geld in die Entwicklung stecken zu müssen.

Tablett mit Mock-ups
Photo by Visual Design on Unsplash

Wireframes

Wireframes bilden deine Idee auf konzeptioneller Basis ab. Die Funktionen und die Gestaltung der angedachten Komponenten finden hier noch keine Anwendung. Es geht viel mehr darum, dass du die Anordnung der Elemente und den Flow der Website darstellst, um das User Experience (UX)-Konzept, die Benutzerführung und das große Ganze zu validieren. Farben, Typographie und Details bleiben hier noch außen vor.

Mock-ups und Prototypen 

Mock-ups und Prototypen setzen auf deinen erstellten Wireframes auf und erweitern dein Konzept um ein Design, das häufig dem Look des fertigen Produkts sehr ähnelt. Je nachdem, wie viel Zeit du in diese Mock-ups steckst, beinhalten diese schon finale Typographie, Farbkombinationen und Bilder, so dass diese kaum vom späteren Produkt zu unterscheiden sind. Bei Mittwald setzen unsere UX-Experten die Software Figma ein. Damit werden die Oberflächen und Klick-Dummies für unsere User-Tests angefertigt. Es ist schon immens, was man mit den Tools, die heutzutage zur Verfügung stehen, umsetzen kann und wie sehr diese den Aufwand erleichtern. Auf sehr kostengünstige Weise lassen sich tolle Ergebnisse kreieren und neu modellieren − in kurzer Zeit, flexibel und ohne Entwicklungszeit!

Wie gestalte ich einen User-Test?

Die Ausgestaltung deines User-Tests hängt sicherlich stark von deinem Produkt ab und lässt sich schlecht pauschal beantworten. Aus diesem Grund berichte ich euch davon, wie so ein Test bei Mittwald abläuft. Vielleicht kannst du den ein oder anderen Tipp aufschnappen.

 

Im Rahmen der Neuentwicklung des Kundencenters haben wir viele Teilbereiche zu testen. Das lässt sich nicht in einem Test abhandeln. Aus diesem Grund haben wir seit einem Jahr kontinuierlich Konzepte, Komponenten und Oberflächen getestet. Darunter wurden die Bereiche E-Mail, Softwaremanager, Profilverwaltung und Konstrukte wie „Organisationen“  behandelt. Anfänglich haben wir unser Hauptaugenmerk auf Klickwege und Bedienung der Oberflächen gelegt. Auffälligkeiten wurden notiert und in unser Konzept mit eingearbeitet. Darauf aufbauend folgten dann Tests, in denen spezielle Konzepte getestet wurden. 

Finden die Anpassungen den gewünschten Anklang? Fehlt dem Kunden noch ein Feature oder eine Funktion, um den Arbeitsalltag leichter zu gestalten? 

Für die Testreihen haben wir uns Nutzer aus unterschiedlichen Zielgruppen eingeladen. Damit möchten wir sicherstellen, dass das Produkt von allen verstanden wird und wir möglichst viele unterschiedliche Blickwinkel einfangen. Pro Tester werden dann zwischen 30 und 60 Minuten für die Bearbeitung der Aufgaben eingeplant. Die Aufgaben sind so gewählt, dass die Oberflächen, das Wording und das grundlegende Konzept auf Herz und Nieren geprüft werden. Wir setzen dafür Zoom ein. So können wir uns so mit dem Kunden direkt austauschen und abklopfen, was beim Testen in seinem Kopf vorgeht. Zugleich können wir seinen geteilten Bildschirm sehen und durch seine Mausbewegungen Schlüsse über die Effektivität der User Experience ziehen. 
Wo hat das Bedienungskonzept seine Macken? Passt das Wording und erfüllen die Icons ihren Zweck oder stiften sie nur Verwirrung? 

Die Aufgaben sind so gewählt, dass die Oberflächen, das Wording und das grundlegende Konzept auf Herz und Nieren geprüft werden.

Getestet wurde anfangs mit klickbaren Prototypen, die wir im Figma erstellt haben. Oftmals haben wir unterschiedliche Variationen erstellt und diese mit dem Kunden durchgetestet. Ich finde es immer spannend, wie unterschiedlich jeder Mensch mit neuen Oberflächen umgeht und unseren gedachten Nutzerfluss für sich interpretiert. Für uns wird es mit der Zeit schwer, objektiv auf unsere Oberflächen zu schauen, da wir jeden Tag daran arbeiten und das Bedienungskonzept in unseren Köpfen entstanden ist. Daher sind wir auf die Meinung externer Tester angewiesen. Denn wir entwickeln das Produkt für Menschen, die täglich damit arbeiten.

Feedback sammeln und verarbeiten

Wir erheben Feedback über verschiedene Kanäle. Während der User-Tests können wir das Verhalten der Tester interpretieren und im Dialog erfragen, wie sie sich fühlen, was sie denken und diese Ergebnisse festhalten. Das sind wichtige Hinweise für die wir anschließend Lösungen finden. Diese Art des Testens ist sehr zeitaufwändig − sowohl für den Tester und auch für uns. Wir begleiten den Kunden, schauen ihm zu und sind demnach durch die Personenzahl eingeschränkt. Mit fortlaufendem Entwicklungsstand und bereits fertig gestellten Modulen, konnten wir einen Beta Stand deployen und an ausgewählte Kunden herausgeben. In diesem Release besteht die Möglichkeit Feedback zu einzelnen Modulen zu geben. Unterschieden wird dabei in:
 

  • Feedback
  • Bug

Diese Rückmeldungen werden bei uns zentral gesammelt und in regelmäßigen Abständen zusammengefasst und kategorisiert. Einige Rückmeldungen doppeln sich oder sind bereits auf unserer Agenda − für uns ein Zeichen, dass wir auf dem richtigen Weg sind. Stark abweichendes Feedback muss evaluiert werden. 

 

Bei einem Webshop möchtest du den Kunden zum Kauf bewegen und möglichst hohe Abschlussraten erzielen. Es wäre doch schade, wenn deine Kunden unzählige Produkte im Warenkorb platzieren, aber im Endeffekt den Weg zur Kasse nicht finden. Für User-Tests, bei denen du nicht immer mit draufschauen kannst, hilft dir eine Heatmap. Du kannst zum Beispiel die Software „Hotjar“ verwenden, die das Mausverhalten des Kunden analysiert und grafisch aufbereitet, in welchen Bereichen sich der Kunde hauptsächlich aufhält. Damit kannst du identifizieren, ob deine Buttons gut sichtbar platziert sind und dein Layout zielführend gestaltet ist. 

Step by Step zum MVP

Fünf Schritte zu deinem MVP:

1. Wireframes

Verschaffe dir einen Überblick über die Kernfunktionen deines Produkts und halte diese in detaillierten Wireframes fest. Je nach Detail- und Vollständigkeitsgrad hilft dir das später einzuschätzen, wie aufwändig der Entwicklungsaufwand der Komponenten und Funktionen ausfällt. Ein geeignetes Tool dafür ist Balsamiq. Auch Miro bietet Möglichkeiten zum Wireframing.

2. Design

Mach dir Gedanken zum groben Layout und Design deines Produkts. Wenn du einen Webshop aufbauen möchtest, solltest du dir eine Idee zur Struktur und zum Design gemacht haben, bevor du mit der Entwicklung beginnst.

3. Prototyp

Erstell dir in Figma, Adobe XD oder einem Tool deiner Wahl einen Klick-Dummy, den du mit deinem Kunden ausgiebig testen kannst.

4. User-Tests

Organisiere deine User-Tests mit Zielgruppen, bei denen dir das Feedback einen Mehrwert bietet. Stelle sicher, dass du die Ergebnisse dokumentierst. Achte darauf, ob die Kunden mit der Bedienung zurechtkommen und dem angedachten Nutzerfluss folgen können. Wenn wichtige Komponenten übersehen werden, Buttons im Design untergehen oder Funktionen vergeblich gesucht werden, solltest du hier im Anschluss ansetzen.

5. Feedback nutzen

Das gewonnene Feedback gibt dir Anhaltspunkte, ob du dich auf einem guten Weg befindest und an welchen Stellen du nachbessern musst. Nutze diese Rückmeldungen und bedenke sie für deine nächste Iteration.

Webdesigner bei der Arbeit

Things to consider

Ich möchte zum Timing und zur Erwartungshaltung von Kunden noch ein paar Gedanken teilen. Wenn du ein ganz neues Produkt auf den Markt bringen möchtest, ist es sehr ratsam, möglichst schnell mit dem Kunden in den Austauschzu gehen. Du reduzierst das Risiko, einen falschen Weg einzuschlagenund beugst der Gefahr vor, dass dein Produkt floppt. Es ist dennoch zu bedenken, dass du mit Ankündigung deines Produkts und Vorstellung eines Prototypen eine Erwartungshaltung weckst.

Je nachdem, wann du das Produkt am Markt platzieren möchtest, solltest du nicht zu früh für eine zu hohe Erwartungshaltung sorgen. Die großen Firmen machen es vor. Apple kündigt ein neues Produkt an, stellt es dann vor und wenige Wochen später ist dieses auch am Markt erhältlich. Zwischen Ankündigung und Release liegen nur wenige Wochen bis Monate. Wenn die Spanne zwischen Vorstellung und Marktrelease zu groß ist, solltest du mit der PR warten. Es kann herausfordernd sein, das richtige Maß zwischen Transparenz im Fortschritt beim Entwicklungsprozess und realistischer Erwartungshaltung zum Release zu finden. Das gleiche gilt für die Zeit nach dem ersten Test. Du musst am Ball bleiben und die nächste, verbesserte Version in absehbarer Zeit veröffentlichen, damit der Kunde nicht das Interesse verliert.

 

Im nächsten und letzten Beitrag der Serie beschäftigen uns damit, wie du dein Produkt weiterentwickeln kannst.

Tipp

Mit dem Agentur-Server stellst du deine Projekte auf eine rasend schnelle, äußerst performante und sichere Basis. Dazu profitierst du vom Knowhow unserer Experten im Kundenservice. Und das Beste: Bis zum Go-Live kannst du komplett kostenlos entwickeln - mit allen Tools und voll aufgedrehter Performance. Dem Erfolg deines Projekts steht nichts mehr im Weg! 

Ähnliche Artikel:

Kommentare

  1. Gravatar
    Drops46 am
    Schöner Beitrag. Wir nutzen eine Kundenfeedback Software auch um wertvolle Meinung und neue Impulse zu kriegen.
    Antworten
  2. Gravatar
    Kai Zacher am
    Viele guten Tipps dabei, gerade Hotjar nutzen wir in der Praxis auch gerne oft!
    Antworten

Kommentar hinzufügen

    Weitere Informationen zum Datenschutz findest du hier.