4 Schritte zur Beherrschung des MVP-Entwicklungsprozesses

Veröffentlicht: 2022-07-22

Startup-Produktteams sind oft mit knappen Budgets und Fristen konfrontiert. Mit begrenzten Ressourcen haben sie die Aufgabe, neue Produkte ohne Benutzer, Feedback oder Funktionsanfragen zu entwickeln. Als Produktdesigner, der mit diesen Herausforderungen vertraut ist, weiß ich, wie schwierig das sein kann.

Glücklicherweise gibt es eine Möglichkeit, Unsicherheiten zu bewältigen, benutzerorientiert zu bleiben und Produkte pünktlich und im Rahmen des Budgets zu liefern: das MVP-Framework. Ein Minimum Viable Product ist eine startfähige Version eines Produkts mit gerade genug Funktionen, um ein zentrales Benutzerproblem zu lösen. MVPs helfen Produktteams, mehr über ihre Zielgruppe zu erfahren, während sie weniger Aufwand im Design-/Entwicklungsprozess betreiben. Sie reduzieren auch das Risiko, indem sie es Designern ermöglichen, Annahmen frühzeitig zu testen.

In diesem Beitrag teile ich die vier wichtigsten Schritte zur Beherrschung des MVP-Entwicklungsprozesses. Um uns bei der Visualisierung dieses Ansatzes zu helfen, werden wir eine App für die Lieferung von Lebensmitteln entwerfen, ähnlich wie Grubhub oder Uber Eats.

Schritt 1: Definieren Sie das MVP mit einer PRD

Der erste Schritt im MVP-Entwicklungsprozess besteht darin, den Zweck, die Merkmale, die Funktionalität und das Verhalten des Produkts mit einem Produktanforderungsdokument zu definieren. Die PRD ist die zentrale Informationsquelle des Projekts, die das Produktteam auf das Problem des Benutzers ausrichtet. Es sollte enthalten:

  • Das Ziel (Problemstellung).
  • Ideeninformationen (Benutzerpersönlichkeiten, Benutzergeschichten und Epics).
  • Analyse (Annahmen, Einschränkungen und Erfolgsmetriken).

So sieht unsere Essensliefer-App PRD aus:

Zielsetzung

Problemstellung

Eine Problemstellung definiert das reale Benutzerproblem, das das Produkt lösen soll. Er sollte nicht länger als ein einzelner Satz sein und ein klares Verständnis des Produktziels gewährleisten.

Zum Beispiel: „Wir müssen hungrige Kunden mit großartigen Restaurants verbinden, die ihre Bestellungen so schnell wie möglich liefern können.“

Ideeninformationen

Benutzerpersönlichkeiten

Eine Benutzerpersönlichkeit ist eine fiktive Figur, die einen Benutzertyp darstellt und eine Reihe einzigartiger Aktionen ausführt. Jede Persona trägt zur Lösung der in der Problemstellung definierten Herausforderung bei.

Unsere Personas für die Essensliefer-App sind:

  • Rick der Gastronom;
  • Dante der Lieferbote;
  • Chloe die Kundin; und
  • Sabita die Support-Agentin.

Die Verwendung von Personas im MVP-Design ermöglicht es Teams, Endbenutzer zu verstehen und sich in sie hineinzuversetzen und ihre Designs daher auf ihre Bedürfnisse auszurichten.

User Stories und Epics

Eine User Story ist eine kurze Erklärung, wie eine Persona mit einem Produkt interagiert und eines der Endziele des Produkts erreicht. Zum Beispiel für Rick the Restaurateur: „Wenn ein Kunde eine Bestellung [den Kontext] aufgibt, möchte ich benachrichtigt werden und die Details der Bestellung [die Aktion] sehen, damit ich sie in weniger als 30 Sekunden überprüfen und darauf antworten kann [ das Ziel]."

