Phasen App Entwicklung

So wird Ihre Idee zur App

Die Entwicklung einer App verläuft bei Stanwood in acht einfachen Schritten. Nach jedem Schritt bekommen Sie schnelle, sichtbare Ergebnisse, sodass Sie Kunden, Nutzer und Stakeholder frühzeitig ins Boot holen und wertvolles Feedback einsammeln können. Warum ist das wichtig?

Sie kennen bestimmt die alte Branchen-Weisheit “90% aller Start-Ups scheitern”.

Wir helfen Ihnen dabei herauszufinden, zu welchem Teil Ihre Geschäftsidee zählt. Hat Ihre App-Idee das Potenzial, das nächste Facebook zu werden, oder sollten Sie Ihre Strategie besser nochmal überarbeiten? Gemeinsam finden wir es heraus – und zwar so früh und kostengünstig wie möglich!

1 Kickoff-Workshop

Wir bringen zum ersten Workshop einen schicken Satz an gedruckten Wireframe-Vorlagen mit, mit denen wir gemeinsam eine erste visuelle Idee und Kostenschätzung Ihrer App entwickeln. Unserer Erfahrung nach hilft diese Visualisierung enorm dabei, Ideen in Worte zu fassen und so ein gemeinsames Bild Ihrer künftigen App zu zeichnen.

Screenshot 2019-10-11 at 15.17.54
Screenflow mit den wichtigsten Funktionen der App

Ein Consultant und unser CEO Hannes besuchen Sie für einen 4-stündigen Workshop mit dem Ziel, Ihre App-Idee, Ihr Ziel, Ihr Geschäftsmodell und Ihr Budget besser zu verstehen. In diesem Workshop gehen wir gleich ans Eingemachte: Mit unserem gedruckten Satz an Wireframe-Vorlagen werden wir gemeinsam eine erste visuelle Idee und Kostenschätzung Ihrer App entwickeln.

Unserer Erfahrung nach hilft diese Visualisierung enorm dabei, Ideen in Worte zu fassen und so ein gemeinsames Bild Ihrer künftigen App zu zeichnen. Mithilfe der gedruckten Wireframe-Vorlagen legen wir einen ersten Screenflow fest und definieren die wichtigsten Funktionen, die Ihre App haben soll. 


2 Wireframes

Mit dem gemeinsamen Verständnis aus unserem Kickoff-Workshop gehen wir nun für eine Woche in Klausur und entwickeln hochwertige Wireframes und einen Click-Dummy für Sie. Sie installieren diesen Click-Dummy auf Ihrem Smartphone oder Browser und können anschließend darin klicken, scrollen, Formulare ausfüllen etc. So geben Sie Ihren Stakeholdern, Nutzern und Kunden einen Vorgeschmack darauf, wie Ihre App später funktionieren wird und bereits früh im Prozess wertvolles Feedback einsammeln. 

Screenshot 2019-10-11 at 15.19.27
Feedback einholen mit hochwertigen Wireframes und Click-Dummies

3 Iteration

Nachdem Sie Wireframes und Click-Dummy getestet und Feedback dazu eingesammelt haben, treffen wir uns zu einem zweiten 4-stündigen Workshop, in dem wir alle Ergänzungen und nötigen Änderungen besprechen. Sie werden überrascht sein, wie viele Ansichten Sie im ersten Durchgang „vergessen“ haben.

Wir haben festgestellt, dass Kunden im ersten Workshop etwa 20 Ansichten erstellen. In den folgenden Workshops kommen weitere 20 Ansichten hinzugefügt, dann 10, dann 5, dann 3, dann 1. Am Ende stehen Sie also vor der dreifachen Anzahl an Ansichten, die Sie im ersten Workshop geschätzt haben. Aber keine Sorge! Das ist völlig normal und der Prozess dorthin macht wirklich Spaß.

Screenshot 2019-10-11 at 15.22.05
Nach jeder Iteration eine aktuelle Kostenübersicht

Jedes Mal, wenn wir Wireframes und Click-Dummy aktualisieren, geben wir Ihnen eine grobe Kostenschätzung zum aktuellen Stand des Designs. So haben Sie immer volle Kostentransparenz und erleben keine bösen Überraschungen.


4 Design by Toolkit

Die Wireframes Ihrer App sind definiert, das Feedback aus dem ersten Reality Check mit Ihren Kunden, Nutzern und Stakeholdern eingearbeitet: Jetzt kommt Farbe ins Spiel! 

Bis sich alle Beteiligten – Sie, Ihr Chef, der Chef Ihres Chefs – auf ein Design verständigt haben, das allen gefällt, kann es erfahrungsgemäß dauern. Der Grund ist einfach: Gutes Design wird oft mit persönlichem Geschmack verwechselt. Und da jeder von uns guten Geschmack besitzt, möchte auch jeder seinen Beitrag zum App-Design leisten. 

Unsere Kunden verlieren sich oft Wochen in Diskussionen über einzelne Elemente und Formen. Wir haben Design-Elemente unserer Apps in A/B-Tests gegeneinander getestet und herausgefunden: Unterschiedliche Designs haben keinerlei Einfluss auf den Erfolg einer App.

