der hess

Im ersten Teil der Making-Of Serie habe ich die Randbedingungen des Projektes vorgestellt und unser Verfahren mit Hilfe von MockUps die Struktur und den Inhalt unserer App zu definieren. In diesem Beitrag geht es um die visuelle Gestaltung, sprich das Grafik Design unserer Ap. Ein weiteres Thema sind die Ergebnisse unserer kleinen Feldstudie mit Freunden.

3. Eine Art Mischung von Corporate Design und Screen Design

Die Erstellung eines visuellen Gesicht war weniger ein technisches und gestalterisches Problem, es war eher ein Budgetproblem. An dieser Stelle mußten wir einen großen Spagat zwischen unseren Ansprüchen und den stark begrenzten Mitteln machen. Mit dieser Problematik im Hinterkopf hatten Rusbeh und ich uns gut vorgearbeitet. Wir schrieben ein kurzes Konzept über 1-2 Seiten, in dem wir bestimmten was genau visualisiert werden sollte. Darüberhinaus definierten wir unsere Struktur fix. Somit hat der Grafik Designer solide Grundlage für weitere Detailfragen. Leider bin ich selbst nicht so gut im Grafik Design, aus diesem Grund holten wir uns Expertise bei den Jungs von Sunst-Studio ein. Die Jungs erstellten uns eine Reihe von wirklichen brauchbaren Entwürfen, die uns auch für die Zukunft viel Gestaltungsspielraum lassen sollten. Falls dann irgendwann mal ein größeres Budget vorhanden sein sollte, können wir ohne Probleme an den Baustellen weiter arbeiten. Ein Fallbeispiel in dieser Richtung ist unser Logo. Ein Logo zu entwerfen geht teilweise schnell, aber ein treffendes wirklich gutes Logo zu entwerfen, ist dagegen ziemlich schwer. Wir einigten uns somit erstmal auf ein Logo mit nur einem Schriftzug. Das ist leicht zu erweitern und es kommniziert trotzdem schon einmal über die Typography den Charakter von wasfuttern.de. Die äußerst brauchbaren Entwürfe waren eine Mischung aus Corporate Design und Screen Design. Wir kombinierten Einzelteile der Entwürfe miteinander und bauten somit die Wasfuttern App wie in eine Collage zusammen. Besonders hat es mir der Ansatz eines statischen und dynamischen Bereiches auf der Seite angetan. Für den Navigationsflow sah ich darin sehr viel Potenzial. Ich konnte auch den anfgangs zögerlichen Rusbeh von diesem Single-Page ähnlichen Ansatz überzeugen.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Nach der Fixmachung des ersten visuellen Designs, musste ich mich aufmachen die Codebasis des bisherigen Prototypens grundlegend zu überarbeiten. Das hieß ein Frühjahrsputz sondersgleichen mit ordentlicher Renovierung. Aus diesem Grund entschloss ich mich an dieser Stelle mit der Konzeption der technischen Architektur zu befassen. Es sollte ein ordentliches Backend und Frontend geben. Das macht jegliche spätere Arbeit und Wartung um ein Vielfaches einfacher. Für das Backend entschied ich mich auf eine PHP basierte REST Lösung zurück zugreifen. Das Slim Framework von Josh Lockhart fand ich diesem Falle sehr passend. Für das Frontend setzte ich weiterhin auf jQuery, um dann aber  eine ordentliche Codestruktur über die alle Entwicklungsstufe bei behalten zukönnen, verwendete ich Backbone.JS. Die Entscheidung habe ich bis heute nicht bereut.

4. Erste kleine Feldstudie der Website wasfuttern.de

Nachdem das Design in HTML umgesetzt und mit Animationen verziert wurde, hatten wir unseren ersten richtigen Meilenstein erreicht. Unser Prototyp wirkte nun richtig lebhaft. Auch das technische Problem mit der Latenz bei der Autovervollständigung konnte durch eine Vorberrechnung aller Kombinationsmöglichkeiten im Backend gelöst werden (Vielleicht gibt es dazu auch nochmal einen extra Artikel...).  Wir waren stolz auf unser Ergebnis und konnten nun unseren Prototypen mit Hilfe unserer Freunde testen. Bewaffnet mit einem von uns erstellten Fragebogen ging wir auf Feedback fang. Wir wählten unsere Freunde basierend auf Alter, Kenntnisstand in Technik und Design, berufliches Tätigkeitsfeld, und deren Anspruch auf Ernährung aus. Da wir ein breites Spektrum von Nutzern ansprechen wollen, achteten wir sehr stark darauf dass die befragte Gruppe sehr heterogen in allen oben genannten Eigensachten ist. Jeder Befragte musste einmal einen von uns definierten Use-Case durchspielen. Wir gaben dabei keine Hilfestellung, sondern beobachteten nur. Danach schickten wir unsere Testperson auf eigene Erkundung der App. Danach gab es einen Fragebogen zum ausfüllen.

 

 

 

 

 

 

 

 

Die ganze Feldstudie hat ca. 2 Wochen gedauert. Rusbeh hat dann die Auswertung vorgenommen und wir unterhielten uns über die nötigen Anpassungen und Konsequenten. Grundstimmung war, jeder (wirklich jeder) fand unsere App gut. Leider war es aber noch kein sehr gut, wir wissen über die Schwäche des anfängenlichen Startkonzept bescheid. Die begrenzten Mittel, lass aber keine größeren Sprünge zu. Wir hoffen mit einem ersten Start, die nächsten Schritte finanzieren zu können. Aus diesem Grund versuchten wir uns auf die kleinen bis mittleren Ungereimtheiten zu konzentrieren. Dazu gehörten in den meisten Fällen Usability Anpassungen, wie z.B. die komplette Überarbeitung der Restaurantsuche, bessere Kennzeichnung der Menübeschreibung und das Feature zum Selbstkochen mit einem Verweis auf das passende Kochrezept.

Weitere Wünsche wie zum Beispiele die Aufnahme von Sushie, vegane Gerichte steht auf unserer zukünftigen ToDo Liste. Den Wunsch nach Kalorienanzeigen mussten wir leider nach einer eingehenden Prüfung auf Eis legen. Wir können in dieser Richtung einfach keine verlässlichen Angaben machen. Am Ende war die Feldstudie auf jeden Fall für uns ein wichtiger Erkenntnisgewinn. Grundsätzlich funktionierte unsere Idee, was gut ist, doch es lag noch einiges an Verbesserungsarbeit vor uns.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Im nächsten Blogartikel schreibe ich über unsere Erfahrung des "Finishings", der Mobile App Produktion und unseren Geschäftsansatz. Bleibt dran und bei Fragen einfach fragen, wir beißen nicht 😉