Verzichten Sie auf MVPs, übernehmen Sie Minimum Viable Prototypes (MVPr)

Das Streben nach Perfektion ist eine subtile Falle, die Designer oft in eine Endlosschleife von Iterationen und Überprüfungen führt. Dies gilt insbesondere in der Welt der digitalen Produkte, wo jede Interaktion und jedes grafische Element zu einem Objekt der Designbesessenheit werden kann.

Aber wenn wir einen Schritt zurücktreten und die interdisziplinäre Natur des digitalen Produktdesigns betrachten, ist es leicht zu erkennen, wie Designer in die Perfektionsfalle tappen.

Denken Sie an all die Personen und Rollen, die am Design eines einzelnen digitalen Produkts beteiligt sind:

• Designforscher
• UI-Designer
• Informationsarchitekten
• UX-Designer
• Produktdesigner
• Produktmanager
• Content-Strategen
• Markenexperten
• UX Copy Writer
• usw.

Auf die eine oder andere Weise überschneidet sich jedes dieser Elemente. Beispielsweise kann die Benutzeroberfläche eines Produkts unmöglich erfolgreich sein, wenn die Benutzererfahrung nicht berücksichtigt wird. Mit der Vernetzung entsteht der Druck, zu verstehen, wie Designentscheidungen sich gegenseitig beeinflussen: „Wenn wir X tun, wie wirkt sich das auf Y und Z aus?“

Diese Art der strategischen Prognose kann wertvoll sein, aber auch dazu führen, dass der Designprozess stagniert und in der gefürchteten Perfektionsschleife stecken bleibt: „Wir müssen X richtig machen, bevor wir Y und Z ausführen können.“

Also, was ist die Alternative? Gibt es eine Möglichkeit, digitale Produkte basierend auf realen Messwerten und Erkenntnissen von echten Menschen schnell zu erstellen, zu starten, zu testen und zu verbessern?

In diesem Leitfaden werden wir diese Fragen durch die Linse von minimal realisierbaren Prototypen angehen und Designer mit einem erstaunlich einfachen Prozess zum Erstellen, Testen und Verfeinern digitaler Produkte ausstatten.

Simulieren Sie den Start mit einem Minimum Viable Prototype

Niemand weiß irgendetwas...... Nicht eine Person in der gesamten Filmbranche weiß mit Sicherheit, was funktionieren wird. Jedes Mal ist es eine Vermutung und, wenn Sie Glück haben, eine fundierte. – William Goldman, Oscar-prämierter Drehbuchautor

Die frühesten Entscheidungen des digitalen Produktdesignprozesses basieren bestenfalls auf Vermutungen. Bis ein Produkt in den Händen der tatsächlichen Nutzer ist, ist alles Theorie. Andererseits kann die Einführung eines Produkts, bevor es fertig ist, seinem Ruf schaden (ein kostspieliger Fehler).

Was wäre, wenn es eine Möglichkeit gäbe, die Markteinführung zu simulieren und die Lebensfähigkeit eines Produkts zu bestimmen, lange bevor größere Designanstrengungen beginnen?

Dies ist der Wert des Minimum Viable Prototype (MVPr), eines Produktdesignansatzes, der wesentlich weniger Zeit und Geld erfordert als das bekanntere „Minimum Viable Product“.

Hier ist ein Überblick über den Designprozess des Minimum Viable Prototype (MVPr):

1. Entdeckung
2. Forschung
3. Informationsarchitektur
4. Visuelle Gestaltung
5. Starten
6. Prüfen

Warte ab! Ist das nicht der Prozess, den jeder verwendet?

Ja, und wir werden sehen, dass wir erfolgreich sein können, wenn wir uns auf das Wesentliche der obigen Schritte verlassen.

• Simulieren Sie die Funktionalität eines realen Produkts;
• Imitieren Sie die Markteinführung eines echten Produkts; und
• Finden Sie heraus, ob es sich lohnt, ein echtes Produkt zu bauen.

Schritt für Schritt: So erstellen Sie einen MVPR

1. Entdeckung: Fangen Sie an, Entscheidungen zu treffen