Eine Vorlage für Benutzerpersönlichkeiten und Benutzergeschichten für den MVP-Entwicklungsprozess. Die Vorlage enthält einen Persona-Avatar, einen Namen und eine Berufsbezeichnung sowie die User Story. Auf beiden Seiten der Vorlage erscheinen zusätzliche Vorlagen, die verblasste Avatare anzeigen.
Das Erstellen von Benutzerpersönlichkeiten und Benutzergeschichten kann Produktteams dabei helfen, mehr über ihre Zielgruppe zu erfahren. Klare, fokussierte und umsetzbare User Stories helfen dabei, Designentscheidungen rund um die Bedürfnisse des Benutzers zu treffen.

Ein Epic ist eine große Gruppe von User Stories, die in kleinere Stories unterteilt werden können. Unsere Epics für die Essensliefer-App sind:

  • Eine Mahlzeit bestellen;
  • Melden eines fehlenden Artikels;
  • Bewertung der Liefererfahrung; und
  • Rückgabe eines Artikels.

Analyse

Annahmen

Annahmen sind, was wir von dem Produkt erwarten oder wie sich der Benutzer verhalten wird. Zum Beispiel: Wir gehen davon aus, dass Dante der Lieferbote während der Öffnungszeiten des Restaurants arbeitet. Sein Zeitplan und die Öffnungszeiten des Restaurants sind jedoch möglicherweise nicht kompatibel.

Einschränkungen

Einschränkungen umreißen mögliche Produktbeschränkungen. Beispiel: Schlechter Mobilfunkempfang bedeutet, dass Chloe, die Kundin, keine Updates zum Status ihrer Bestellung erhält.

Indem wir Annahmen und Einschränkungen in der PRD berücksichtigen, können wir sie früher im Prozess angehen und eine bessere Erfahrung für den Benutzer schaffen.

Erfolgskennzahlen

Umsetzbare Erfolgskennzahlen wie Engagement, Abwanderungsrate und Sitzungsdauer sind für die Messung der MVP-Leistung unerlässlich. Die Entwicklung dieser Metriken hilft uns, unser ursprüngliches Produktkonzept zu validieren und den Entwicklungsprozess zu steuern.

Für unsere Essensliefer-App haben wir Folgendes hinzugefügt:

  • Die Anzahl der Downloads.
  • Die Rate der Anmeldungen.
  • Uhrzeit in der App.

Schritt 2: Organisieren Sie die Informationsarchitektur des MVP

Der nächste Schritt im MVP-Designprozess besteht darin, die digitalen Inhalte der App wie Abschnitte, Seiten und Funktionen zu kennzeichnen und zu organisieren. Das Ergebnis dieses Prozesses wird als Informationsarchitektur (IA) bezeichnet und lässt sich in zwei Teile gliedern:

  1. Bestimmung des Inhalts des Produkts; und
  2. Bestimmen der Hierarchie des Inhalts.

Ein quadratisches Labyrinth, über dem mehrere Symbole schweben. Die Symbole sind von links nach rechts ein Balkendiagramm, ein Mobiltelefon, Berge, ein E-Mail-Symbol, Erde, ein Einstellungssymbol und ein Lautstärkesymbol. Unter jedem Symbol wird ein grüner Pfeil angezeigt, der nach unten zeigt. Gleich rechts neben dem Labyrinth befindet sich ein blaues „Finish“-Symbol. Das Labyrinth repräsentiert die Definition der Informationsarchitektur im minimal realisierbaren Produktrahmen.
Die Definition der Informationsarchitektur ist der Schlüssel zum Erstellen inhaltsreicher Apps mit intuitiver Navigation.

Definieren Sie den Inhalt der App

Um den Inhalt eines Produkts (Bilder, Musik, Texte, Videos usw.) zu definieren, recherchieren wir zunächst Trends, Wettbewerb und unsere Zielgruppe. Um die Punkte zwischen Inhaltstypen zu verbinden, erstellen wir dann eine „schnelle und schmutzige“ Mindmap mit Zweigen, Themen und Unterthemen. Mind-Mapping hilft uns, alle unsere Inhalte an einem Ort zu visualisieren und verwandte Themen zu verknüpfen.