Oder wie es ein alter Designer-Witz so treffend ausdrückt:

Screenshot 2019-10-11 at 15.25.21
Designer-Witz

Unsere Designbücher

Um diesen Prozess abzukürzen und unsere Kunden bei der Entstehung Ihres App-Designs voll mit einzubinden, haben wir unsere drei Designbücher entwickelt. Das sind Vorlagen, in denen wir alle zentralen Elemente einer App in verschiedenen Stilen durch-designed haben. Diese Designbücher geben wir Ihnen an die Hand als Grundlage für Ihren Design-Workshop, in dem Sie gemeinsam mit Ihren Stakeholdern Ihre Vorstellungen diskutieren und schließlich Ihre Favoriten auswählen. Nach dem Workshop nehmen wir Ihre Favoriten mit und gießen die ausgewählten Elemente in das finale App-Design.

1 Komponenten

Ein App besteht aus vielen einzelnen Elementen. Für jedes dieser App-Elemente haben wir unterschiedliche Designs erstellt, aus denen Sie auswählen können.

Design-Elemente
ButtonsProfil-KartenSign-In-Formulare
TextfelderFußzeilenWarnungen
EingabegruppenAktivitäts-FeedsVollbild-Popups
BadgesTestimonialsMulti-Selection Formulare
PaginierungBreadcrumbsKopfnavigation
FehlerüberprüfungHorizontale NavigationAnwendungs-Layout
PricingVertikale Navigation
Marketing-SeitenTabellen
Vorschau-KartenKarten

2 Farbschema

Wenn Sie ein CI mit einem definierten Farbschema haben, großartig! Daraus können wir schnell ein Farbschema für Ihre App ableiten. Andernfalls haben Sie zwei Möglichkeiten:

Sie können alle 15,7 Millionen Farben auf Ihrem Computer durchsuchen, um die 10 Farben zu finden, die für Ihr Produkt geeignet sind. Dieser Prozess kann eine Weile dauern, wenn Sie von Null starten. 

Oder Sie wählen Ihre Farben aus einem unserer 28 durchgestylten Farbschemen und wir starten direkt mit der Adaption an Ihr Wunsch-Design. Damit sparen Sie wertvolle Zeit, Ressourcen und letztendlich Ihr Budget.

Wir brauchen nicht zu erwähnen, dass wir dringend Option 2 empfehlen 😉

Screenshot 2019-10-11 at 15.30.37
Auswahl an verschiedenen Farbschemata

3 Schriftarten 

Generell empfehlen wir unseren Kunden, die Systemschriften von iOS (San Francisco), Android (Roboto) und Web-Browsern (abhängig vom Betriebssystem) zu verwenden.

Apple, Google und Microsoft haben Millionen von Dollar investiert, um diese Schriftarten für ihre jeweiligen Bildschirme zu entwickeln. Die Wahrscheinlichkeit ist groß, dass wir es nicht besser machen werden als diese Design-Riesen vor uns.

Das Entwerfen von Schriftarten, insbesondere für kleine Bildschirme wie Smartphones, ist extrem schwierig. Viele Schriftarten brechen, wenn man versuchen, sie mit 8 Pixel Höhe auf einem 320 Pixel breiten Bildschirm darzustellen. Wir haben A/B getestet, ob Nicht-System-Schriftarten die Performance von Apps positiv beeinflussen: Tun sie nicht.

Sollten Sie dennoch das Gefühl haben, dass Ihre App mehr „Branding“ braucht, helfen wir Ihnen bei der Auswahl der perfekten Schriftart. Keine Sorge, Sie müssen nicht alle 300.000 existierenden Schriften durchforsten.

Wir haben die Auswahl für Sie eingegrenzt und 32 online- und mobile-freundliche Schriftarten gefunden, aus denen Sie bequem Ihren Favorit auswählen können.

Für jede Schriftart erstellen wir eine Demo und zeigen Ihnen, wie diese Schriftart in einer Website, einem gedruckten Artikel und einer App aussehen wird. 

Screenshot 2019-10-11 at 15.31.50
Die Schrift „Proxima Nova“ auf verschiedenen Bildschirmen

5 Design

Nachdem wir nun Ihren Input zu allen Design-Elementen eingesammelt haben, werden sie unsere Designer (manchmal sogar unser CEO persönlich) in ein stimmiges Design gießen. Die Hälfte Ihrer Favoriten werden wir freundlich aber bestimmt ignorieren, weil sie nicht zusammenpassen – runde Buttons mit eckigen Formularfeldern beispielsweise – und daraus ein preisverdächtiges Design für Sie entwickeln. Sollten Sie unterschiedliche Auflösungen für Smartphone, Tablet und Desktop benötigen, erhalten Sie diese selbstverständlich von uns.

Screenshot 2019-10-11 at 15.37.17
Beispiele unserer App-Designs
Screenshot 2019-10-11 at 15.37.27
Auflösungen für unterschiedliche Screens
Screenshot 2019-10-11 at 15.37.33
Designs kommentieren im Kollaborationstool Zeplin

