Der MVP ist live! smeins - Die Buch App

DieProduktMacher |

12. Dez. 2013 |

- min Lesezeit

In meinem letzten Artikel drehte sich alles um Solution Interviews. Auf deren Basis definierte ich das minimale Featureset der smeins App. Inzwischen ist die App im Play Store und im AppStore. Welche Wendungen sich in den letzten Wochen vor dem Release ergeben haben, lest ihr hier.

Ergebnisse aus meiner Solution-Phase war die Definition des minimalen Featuresets:

Als Nutzer möchte ich Bücher anlegen.
Als Nutzer möchte ich die angelegten Bücher bearbeiten können.
Als Nutzer möchte ich ein angelegtes Buch löschen können.
Als Nutzer möchte ich eine Übersicht, wer seit wann welches Buch hat.
Als Nutzer möchte ich diese Übersicht sortieren können nach Buchtitel, Autor, Verleihdatum und der Person, an die ich das Buch verliehen habe.
Als Nutzer möchte ich nach einer definierten Anzahl von Tagen/Wochen/Monaten an die Leihe erinnert werden.

Wir haben noch ein Feature ergänzt, das für den MVP nicht elementar gewesen wäre. Der geringfügige Mehraufwand in der Implementierung, aber der hohe Nutzen für den User, gab jedoch letztlich den Ausschlag:

Als Nutzer möchte ich meine Bücher als gelesen/ungelesen markieren.

Warum? In den Solution Interviews stellte sich heraus, dass ungelesene Bücher nur sehr ungern verliehen werden.

Vom Konzept zur Entwicklung

Konzeption und Frontend

Die Konzeption und Frontend-Entwicklung hat beides unser Senior UX Architekt Andreas übernommen. Gewiefte Spezialisten merken, dass da doch das Design fehlt? Ganz banal waren wir zu diesem Zeitpunkt noch auf der Suche nach unserer Wunsch-Designer(in). Daher musste Andreas die Brücke schließen und ein Übergangs-Design entwerfen.

Bei der Konzeption habe ich mich ganz auf die zentralen Anwendungsfälle der Zielgruppe konzentriert. Die Nutzer möchten ein Buch verleihen bzw. bekommen ein verliehenes Buch wieder zurück. Alles weitere, das darüber hinausgeht, würde dem Gedanken der App widersprechen. Wir wollten eine kleine kompakte App schaffen, die sich ideal in diesen Verleihzyklus integriert. Kurz das Handy aus der Hosentasche ziehen, das Buch als verliehen markieren, fertig!

Andreas Schäfer Lead UX Architect

Usability Tests

Auf Basis des reinen HTML&CSS Frontends standen dann Usability Tests an. Der statische Klickdummy hatte bereits wertvolles Feedback geliefert. Ob aber auch das Frontend den Erwartungen der Nutzer entsprach, wollten wir nicht ungetestet lassen. Das alles geschah entgegen des initiale Plans. Eigentlich war der nächste Usability Test erst angedacht, nachdem die Backend-Funktionalität angebunden war. Aber … “Tue das, was dir hilft voran zu kommen.”

Für den Test habe ich einen kurzen Testleitfaden erstellt. Es brauchte dafür lediglich 8 Use Cases und einer Hand voll Fragen. Ein größerer Umfang wäre für einen MVP auch eher over-engineered gewesen. Mit diesem Leitfaden bin ich dann in zwei Münchner Büchergeschäfte gegangen und habe mit den Menschen gesprochen, die mit Smartphone oder Buch da saßen. Wider erwartend habe ich mehrere Leute gefunden, die sich mindestens 30 Minuten Zeit nahmen mir Feedback zu geben - ohne Gegenleistungen!

Die wichtigsten Learnings aus den Tests:

Wir brauchen eine Speichern-Button! Klingt banal - ist es auch. Bis dato lief das Speichern automatisch, sobald man zurück auf die Übersicht kam. Dieses On The Fly Speichern hat aber eher zu Verwirrungen geführt
Die Icons sind irreführend!Bis dato hatten wir für die Person, an die verliehen wurde eine Kopfsilhouette und für den Zeitpunkt der Rückgabe einen Wecker. Diese wurden stets missgedeutet. Für uns ein klares Zeichen diese Icons zu adaptieren.
Fancy Umschalter sind nur fancy!Bis zu den Tests hatten wir für das Markieren auf verliehen oder gelesen jeweils Switch-Buttons verwendet. Offenbar ist unsere Zielgruppe nicht an solche Umschalter gewöhnt. Diese wurden kurzerhand durch große Checkboxen ersetzt.

Design

Als wenige Wochen später Sarah mit an Bord war, konnte sie dem Design nochmal den nötigen Kick geben. Wow!

Das Design ist einfach und zugänglich, um nicht von der Funktionalität ablenken. Durch den Minimalismus entsteht gleichzeitig eine Leichtigkeit, damit das ganze nicht technisch wirkt und um die Übersichtlichkeit zu wahren.Inhaltlich basiert das Design auf einem Farbcode, der es dem Nutzer einfach macht sich zu orientieren und zu wissen, in welchem Bereich er sich gerade befindet: Grün für die vorhandenen Bücher die im Regal stehen, Blau als neutrale Farbe für alle Bücher die ich besitze und Orange für die verliehenen Bücher.

Sarah Wöhler Head of Design

Technologie

Die Diskussion, ob wir eine native App jeweils für iOS und Android entwickeln, oder einen smarteren Weg gehen stand bereits seit Projektbeginn im Raum. Thomas schlug die ideale Lösung vor: Wir entwickeln die App auf Basis von Phonegap bzw. Cordova. Für Nicht-Techies: PhoneGap bildet für die jeweilige Plattform den nativen “Rahmen”. Dort wird dann eine auf Webtechnologien und Webstandards (HTML5/CSS3/JS) basierende App eingebettet. Der Ansatz ist extrem lean und spart Zeit, da man mit der selben Codebasis verschiedene Plattformen bedienen kann.

Wir sparten uns nicht nur Zeit bei den Apps, sondern dank WebSQL auch einen eigenen extra Backend-Server und den damit verbundenen Entwicklungsaufwand. Die Inhalte der Nutzer werden also vorerst komplett lokal auf deren Handy gespeichert. Selbst wenn wir später auf Server umsatteln wollen, gibt es keine ernsthaften Komplikationen.

Landing Page

Genauso wie die App gereift ist, hat auch die smeins Landing Page ein konkreteres Gesicht bekommen. Lest euch hierzu gerne auch Philipps Praxistipps zur Landing Page Optimierung durch. Den ein oder anderen Kniff konnte ich mir abschauen! Das Ergebnis dazu, ist hier zu sehen: www.smeins.de

UPDATE: Bereits kurz nach dem App Release hat die Connect über unsere App berichtet!

UPDATE #2: Die App ist jetzt auch für iPhone und iPod Touch im AppStore erhältlich!