Eine gute Möglichkeit, den Entdeckungsprozess zu starten, besteht darin, Websites, Blogs und Apps zu durchsuchen, die Ihrer Idee ähnlich sind. Erfahren Sie mehr über ihre Geschichte, ihre Zielmärkte, ihre Arbeitsweise usw. Wenn Sie feststellen, dass keiner der relevanten Wettbewerber das tut, was Ihr Prototyp tut, machen Sie weiter.

Dieser Schritt erfordert keine Fachkenntnisse. Das Geheimnis liegt im Handeln – von der Absicht zur Tat.

Achten Sie besonders auf die Stärken und Schwächen Ihrer Mitbewerber. Wie können Sie das, was sie bereits erreicht haben (oder nicht erreicht haben), nutzen, um Ihren Prototyp stärker zu machen?

Nach 1-2 Stunden Recherche sollten Sie in der Lage sein, Ihre wichtigsten Konkurrenten zu lokalisieren und die wichtigsten Aspekte von jedem zu lernen.

2. Recherche: Definieren Sie Ihre Benutzer

Wer ist Ihr Zielbenutzer und warum sollte er sich für Ihr Produkt interessieren? Dies zu verstehen ist entscheidend, aber wir müssen mit kalkulierten Annahmen beginnen. Es ist am besten, von einer stark eigensinnigen Vision auszugehen. Zweifle nicht und versuche nicht, „etwas für jeden“ zu machen. Wir wollen kein verwässertes Design.

Schauen Sie sich stattdessen die während der Entdeckungsphase gefundenen Konkurrenzseiten genauer an und lassen Sie Ihren gesunden Menschenverstand ein Porträt Ihrer potenziellen Nutzer zeichnen.

Hier sind einige praktische Untersuchungsbereiche, die im Internet leicht zugänglich sind:

• Besuchen Sie Bewertungsseiten und sehen Sie, was die Leute über ihre Erfahrungen mit Ihren Mitbewerbern sagen.
• Folgen Sie Influencern aus der Branche Ihres Produkts in den sozialen Medien und beobachten Sie, wie sie ihr Publikum ansprechen.
• Suchen Sie nach seriösen Nachrichtenartikeln, die einen detaillierten Einblick in die Arbeitsweise Ihrer Konkurrenten geben.
• Sehen Sie sich die Interaktionen Ihrer Konkurrenten mit ihren Nutzern in den sozialen Medien an.
• Sehen Sie nach, ob Sie Foren finden können, in denen die Probleme oder Probleme Ihrer Konkurrenten diskutiert werden.

Wertvolle Erkenntnisse können aus jedem dieser Wege ohne erhebliche finanzielle Investitionen gewonnen werden. Dies ist besonders wichtig für kleine Designteams, die mit knappen Budgets arbeiten. Große Marken geben viel Geld für Forschung aus, aber kleine Teams und einzelne Freiberufler müssen Wege finden, um einfallsreicher zu sein.

3. Informationsarchitektur: Strukturieren Sie Ihren Prototyp

Wie wird der Prototyp funktionieren und was sind die wichtigsten Informationen, auf die man sich konzentrieren sollte?

Der einfachste Weg, mit der Beantwortung dieser Frage zu beginnen, besteht darin, erstklassige Websites zu analysieren, die dem von Ihnen erstellten Prototyp ähneln. Das Gesamtbild und die Erfahrung der Website, auf die Sie verweisen, sollte hervorragend sein.

Beginnen Sie damit, die Website in Stücke zu zerlegen. Was sind alle relevanten Seiten und wie sind sie visuell aufgebaut? Scheuen Sie sich nicht, die Wireframe-Site umzukehren und sie dann mit Ihren eigenen Informationen, Farben, Bildern usw. neu zu erstellen.

Warum so vorgehen? Ihre Website wird wahrscheinlich ähnlich funktionieren wie die Websites von Mitbewerbern – Sie haben nur andere Ziele im Sinn. Es ist nicht erforderlich, ein komplexes System zu erfinden, wenn Benutzer gut auf eine etablierte Erfahrung reagieren.

*Profi-Tipp: Beim Studium der Informationsarchitektur einer Website ist es eine hilfreiche Technik, Screenshots zu machen und diese in Graustufen darzustellen, damit Sie nicht durch die Farbwirkung abgelenkt werden (was sehr überzeugend sein kann).