Wie schon beim Wireframing laden wir Sie zu unserem netten Kollaborationstool „Zeplin“ ein, in dem Sie unsere Design-Entwürfe nach Herzenslust kommentieren können. Wir setzen Ihre Anmerkungen und Vorschläge dann innerhalb von ein bis zwei Tagen um. Auf diese Weise arbeiten wir eng und effizient zusammen – und es macht Spaß! Nach vier Wochen haben wir Ihre endgültigen Designs fertig, die wir anschließend unseren Entwicklern übergeben.


6 Spezifikation

Zeit für die Übergabe! Jetzt geben wir Ihre Entwürfe an unsere Entwickler und besprechen, wie wir sie technisch umsetzen würden, wie lange das dauert und wie viel es kostet.

Wir arbeiten nach der agilen Projektmanagement-Methodik „Scrum“, deshalb brauchen wir ein wenig Vorbereitung, damit unsere Entwickler eine fundierte Aufwandsschätzung abgeben können. Dazu zerlegen wir Ihre App in zentrale Teile wie Onboarding, Sign Up, Log In, Hauptansicht und Artikelansicht. Jeder Teil wird in einem sogenannten  “Epic“ beschrieben. Alles, was ein Nutzer in einem Epic tun können soll, beschreiben Sie anschließend in einer „User Story“. Das sind die späteren Features Ihrer App – nur aus Anwendersicht beschrieben. Keine Sorge, einer unserer Consultants hilft Ihnen dabei.

In einem Workshop mit allen Entwicklern schätzen wir, wie komplex jede „User Story“ in der Umsetzung sein wird. Der Workshop dauert ca. 2-4 Stunden und ist entscheidend, damit wir am Ende eine valide Schätzung abgeben können. Diese paar Stunden sind gut investiert, glauben Sie uns! Am Ende haben wir eine Liste aller User Stories, die wir nach ihrer Komplexität geschätzt haben. Das ist unser wichtiger „Projekt-Backlog“.

Screenshot 2019-10-11 at 15.37.45
Im Projekt-Backlog sortieren unsere Kunden ihre User Stories von oben nach unten nach Wichtigkeit.

Jetzt sind Sie an der Reihe: Sie sortieren nun die User Stories nach Relevanz für Sie. Welche Features sind Ihnen am wichtigsten, welche sollen wir als erstes umsetzen? Die wichtigsten Funktionen stehen also ganz oben in Ihrem Backlog, weniger wichtige weiter unten.

Aus technischen Gründen können wir einzelne Features umsortieren, besprechen dies jedoch immer vorher mit Ihnen. Jetzt teilen wir die User Stories in Sprints ein. Sprints sind zweiwöchige Zyklen, in denen wir an einer definierten Anzahl an Features arbeiten.

Am Ende jedes Sprints erhalten Sie eine funktionsfähige Version Ihrer App mit den vereinbarten Features, mit denen Sie anschließend spielen können.

Das ist die gesamte Projektplanung, die wir brauchen, um mit der Entwicklung Ihrer App zu beginnen. Mithilfe des Scrum-Prozesses können wir Ihnen ziemlich genau sagen, wie lange Ihr Projekt voraussichtlich dauern wird und was es Sie kosten wird. Dies ist der Zeitpunkt, an dem Sie ein Angebot von uns erhalten.

Sie könnten unseren Projekt-Backlog mitsamt der Sprint-Pläne und User Stories nun nehmen und zu jedem professionellen Entwicklerteam auf der Welt gehen. Diese sind in der Lage, damit sofort loszulegen und können problemlos Ihre App für Sie bauen. Entscheiden Sie sich dafür, auch für die Entwicklung bei uns zu bleiben – was wir uns wünschen – erstellen wir zunächst einen Prototyp: Das Minimum Viable Product (MVP).  


7 MVP

Wir empfehlen Ihnen nachdrücklich, die wichtigsten Funktionen Ihrer App so schnell wie möglich als Minimal Viable Product (MVP) zu entwickeln. Nach zwei Feature-Sprints (1 Monat) und einem Polishing-Sprint (2 Wochen) können Sie Ihr MVP an realen Nutzern testen oder zumindest Ihren Stakeholdern zeigen und wertvolle Nutzungsdaten und Feedback einsammeln: Maximaler Erkenntnisgewinn bei minimalem Zeitaufwand und Invest.


8 Die 1.0 Version Ihrer App

Basierend auf den Nutzerdaten und Feedback Ihrer Stakeholder entwickeln wir Ihre App nun im selben agilen Modus weiter. Das heißt, wir implementieren die User Stories aus dem Backlog in der Reihenfolge und Priorisierung, die wir gemeinsam festgelegt haben. Sie erhalten nach 2 Wochen am Ende jedes Sprints eine funktionsfähige App, die Sie Ihren Stakeholdern oder Nutzern zeigen und wieder Feedback einsammeln können. Wie dieser Prozess aussieht und warum Scrum-Projekte erfolgreicher sind, erfahren Sie hier.