Home > Design > Making of wasfuttern.de: Vom Mock-Up zum interaktiven Prototypen

Making of wasfuttern.de: Vom Mock-Up zum interaktiven Prototypen

wasfuttern - making of - Part1

Seit Mitte/Ende Februar hat das Projekt wasfuttern.de das Licht der Welt erblickt. Mein frühiger Schulkollege Rusbeh kam vor ca. 1 Jahr auf mich zu mit seiner Antwort auf die alltägliche Frage "Was soll ich heute wo essen?". Jeder kennt sicherlich diese immer wieder auftretende Frage in der Mittagspause. In diesem Blogartikel gebe ich einen Einblick in unseren User-Centered Design Entstehungsprozess von wasfuttern.de.

1. Start und Mock-Up Phase

Die Ausgangslage war für mich ziemlich klar und übersichtlich für mich. Rusbeh hat eine kleine Marktanalyse mit Gerichten  und Preisen Restaurants in Deutschland über die letzten 2-3 Jahre erstellt. Die Daten lagen in einer Excel Tabelle gut sortiert vor und mit vordefinierten Abfragen auch filterbar. Quasi eine kleine Datenbank, die nur noch ein visuelles Gesicht brauchte. Die ersten Mock-Ups erstellte ich mit dem Tool Balsamiq, so dass Rusbeh schnellst möglich einen kleinen Eindruck vom Aufbau der Website bekommen konnte. Als kleines Schmankerl hab ich noch die Idee einer ortsbasierten Restaurantsuche mit eingebaut.

Mockup Startsteite

Mockup: Startseite

Mockup Gerichtsliste

Mockup: Gerichtliste

Mockup: Gerichtvorstellung

Mockup: Menüansicht

 

 

 

 

 

 

 

Nach der Mock-Up Session war schnell klar es wird nicht viele Seiten geben. Über den Aufbau der Startseite und deren anderen kleinen Seiten (Anmerkungen, Über uns, etc.) waren wir uns sehr schnell einig. Die Übersicht aller Gerichte hat Rusbeh nicht zugesagt und birgte auch die Gefahr fälschlicherweise die Idee einer Preissuchmaschine für Gerichte zu kommunizieren. Eins stand für uns von vornherein fest, die Startseite muss mit dem Formular für den Generator sehr einfach gehalten sein und sofort zugänglich sein. Die Präsentation der Gerichte sollte auch nicht zuviel unnötige Infos anzeigen. Deshalb flog die Anzeige der Preisanalyse raus.

2. Funktionales Design: Interaktiver Prototyp

Beim funktionalen Prototypen war uns die Prüfung des Such- und Navigationsflow sehr wichtig. Wir bauten deshalb eine Autovervollständigung für alle Gerichtskombinationen ein. So dass der User immer nur Kombinationen auswählen kann, die auch wirklich in der Datenbank exisitieren. Wie merkten leider schnell das die Latenz zwischen getätigter Auswahl vom User und die anschließende Autovervollständigung zu groß war. Rusbeh testete, als nicht Techi, an diese Stelle stark unseren Designansatz. Er kam zum Ergebnis, dass die Idee der Autovervollständigung an dieser Stelle absolut Sinn macht. Dieses technische Problem mit der Latenz sollte später irgendwie zu lösen sein und wurde nach hinten geschoben. Bei der Präsentationen der Gerichte wurden in diesem Prototypen alle verfügbaren Gerichte zur der jeweiligen ausgewählten Kombination angezeigt. Das führte zum Teil zu einer langen Liste von Gerichten, in der man leicht die Übersicht verlor. Daher beschränkten wir die Auswahl der Gerichte bei der nächsten Prototypen Version auf nur maximal 5 Gerichte.

Startseite HTML Prototyp von wasfuttern.de

Startseite HTML Prototyp

Menüanzeige Prototyp

Inhalt des Gerichtinspirators

Wasfuttern.de Restaurantsuche

HTML Prototyp: Restaurantsuche

 

 

 

 

 

 

 

 

Anschließend konnte man zum ausgwählten Menü, sich dann noch die passenden Restaurants anzeigen lassen. Anfangs war die Karte noch mit Fake Daten gefüllt um einen kleinen ersten Eindruck zu bekommen. Danach wurde es schon konkreter mit echten Restaurantdaten. Nur war die Auswahl der Restaurants noch nicht passend gut genug. Um es für den User so einfach wie möglich zu machen, entschlossen wir uns die Auswahl vorzudefinieren. Somit hat jedes Gericht seine eigenen Restaurantkategorien in der Datenbank hinterlegt. Das fand Rusbeh, als Ersttester, ganz gut und er hat auch gleich ein neues gutes Restaurant in seiner Ecke gefunden. Somit bewährte sich auch diese Idee aus Interaktion Designersicht. Technisch wurde die Restaurantsuche über ein Mash-up von Google Maps und der Qype API umgesetzt. Trotz der übelst zusammgengewürfelten Codebasis von HTML, jQuery und PHP, waren wir bis dahin sehr zufrieden mit unseren Ergebnissen. Die Struktur und Definition des Inhaltes unserer kleinen Webapp war damit abgeschlossen und wir konnten uns dem visuellen Design widmen.

Im nächsten Beitrag werde ich euch ein paar Infos zum visuellen Design geben. Mit besonderen Fokus auf unser Problem mit geringen Budget irgendwie wasfuttern ein visuelles Gesicht zu geben (Stichwort Corporate Identity und Corporate Design). Darüber hinaus gibt es noch einen kleinen Einblick in unsere erste Feldstudie um unser wasfuttern Konzept zu prüfen.