Nutzen Sie danach die Online-Ressourcen, die es Designern ermöglichen, schnell von Null zu einem interaktiven Prototyp zu gelangen. Es gibt Unmengen von Benutzeroberflächen-Kits, HTML-Vorlagen, WordPress-Designs und so weiter. Scheuen Sie sich nicht, sie an Ihren Prototypen anzupassen, und sorgen Sie sich nicht um Pixelperfektion oder schönen Code. In dieser Phase interessiert es niemanden. Sie kümmern sich darum, ob Ihr Produkt nützlich ist oder nicht.

So funktioniert das mit einem kostenlosen UI-Kit:

Was haben wir im obigen Bild erreicht?

• Wir haben alle Farben und Bilder entfernt.
• Die Navigationsleiste blieb unberührt.
• Die Funktionalität für das Filtersystem blieb gleich, aber der Wortlaut wurde geändert.
• Wir haben von zwei Spalten zu einer gewechselt, um die Bilder, die wir verwenden möchten, besser zu präsentieren.

In weniger als einer Stunde haben wir eine visuelle Grundlage, auf der wir unseren Prototypen weiterentwickeln können.

4. Visuelles Design: Kostenlose UI-Ressourcen wiederverwenden

Das visuelle Erscheinungsbild Ihres Prototyps kann nicht von seiner Funktionsweise getrennt werden. Es geht nicht nur um Grafik. Eindrucksvolles visuelles Design erzählt eine Geschichte und bietet ein Erlebnis mit echtem Wert.

Hier ist die visuelle Einheitlichkeit entscheidend, da sie den Benutzern hilft, sich mit einem Produkt vertraut zu machen und effizienter zu navigieren. Um diese Art von Konsistenz früh in der Entwicklung Ihres Prototyps zu erreichen, ist es sinnvoll, kostenlose UI-Ressourcen wiederzuverwenden.

Auf diese Weise müssen Sie nicht stundenlang ein zusammenhängendes Designsystem entwickeln. Typografie, Schaltflächenstile, Ikonografie und alle anderen wichtigen UI-Komponenten werden berücksichtigt.

5. Launch: Codieren oder nicht codieren?

Es ist an der Zeit, Ihren Prototypen mit der Welt zu teilen. Glücklicherweise ist es einfacher denn je, Modelle in dynamische Prototypen umzuwandeln. Dank einer Vielzahl intuitiver Tools müssen Sie nicht einmal wissen, wie man programmiert – aber sollten Sie es lernen?

Der No-Code-MVPr

Wenn Sie mit dem visuellen Design fertig sind, betten Sie den Prototyp in eine Zielseite ein, damit Besucher damit interagieren und allgemeines Feedback zu Ihrer Idee geben können. An diesem Punkt des MVPr-Designprozesses gibt es mehrere Möglichkeiten, einen No-Code-Prototyp zu erstellen. Hier sind Ihre Optionen:

Grundlegende Prototypen

• InVision verfügt über alle Funktionen, die zum Erstellen und Testen eines einfachen Prototyps erforderlich sind, und bietet ein schmerzloses Erlebnis ohne Komplikationen.

Rich Media-Prototypen

• Für anspruchsvolle Interaktionen, Übergänge und Animationen ist Principle sehr nützlich.

100 % realistische Prototypen

• Mit Framer können Designer jedes erdenkliche digitale Produkterlebnis simulieren. Es ist die perfekte Option, wenn der Prototyp in Bezug auf native Animation und logikbasierte Codierung echt aussehen und sich anfühlen muss (z. B.: Wenn dies, mach das).
• Webflow bietet die Möglichkeit, responsive Websites zu entwerfen, mit Code zu erstellen und zu starten, und zwar auf einer Leinwand, die zu 100 % dem entspricht, was Sie sehen.

Klicken Sie hier, um das Bild in voller Größe anzuzeigen.

Der codierte MVPr

Code kann ein erstaunlicher Verbündeter sein. Ohne Zweifel ist dies der beste Weg, um Ihr Produkt zu entwickeln. Der größte Nachteil besteht darin, dass Sie wissen müssen, wie man Code schreibt, um die Vorteile der erweiterten Anpassung nutzen zu können. Ohne eine angemessene Wissensbasis wird Sie das Experimentieren mit Code verlangsamen.