Unsere App-Mindmap enthält:

  • Ein Restaurantthema mit Unterthemen für das Menü, das Bestellprotokoll und die Seiten der Kundendatenbank.
  • Das Menü-Unterthema, das aus Speise- und Getränkeoptionen und Sonderangeboten besteht.

Bestimmen Sie die Inhaltshierarchie

Als nächstes müssen wir bestimmen, wie wir unsere Inhalte präsentieren, dh die Inhaltshierarchie. Eine gute Möglichkeit, Inhalte zu ordnen, ist die Kartensortierung, bei der Benutzer Themen in logischen Gruppen organisieren. Dadurch wird sichergestellt, dass die IA gemäß den Erwartungen der Benutzer und nicht nach Annahmen des Produktteams organisiert wird.

So führen Sie eine Kartensortierung durch:

  1. Wählen Sie Themen aus, die den Hauptinhalt des Produkts darstellen.
  2. Organisieren Sie die Themen in Gruppen mit dem Benutzer.
  3. Beschriften Sie jede Gruppe mit dem Benutzer und besprechen Sie die Gründe für jede Entscheidung.
  4. Wiederholen Sie die ersten drei Schritte mit weiteren Benutzern.
  5. Analysieren Sie die Ergebnisse und suchen Sie nach gemeinsamen Mustern zwischen den Gruppen. Dies hilft Produktdesignern, den Benutzerfluss des Produkts zu verstehen.

Schritt 3: Erstellen Sie Wireframes und Prototypen

Erstellen Sie ein Drahtmodell

Nachdem unsere Inhalte definiert und organisiert sind, können wir das grundlegende UI-Layout der App mit einem Wireframing-Tool erstellen. Es gibt viele Vorteile von MVP Wireframing, nämlich dass es uns ermöglicht, unser Produkt zu visualisieren und gleichzeitig die Dinge schlank zu halten.

Für unsere App für die Lieferung von Lebensmitteln werden wir in zwei Phasen Wireframes erstellen:

  1. Skizzieren Sie das Layout jedes Bildschirms, einschließlich Größe und Positionierung.
  2. Erstellen Sie eine grundlegende UI-Komponentenbibliothek, einschließlich Kopf- und Fußzeilen, Inhaltsblöcken und Menüs. Diese UI-Komponenten dienen als Platzhalter, bis wir unser Wireframe in einen High-Fidelity-Prototypen umwandeln.

Wir haben jetzt ein Wireframe, mit dem wir das grundlegende Layout und die Funktionalitäten der App visualisieren können.

Eine Auswahl mobiler UI-Bibliothekskomponenten für das MVP-Design. Von oben nach unten, in Reihen: ein blauer mobiler Header, der den Text „Food App“ und ein Hamburger-Menü anzeigt, dann eine Suchleiste und ein blaues Suchsymbol, dann eine blaue Schaltfläche „Jetzt bestellen“ und Filtersymbole, dann ein Tropfen -Down-Menü, das den Text "Auswählen" und zwei Kippschalter anzeigt.
Low-Fidelity-Wireframes enthalten in der Regel den grundlegenden Inhalt, das Layout und die Anforderungen des Produkts. Sie sind einfach zu erstellen und können bei jeder Design-Iteration schnell angepasst werden.

Testen Sie mit Benutzern

Unser MVP-Prozess beinhaltet den User-Testing-Ansatz „Messen, Lernen, Wiederholen“, um potenzielle Reibungspunkte frühzeitig zu erkennen und zu beheben.

In unserer App für die Lieferung von Lebensmitteln stellen wir beispielsweise fest, dass Benutzer die App-Filter anscheinend nicht anwenden, um Arten von Lebensmitteln, Preise oder Entfernungen zu verfeinern. Wir führen zwei Arten von Tests durch – unmoderierte und moderierte – um das meiste Feedback zu sammeln, um zu verstehen, warum.

1. Unmoderiertes Testen für quantitative Daten mit Maze : Durch das Messen der Benutzerleistung bei einer bestimmten Aufgabe bietet unmoderiertes Testen eine indirekte Bewertung der Benutzerfreundlichkeit durch quantitative Daten. Der Vorteil dieser Art der Prüfung? Wir erhalten fundiertes statistisches Feedback zu einem Problem, ohne „zufällige“ Ergebnisse, die sich auf unsere Reaktion auf dieses Problem auswirken könnten.

Zum Beispiel zeigt der Klicktrichter von Maze einen steilen Abfall auf dem Filterbildschirm und eine niedrige Abschlussrate dieser Aufgabe. Wir können sehen, dass die Benutzer Probleme mit den Filtern haben. Bei unmoderierten Tests wäre dies jedoch der Umfang des Feedbacks.

2. Moderiertes Testen für qualitative Daten mit Userfeel : Durch das Beobachten von Benutzern, wie sie eine Aufgabe erledigen, und das Stellen von Folgefragen bietet moderiertes Testen eine direkte Usability-Bewertung durch qualitative Daten. Der Vorteil dieser Art der Prüfung? Wir wissen genau, welche Aspekte der Aufgabenstellung problematisch sind.

Beispielsweise würde eine Userfeel-Aufzeichnung zeigen, dass der Benutzer Schwierigkeiten hat, die Funktionsweise der Filter zu verstehen und zu identifizieren, wo das spezifische Problem liegt, z. B. ist der Filtertext zu klein und schränkt die Lesbarkeit ein.

Anhand dieses kollektiven Feedbacks können wir unser Wireframe iterieren, um eine benutzerfreundlichere Filterfunktion zu erstellen.

Entwickeln Sie einen High-Fidelity-Prototyp

Nachdem unser Wireframe-MVP validiert ist, ist es an der Zeit, auf ein interaktives Prototyping-Erlebnis aufzurüsten. Im Gegensatz zum einfachen Wireframing nutzen Hi-Fi-Prototypen pixelgenaues UI-Design und -Animation und sind in Aussehen und Funktionalität dem Endprodukt viel näher. Wir können sie verwenden, um wichtige visuelle Bestätigungen abzuleiten und Echtzeit-Feedback in Bezug auf unser MVP-Design zu sammeln.

Wir werden unser Wireframe in einen interaktiven Prototyp umwandeln, indem wir:

  • Feinabstimmung des Brandings unserer Benutzeroberfläche, wie z. B. Farbverläufe und -paletten sowie Typografie.
  • Anwenden erweiterter Animationen wie Scrollen, Tabulatoren und Mikrointeraktionen.

Hier ist ein Beispiel dafür, wie ein Figma-HiFi-Prototyp für unsere Essensliefer-App aussehen könnte.

Schritt 4: Führen Sie die Design-QA durch

Abschließend bestätigen wir, dass alles wie erwartet aussieht und reibungslos läuft, indem wir uns durch den Prototypen klicken und Folgendes überprüfen:

  • Unser MVP schwingt mit dem ursprünglichen Produktkonzept mit.
  • Der Benutzerfluss fühlt sich natürlich an.
  • Alle Anwendungsfälle wurden berücksichtigt.
  • Alle Entwicklungsfehler wurden behoben.

Anschließend fassen wir alle verbleibenden Probleme zusammen und teilen sie dem Entwicklungsteam als Qualitätssicherungstickets mit. Diese Tickets können in einer ein- bis zweiwöchigen Cooldown-Periode vor dem Start des MVP adressiert werden.

Verbessern Sie Ihren Designprozess mit dem MVP Development Framework

In der Welt der Startup-Produktentwicklung sind Designressourcen knapp. Der MVP-Prozess hilft Designern, benutzerfreundliche Produkte rechtzeitig zu entwickeln und auf den Markt zu bringen, ohne ihr Budget zu sprengen.

Dieses vierstufige MVP-Framework hat mir dabei geholfen, meine Produktdesigns immer wieder benutzerzentriert zu halten. Testen Sie es selbst und stellen Sie sicher, dass Sie den Benutzer in Ihrem Designentwicklungsprozess priorisieren.