Es gibt viele Code-Starter-Kits, um den Ball ins Rollen zu bringen. Zum Beispiel hat das oben vorgestellte UI-Kit eine eigene HTML-Version zum Download:

6. Test: Ad Insights nutzen

Die geheime Zutat zum Testen Ihres Prototyps liegt in Tools, die es Ihnen ermöglichen, mit dem geringsten Aufwand die meisten Erkenntnisse zu gewinnen und gleichzeitig einen Mehrwert zu bieten. Alles, was Sie brauchen, sind ein paar Dollar und etwas geduldige Problemlösung.

Ein praktischer erster Schritt, um das Interesse an Ihrem Produkt zu messen, besteht darin, eine Anzeige zu erstellen und die während der Recherchephase gefundenen Personen anzusprechen. Abhängig von Ihrer Zielgruppe und der Art des Produkts, das Sie entwerfen, können Sie Anzeigen auf Google, LinkedIn, Instagram oder Twitter schalten. Für Business-to-Consumer-Produkte wird Facebook empfohlen.

*Profi-Tipp: AdEspresso ist ein bequemer Ort, um Hunderte von Versionen Ihrer sozialen Anzeigen gleichzeitig zu schalten und gleichzeitig nützliche, vergleichende Analysen zu sammeln.

Schalten Sie Anzeigen und Sie werden zwei Dinge lernen:

1. Die Anzahl der Personen, die Ihre Anzeige angesehen haben
2. Die Anzahl der Personen, die auf Ihre Anzeige geklickt haben

Sobald Sie bestätigt haben, dass Ihre Zielgruppe an einer Interaktion mit Ihren Anzeigen interessiert ist, müssen Sie einen Mehrwert für Ihre frühen Nutzer schaffen. Hier ist wie:

• Fügen Sie ein „Abonnieren“-Formular hinzu und bitten Sie die Benutzer, ihre E-Mail-Adresse anzugeben.
• Melden Sie sich, um sie über den Start zu informieren.
• Stellen Sie sicher, dass Ihre Social-Media-Kanäle betriebsbereit sind, damit Sie Social-Buttons einbauen können, mit denen Benutzer Ihr Produkt bekannt machen können.

Verwenden Sie diese Strategie und Sie werden gewinnen:

• Eine Liste mit E-Mail-Adressen, die für frühe Marketingmaßnahmen verwendet werden können
• Personen, die Ihr Produkt ihren persönlichen und beruflichen Netzwerken empfehlen
• Ein klareres Verständnis dafür, ob jemand von Ihrem Produkt begeistert ist oder nicht

Wenn Sie zum ersten Mal echtes Feedback erhalten, ist Ihr Produkt live. Durch diesen Kreislauf aus Wertschöpfung, Verhaltensanalyse und Iteration von Lösungen lernen Sie, was funktioniert und was nicht, und Sie kommen einem Produkt näher, das die Leute tatsächlich verwenden möchten.

Starten und lernen Sie mit Kühnheit

Das ultimative Ziel des minimal realisierbaren Prototyps ist folgendes: Schnell und sicher von fundierten Designvermutungen zu echtem, umsetzbarem Feedback übergehen.

Dies ist ein Prozess, der Ungewissheiten und Fehltritte als Verbesserungsmöglichkeiten wahrnimmt. Vor allem belohnt es Taten. Gutes Design erfordert mutige Entscheidungen und die Bereitschaft, angesichts von Unvollkommenheiten voranzukommen.

Lassen Sie sich also nicht vom Streben nach Perfektion verzetteln und versuchen Sie, sich nicht mit Megamarken und ihren riesigen Ressourcen zu vergleichen. Machen Sie weiter Schritte nach vorne, und bald werden Sie sich mit einem deutlich ausgefeilten Produkt wiederfinden, das die Leute begeistert verwenden.

• • •

Weiterführende Literatur im Toptal Design Blog:

1. Prototypen mit Leichtigkeit – Ein InVision Studio Tutorial
2. Wie man einen effektiven Design-Sprint durchführt
3. Wer wusste, dass Adobe CC Wireframes kann?
4. UX-Tests für die Massen: Halten Sie es einfach und kostengünstig
5. Customer Journey Maps – Was sie sind und wie man sie erstellt