Prototype (Ready)

Prototype Iteration

Kurze Übersicht

Ein grosser Teil des Designprozesses fiel der Konzeptdefinition zu, welche uns immer wieder an den Anfang zurückführte. Mit Hilfe von weiteren Workshops lernten wir die Wünsche unserer Zielgruppe noch besser kennen. Dank erneuter Applikations-Recherche konnten wir das Konzept aufs Wesentliche hinunterbrechen und die Applikation banal gestalten. Nach der Konzeptphase teilten wir die Weiterführung des Projekts gemäss unseren Kernkompetenzen auf. Sibylle kümmert sich hauptsächlich um das visuelle Erscheinungsbild der ganzen Arbeit und Janine um die technische Umsetzung des Prototypen. Am Ende des Designprozesses verfügten wir über einen lauffähigen Prototypen, welcher durch unseren Freundeskreis gestestet wird, eine Werbewebsite mit Informationen und Video zum Produkt und einen fertigen Ausstellungsstand, bei welchem die Applikation live ausprobiert werden kann.

Iteration Eins

Skizzen und Wireframes

Um einen Organisationsablauf zum ersten Mal greifbar zu machen, skizzierten wir verschiedene Wunschfeatures und reihten diese aneinander. Die Features ergaben sich aus der Marktrecherche und stellen zum Beispiel Buttons, Umfrage, Kommentare, Mitbringsellisten, Favoriten, geschützte Bereiche, Ideen, Angebote, Freunde, Weiterempfehlungen und Online-Status dar. Um verständlicher zu machen, welche Features wirklich gebraucht werden, erstellen wir erste, zeitliche Abläufe einer Planung in digitaler Form. Wir erhielten ein besseres Gespür für die verschiedenen Ansichten unseres Programms. So war zum Beispiel schnell lesbar, welche Features der Organisator braucht und welche die Teilnehmer. Später skizzierten wir die verschiedenen Seiten der Website, was auch «wireframing» genannt wird. Hier legten wir fest, welche Elemente wo platziert sind. Das ganze Thema «iPhone-Applikation» liessen wir zu diesem Zeitpunkt noch aus. Bald darauf fixierten und digitalisierten wir die Wireframes, damit wir diese am folgenden Workshop unseren Freunden präsentieren konnten.

Workshops und Usertest zum Konzept

Mit unserer Zielgruppe führten wir Workshops durch. Wir erhielten Feedback zur Verständlichkeit des Konzeptes, konnten Streitfälle im Konzept bereinigen und wussten, wo die Priorität der Features im Freundeskreis lagen. 90% unserer Teilnehmer waren überzeugt, eine solche Applikation in Zukunft zu nutzen, dies jedoch eher über ein Smartphone. Als wichtigste Hauptfeatures zeigten sich: Terminumfrage, Ideenkreation (viele Ideen zusammen können zu einem witzigen Event werden), «ich komm doch nicht»-Button, Teilnehmertransparenz, «Wer hat gerade Zeit-Ansicht». Eine besondere Aufgabe im Workshop war das Zeichnen des Lieblingsicons, welches wir in unserer Applikation anstelle eines Profilbildes einsetzen wollen. Auch hielten wir Diskussionen zum Thema «Freundschaftsanfrage», welche eine grosse Problematik bei den sozialen Network könnte man diesem Problem entgegenwirken. Der Schnelligkeit und Benutzerfreundlichkeit zu Liebe haben wir uns trotzdem auf die ähnliche Lösung wie Facebook und Skype geeinigt was soviel heisst wie: Suche durch Eingabe des Vornamen, Nachname oder Username.

Anwendung aufs Konzept

Wir versuchten unser Konzept durch die Feedbacks aus den Workshops zu optimieren. Wir machten uns viele Gedanken, unter anderem auch wie die Eingabe eines Angebots ausschauen soll. Wir überarbeiteten Wireframes und zeichneten Prozesse und Datenbankrelationen auf

Gedanken zur Umsetzung

Eine erste, technische Recherche hat gezeigt, dass sich die Website mit dem CMS «Contao» umsetzen lässt. Contao basiert auf PHP und stellt ein Backend dar, wessen Frontend mit Javascript programmiert werden kann. Es existieren viele Module, die wir bereits einsetzen könnten und nur noch abändern müssten. Um die bestehenden Module auszutesten, erstellten wir eine kleine Testumgebung auf unserem Webserver und konnten bereits Angebote mit einem eingeloggen Benutzer erfassen. Ebenfalls waren wir fähig, eigene Module zu programmieren. Da die Website auf dem Smartphone anders aussehen soll wie über den Computerbrowser, fanden wir die Lösung, wie wir beim Smartphone ein anderes CSS aufzurufen können. Ebenfalls konnten wir ein Applikationsicon für den Homescreen des Smartphones einbinden und die Auflösung der Seite auf iPhonegrösse definieren. Magnus Rembold erklärte uns, dass Websites als sogenannte WebViews in die IOS Entwicklungsumgebung XCode einbindbar sind und als native Applikation im iTunestore angeboten werden können. Dank verschiedenen Youtube-Tutorials erstellten wir eine «native iPhone-Applikation» mit einer Toolbar, welche verschiedene Views der Contao-Website anzeigte.

Iteration Zwei

Zurück zum Anfang

Bisher wollten wir unseren Service ebenfalls durch eine Website anbieten, damit die Personen ohne Smartphones auch mitmachen können. Nun entschieden wir uns gegen eine Website, da der Service mehrheitlich mobil im Alltag genutzt wird. Leider beinhaltete dies auch die Ausschliessung der Persona «Anna». Uns wurde bewusst, dass die Website viel zu viele Features enthielt und versuchten uns auf die wesentliche Dinge zu fokussieren. Erneut skizzierten wir Organisationsabläufe, diesmal optimiert für das iPhone. Die folgenden Wireframes waren leider immer noch zu verwirrend und das ganze Konzept zu schwammig und zu komplex. Wir begannen ganz neu und skizzierten die Abläufe von Usecases möglichst einfach und simpel, damit wir schnell sehen konnten, welche Features wirklich gebraucht werden. Danach ordneten wir die Programmabläufe auf einem Zeitraster ein, wodurch lesbar wurde, welche Person zu welchem Zeitpunkt in die Applikation einsteigt und wie sich das Programm gegenüber der neuen Person verhaltet.

Die Komplexität einer Organisation

Immer wieder vertieften wir uns in Details, welche uns enorm viel Zeit raubten. Wir fanden keine Lösung dafür, wie sich Ideen am Besten kombinieren lassen, ob es «Like-Buttons» geben soll, wer eine Idee hinzufügen darf, ob Ideen gesperrt werden können, ob es ein zeitliches Ende der Ideenkreation gibt, ob es «Anmelde-und Abmelde-Buttons geben soll, wie gezeigt werden soll, wer bei einem Event dabei ist, wie die Verbindlichkeit geregelt werden soll, wie der Organisator die Moderation halten kann und welche Eingabemöglichkeiten er hat, wie das Erfassen eines Angebotes einfach funktionieren soll, wie Fotos, Termine, Timer, Angebotsstatus, Umfragen usw. gepostet werden können, ohne den User überfordern zu lassen Wir merkten, dass wir auf diesem Komplexitätsniveau nicht weiterkamen. Das Konzept hatte einfach kein Potential.

Iteration Drei

Konzeptionelle Hinterfragung

Wir fragten uns, ob unsere Freunde die Applikation überhaupt brauchen werden, weil bereits sehr vieles über Whats‘app, Facebook und Doodle organisiert wird. Das gute an Whats‘app ist, dass die ganze Organisation auf Kommentaren basiert und es dadurch keine Features wie der «Ich-bin-dabei-Buttons», oder die «Terminumfrage» braucht. Wir wurden uns bewusst, dass unser Konzept unbedingt einfacher werden muss, wenn unsere Applikation in Zukunft genutzt werden soll. Erneut untersuchten wir einfach gehaltene, mobile Applikationen wie «Twitter», «Picle», «Grid Lens», »Wander» und «Amen». Diese sind dank ihrer Einfachheit und grossen Usability erfolgreich auf dem Markt vertreten.

Fokussierung auf die Kernbereiche

Nach langer Diskussion konnten wir folgende Kernaussagen aufstellen: Wir wollen kein Organisationstool machen, welches Freunde einfacher organisieren lässt. Wir wollen weder Whats‘app, Facebook noch Doodle ersetzen. Wir wollen den motivierenden Kick geben um aufzustehen, raus zu gehen und mit Freunden etwas Cooles erleben. «Wer hat gerade Zeit? Was wird gerade angeboten? Was wollte ich schon lange mal machen?» – diese Fragen sollen mit unserer Applikation beantwortet werden und damit die Problemstellung lösen.

Konzeptverbesserung dank Usecases

Um zu sehen, welche Restfeatures wir noch brauchen und welche nicht, schrieben wir die Kommunikation zwischen Freunden in verschiedenen Usecases auf. Diese Geschichten setzten wir erneut auf das Zeitraster. Erneut wurden wir uns bewusst, dass egal wie unterschiedlich die Angebote sind, die Organisation alleine durch Kommentare geregelt werden kann. Nun lief alles von sich selbst. Unsere Applikation brauchte eine zeitlich vergängliche Angebotsseite, in welche spontane Aktivitätsanfragen gepostet werden können, wie zum Beispiel «Wer kommt heute mit mir an den See?» oder «Ich bin heute in Bern, hat jemand Zeit für einen Kaffe zwischen 5 und 8?». Angebote können kommentiert werden, wie bei «Whats-App». Daneben braucht es eine Ideen-Inspirationsseite, in welche während des Alltages plötzliche Aktivitätseinfälle erfassen werden können. Ideen sollen unter den Teilnehmer transparent werden und gemeinsame Interessen aufzeigen.

Erste Visualisierung

Nochmals skizzierten wir das neue Konzept und erstellen die finalen Wireframes. Zu diesem Zeitpunkt generierten wir den ersten Klickdummy, mit welchem Prozessabläufe einfach zu verstehen war.

Technische Recherche

Da wir keine Website mehr anbieten wollen, sondern eine mobile Applikation, recherchierten wir erneut nach Möglichkeiten der technischen Umsetzung. Für uns kamen zwei Techniken in Frage: die native iPhone-Programmierung oder die Programmierung einer mobile Webapplikation. Bei einer Webapplikation können Inhalte über ein Content Management System verwaltet werden, was ein einfaches Handling von Daten beinhaltet. Webapplikationen sind mit allen Smartphones kompatibel und müssen nicht über den App-Store heruntergeladen werden, womit viel Wartezeit für die Einreichung beim App-Store gespart wird. Eine Webapplikation ist, sofern eine Internetverbindung vorhanden, sofort als Website verfügbar. Mit HTML5, Ajax-Frameworks haben Web-App’s beinah denselben Funktionsumfangs und Performance wie native App’s, aber leider noch nicht ganz den eleganten «Flow» einer nativen App. Funktionen, die auf Smartphone-Daten zurückgreifen, sind mit Web-Apps derzeit noch nicht möglich. Weil 80% unsere Freunde ein Smartphone besitzen, aber davon nur 50% ein iPhone, entschieden wir uns für eine mobile Webapplikation. Das Produkt kann an der Ausstellung einfach und schnell durch Aufruf einer URL ausprobiert und getestet werden. Für die technische Umsetzung verglichen wir verschiedene Frameworks und entschieden uns für das Javascript Framework Sencha Touch. Sencha Touch ist speziell für mobile Web-app‘s gedacht, ist auf dem neusten Stand, kostenlos und besitzt bereits viele Grundfeatures wie zum Beispiel «Slide-Animationen» , «Button-Navigationen» und eine elegantes «mobile UI». Sencha Touch ist für fortgeschritte Entwickler gedacht, hat jedoch eine gut zugängliche Dokumentation mit vielen Tutorials und Demo-Applikationen. Die daraus entstehenden Web-App‘s entfanden wir als sehr stabil und kommen dem nativen Look sehr ähnlich. CSS-Styles können mit Saas und Compass angepasst werden. Die Web-App kann lokal programmiert werden und später komprimiert auf den Server geladen werden. Sie kann im Nachhinein sogar in eine native Applikation umgewandelt werden und im App-Store angeboten werden.

Konzeptdefinition

Wir passten das Konzept der Web-App der Machbarkeit von Sencha Touch an, was unter anderem der Verzicht auf Push-Nachrichten, lokale Datenspeicherung, Fotos und Adressdatenzugriff beinhaltet. Wir sind uns bewusst, dass dies grundlegende Funktionen sind, ohne die eine App nur schwer zum Erfolg findet. Wir erstellten eine ausführliche Konzeptspezifikation über 12 Seiten, in der jedes Detail definiert ist, sodass beim Programmieren keine offenen Fragen mehr auftauchen.

Grundsätzliches

Unsere Applikation ist eine mobile Webapplikation, welche den Kick gibt um rauszugehen, Freunde zu treffen, Räume zu entdecken und Spass zu haben. Die Kernbereiche der Applikation bilden «Ideen» und «Angebote». Diese können mit den engsten Freunden geteilt werden, was gemeinsame Interessen transparent macht und zum Rausgehen auffordert. Die Hauptnavigation zeigt fünf Hauptseiten: Benachrichtigungen, Ideen, Neues erfassen, Angebote, Einstellungen. Ursprünglich wollten wir dem Benutzer ermöglichen, die App ohne Registrierung zu nutzen, sofern er sie nur für den Einzelgebrauch möchte und kein soziales Netzwerk wünscht. Mit einer Web-App ist es jedoch nicht möglich, auf die Geräteadresse des Benutzers zuzugreiffen. Somit gab es keine einmalige Identität, unter welcher die Daten in der Datenbank abgespeichert hätten werden können. Demzufolge ist die Benutzung unserer Web-App nur durch Login möglich. Für Nicht-User gibt es die Möglichkeit, ein kurzer Einblick über eine Bilderserie zu erhalten, um das Produkt kennen zu lernen. Sobald sich ein Benutzer registriert hat, erhält er eine kurze Anleitung, welche ihn Schritt-für-Schritt ins Produkt einführt. Die erfassten Inhalte eines Benutzers sehen nur die durch ihn hinzufügten Freunde. Es ist aber möglich, dass eine seiner Ideen um die ganze Welt geht.

Ideen

In der Ideenliste können Ideen erfasst und abgespeichert werden. Ideen sind Dinge, die man mit Freunden gerne einmal machen möchte. Ob die Adresse vom Café nebenan, eine lustige Beschäftigung aus der Kindheit, ein spektakulärer, mehrtägiger Ausflug oder etwas ganz alltäglich einfaches; alles kann als Idee abgespeichert werden. «Ideen» sind unterteilt in «meine Ideen» und «Ideen von Freunde». Damit der Benutzer nicht voreingenommen ist, sieht er beim Letzteren nur die Idee, nicht aber deren Autor. Sofern ihm die Idee gefällt, kann er sie durch den Button «verknüpfen» zu seiner Eigenen machen. Das Wort «verknüpfen» ergab sich, weil die Idee weder «geklaut», «kopiert», noch, «geliked» wird, sondern weil wahrhaftig eine Verknüpfung gezogen wird zwischen der Idee und allen Benutzern, die diese Idee bei sich haben wollen. Sobald die Idee eine eigene Idee ist, werden diese Verknüpfungen transparent und die Namen der Freunde sichtbar. Das gibt viel Ansporn, um die Idee mit genau diesen, motivierten Freunden einmal zu planen. Sobald eine Idee von einem Freund verknüpft wird, kann sie weder gelöscht noch bearbeitet werden, denn der Freund mag die Idee genau so wie sie ist. Die Verknüpfung kann jedoch wieder gelöst werden, wenn sie einem nicht mehr gefällt. Nur wenn man der Einzige ist, der eine Idee verknüpft hat, kannst sie gelöscht werden. Durch ständiges Verknüpfen und Verknüpfungen lösen, kann es sein, dass jemand eine eigene Idee verknüpft hat, den man nicht kennt. Es wird dann zwar 0 Verknüpfungen angezeigt, die Idee ist aber trotzdem nicht löschbar. So ist es möglich, dass eine Idee um die ganze Welt geht. Der Name des Autors bleibt aber für Fremde unbekannt.

Angebote

In der Angebotsseite können Freunden konkrete Aktivitätsvorschläge posten. Die Angebote können spontane oder geplante Events sein. Diese können kommentiert werden, was eine einfache Organisation ermöglicht. So wird schnell einen Begleiter für die nächsten Ferien, für ein cooles, langersehntes Konzert, für einen Sportkurs oder für ein gemütliches Feierabendbier gefunden. Die Angebotsseite besteht aus einer Auflistung von Angeboten in Kurzansicht. Ein Klick auf das Listenelement ruft die Detailseite des Angebotes mit den dazugehörigen Kommentaren auf. Damit ein Benutzer mit nur einem Klick seine persönlichen Angeboten ansehen kann, ist die Angebotsseite in «alle Angebote» und «meine Angebote» unterteilt. Eigene Angebote können bearbeitet oder gelöscht werden. Angebote sind zeitlich vergänglich, das heisst, sobald der letzte Kommentar älter ist als zwei Wochen, wird das Angebot unwiderruflich gelöscht. Mit diesem wollen wir zweier Dinge bezwecken: Wir wollen keine Plattform wie Facebook, wo der ganze Lebensverlauf gespeichert ist und wir wollen den Benutzern klar machen, dass ihr Angebot definitiv zu langweilig ist, wenn es nicht kommentiert wird. Angebote können entweder im ganzen Freundeskreis veröffentlich werden, oder nur unter bestimmten Empfänger. Pro Angebot und pro Idee kann ein Foto und ein Standort gespeichert werden. Wir wissen, dass dies mit Sencha Touch zwar nicht möglich ist, hoffen aber noch auf die Findung von Plugins.

Sonstige Features

Auf der Benachrichtigungsseite werden Neuigkeiten zu den Angeboten, Ideen und Freundschaften des Benutzers angezeigt. Dies kann zum Beispiel das Kommentieren eines eigenen Angebotes oder die Verknüpfung einer eigenen Idee sein. Freunde können durch Vorname, Nachname und Username gesucht werden. Letzteres haben wir eingesetzt, damit keine Verwechslungsgefahr bei Gleichnamigen besteht. In der Applikation selbst genügt jedoch die Anzeige des Vornamens mit dem dazugehörigen Icon. Sofern die Person den Freundschaftsanfrage akzeptiert, werden seine Angebote mit deren Kommentare sichtbar, und die Möglichkeit zum Mitdiskutieren besteht. Seine Ideen werden unter «Ideen von Freunden» angezeigt. Natürlich besteht die Möglichkeit, die Benutzerdaten abzuändern oder das Passwort zurückzusetzen, falls dies vergessen geht. Falls ein Benutzer noch Fragen zum Produkt hat, kann er unter dem FAQ-Bereich Antwort finden oder uns über den Impressum-Teil kontaktieren.

Namenwahl

Zu der Konzeptdefinition gehörte auch die Wahl des passenden Produktenamens. Um unser Produkt als «Schweizer Produkt» zu präsentieren, suchten wir nach Namen von Schweizer Orten, Blumen, Berge oder Mundartausdrücke, aber auch nach deutschen und englischen Wörtern und versuchten verschiedene Kombinationen aus. Produktenamen, die uns gefallen haben: Silberdistel, Silberwurz, Gariva, Ceta, Noova, Sovrana, Stuune, ufgweckt, usegoh, abmache, gwundrig, parat, planlos, kickenand, A-Kick, sachepack, achtung-fertig-los, couchpatato, inspiration, wish, boring, visible, freetime, brandings, let‘s go, start it, startkick, experience, storm, activity, move, sociaPlan, insiders, momentSharer, friendstime, timeout, activity, I-used-to-be-a-couchpotatoe, friendspacker, change, memoir, onelife, littleunit, dolittle, littlenu, moment, momentcatcher, wildside, outbook, bundle, Hitzewelle, Schnursenkel, Zündholz, Tapetenwechsel, Atemzug, Schlaraffenland, Zauberhut, Alpha, Lebenswecker, Motivator, proaktiv, Treffpunkt, Fractivate (friends active), Actifri (activefriends), Friki (friendskick) ticktack, cirki (circle kick), soki (social kick), wepack, lifesigner, movity, timit, planit, planity, kaleido creactive.ch, timmo, mojoy, deemove.ch (deepmove), chout.ch (couchout), simoir, semplis, deeplan und enlight. Schlussendlich entschieden wir uns für «Ready», ein Wort, welches unsere Applikation am Besten umschreibt. Denn unsere Applikation macht den User «Ready» um aufzustehen, rauszugehen und coole Dinge zu erleben.

Gesamtauftritt

Nebst der Konzeptdefinition der Webapplikation «Ready» definierten wir den Rundum-Service, welcher Ausstellungsstand, Informationswebsite und Werbefilm beinhaltet.

Ausstellungsstand

Die Ausstellung (1.-15. Juni 2012) an der Zürcher Hochschule der Künste soll die Applikation optimal präsentieren und den Besucher zur Interaktion am Stand auffordern. Es werden zwei 40 Zoll HD Monitore ausgestellt, die mit je einem MacMini verbunden sind, welche die Bildschirminhalte von zwei fest installierten iPod’s synchron übertragen. Das ermöglicht eine Art «Schulterblick» für alle, die kein Smartphone in den Händen halten oder keine Lust haben, die App im Moment herunterzuladen. Für alle andere besteht die Möglichkeit, die App via QR-Code oder Link, welche sich an der Ausstellungswand befinden, zu öffnen und gleich auszuprobieren. Daneben zeigt ein iMac die Informationswebsite mit dem Werbefilm. Durch aufgelegte Visitenkarten möchten wir unseren Kontakt mitgeben. Die Ausstellungswand ist weiss und mit Folie im «Ready»-Look beschriftet. Zwei unserer Personas, Paul und Kira, sind auf der Wand abgebildet mit je einem iPod in der Hand haltend, auf welchen das Programm läuft. Benutzer sollen dadurch zum Interagieren aufgefordert werden und so der Sinn der App besser verstehen. Bei dem Organisieren der technischen Geräte für unseren Stand ergaben sich so einige Probleme. iPhone’s sind sehr schnell, dafür schwierig zu bekommen. Vom ITZ erhielten wir zwei iPod Touch, welche jedoch nicht mit einem Monitor über VGA synchronisierbar sind. Bildschirminhalte aus einzelnen Programmen wie Keynote oder Youtube können zwar übertragen werden, jedoch nicht der ganze iOS Screen. Der Bildschirminhalt eines iPhone’s kann mit VGA auf einen Monitor übertragen werden, je nach Monitor tritt aber das Problem auf, dass der Inhalt nicht um 90° rotiert werden kann, da die Einstelloption fehlt. Mit der Reflection-App kann der Bildschirm über W-LAN auf einen Rechner übertragen werden. Das funktioniert jedoch nur mit iPhone’s. Durch Nachfrage auf Twitter und bei Schulkollegen hat sich eine neue Variante ergeben: Mit Plutinosoft und Screenspliter ist es möglich, die iPod’s an einen Rechner anzuhängen und diese mit den Monitoren zu synchronisieren. Dafür muss der iPod «gejailbreakt» werden und der Kauf einer kostenpflichtigen Software ist nötig. Schlussendlich funktionierte die Synchronisation iPod Touch - Mac Mini – Monitor. Die Geschwindigkeit des iPod’s lässt zwar zu wünschen übrig, eine andere Variante kam aber nicht in Frage, da keine iPhone 4S besorgt werden konnten. Für die Sicherung der Geräte fanden wir den Anbieter «Secplus», wessen Sicherungskabel die iPods auch nach Montage noch gut bewegen sind.

Informationswebsite

Für den ganzen Service kreierten wir eine Website, die dem Benutzer Informatives zur mobilen Webapplikation gibt und ihn auffordert, die App runter zu laden. Die Website enthält ein iPhone, welches fünf Ansichten aus unserer App abwechselnd anzeigt. Dies wie auch der anliegende, grosse «hol-dir-die-App»-Button, soll dem Benutzer das «Downloaden» schmackhaft machen. Ebenfalls gibt es ein Formular, wo Besucher ihr Feedback an uns senden können. Die Gestaltung und die darin enthaltenen Features entwickelten sich durch Untersuchungen von anderen Vermarktungsseiten, wie zum Beispiel die Websites von «Path», «What’s App», «Inkfinder» oder «Omnigroup».

Werbefilm

Mit Hilfe eines «Storyboards» zeigten wir die Geschichte des Werbefilms in zeitlichem Ablauf auf. Weil wir noch nie einen solch detaillierten Film entwickelt haben, vergassen wie das anfängliche Definieren genauer Animationen, was die ganze Produktion des Films verzögerte.  Um die Animationen schlussendlich umsetzten, mussten wir mehrere Stunden den Gang von Mensch und Tier analysieren. Bei der Verfilmung von Hand und iPhone entstanden viele Probleme. Da kein Greenscreen zu Verfügung stand,  beschäftigen wir uns lange Zeit mit dem richtigen Ausleuchten des Raumes und mussten lernen, die Hand richtigen zu bewegen, damit die Nachbearbeitung einfacher fällt. Der Inhalt des iPhones musste stetig angepasst werden, was ebenfalls Zeitaufwändig war. Da uns der textliche Inhalt sehr wichtig, organisieren wir einen professionellen Sprecher. Als Hintergrundmusik entschieden wir uns für einen positiven Sound, welcher eigener Stil mit sich bringt und nicht ablenkend wirkt. Die Musik soll fröhlich und unbeschwert daherkommen. Schlussendlich fügten wir Animation, reale Filmsequenzen, Musik, Soundeffekte und Sprecher zu einem Ganzen zusammen. Wegen technischen Problemen stürze uns das Programm «After Effects» oftmals ab, war uns enorm viel Zeit raubte.

Grafik

Erste Entwürfe

Bei der visuellen Erscheinung der Applikation konnten wir vom zuvor erarbeiteten Wireframe ausgehen, hatten aber trotzdem so unsere Startschwierigkeiten, was uns einige Zeit raubte. Wir haben unzählige Entwürfe erstellt, konnten uns aber nicht richtig festlegen wie das Ganze wirklich aussehen soll. Schliesslich legten wir das Ganze mal zur Seite und definierten nochmals ganz klar, welche Zielgruppe wir mit der App ansprechen möchten und wie die App wirken soll.

Moodboard und Gestaltungskonzept

Wir haben uns ein Moodboard von bestehenden Applikationen, Webdesigns und anderen Designprojekten zusammengestellt, um zu definieren, wie unsere Applikation aussehen soll. Unsere App gibt einem den Kick, um rauszugehen. Darum soll sie sportlich wirken und zum aktiv sein auffordern. Sie soll sich von anderen Applikationen abheben und einen grossen Wiedererkennungswert haben.

Schrift

Damit die Umsetzung mit Webtechnologie realistisch ist, wir uns aber trotzdem nicht auf Systemschriften einschränken wollten, haben wir uns entschieden mit den Google Webfonts zu arbeiten. Die Gestaltung ist auf zwei Schriften beschränkt. Einerseits verwenden wir die handschriftliche Cedarville um Elemente wie Benutzername auszuzeichnen. Andererseits benutzen wir die Oswald in den Schnitten Light, Regular und Bold.

Farben

Vom Konzept her benötigten wir zwei markante Farben, um die beiden Bereiche Angebote und Ideen klar zu unterscheiden. Wir entschieden uns für ein intensives Cyan und ein knalliges Rot. Das Cyan steht für die Ideen die gesammelt werden. Das auffällige Rot haben wir gewählt, das diese Farbe für Angebote verwendet wird. Angebote sind aktiv, aktuell und sollen auf sich aufmerksam.

Icons

Unsere App soll es nicht anbieten, sich ein Profil zu erstellen um sich selbst darzustellen. Aus diesem Grund haben wir uns dazu entschieden, keine Profilbilder zu verwenden. Am Workshop haben wir festgestellt, dass wir jeden unserer Freunde anhand von einem Symbol erkennen können. Somit entwickelten wir für jeden ein passendes Icon. Ein Flugzeug für die Aviatikstudentin, ein Velo für den Profisportler, eine Trommel für den Freizeitmusiker. Für jeden gibt es das passende Symbol. Die Icons geben der Applikation das gewisse Etwas und lenken nicht vom eigentlichen Inhalt ab. Designspezifikation für die Programmierung.

Programmierung

Ein gut gegliederter Programmierungsablauf ermöglichte uns, alle unsere definierten Ziele zu erreichen. Dies beinhaltete «Registration und Login», «Erstellung von Angeboten und Ideen», «Verknüpfung und Auflösung von Ideen», «Kommentieren der Angebote», «Hinzufügen und Löschen von Freunden» und «automatische Freundschaft mit iPod 1 und 2». Die zwei iPods-Accounts definieren den Testinhalt unserer Applikation, damit bereits nach Registration Inhalt vorhanden ist. Eine Visualisierung aller Ansichten des Programms mit den darin vorkommenden «Call-to-Actions», liess uns den ganzen Programmierungsumfang abschätzen und die Zeit entsprechend einzuteilen. Zu den Vorarbeiten gehörte auch die Aufzeichnung der Backendfunktionen, welche im Laufe des Projektes angepasst wurden, und die Visualisierung der Datenbank, sprich, ein ERD. Die gute Dokumentation von Sencha Touch verhalf uns zu einem guten Einstieg in die Programmierung und liess das Framework verständlich werden. Sencha Touch bildet das Frontend der Applikation, was so viel heisst wie «alles was man in der Applikation sieht und interagieren kann». Bei technischen Fragen bezüglich Backend durften wir uns an Michael Bischoff wenden, welcher ein ausserordentlich guter Programmierer ist. Zusammen mit ihm entwickelten wir das Backendkonzept, welches reinen PHP-Code und eine saubere API-Schnittstelle und ein tägliches Backup beinhaltet. Das Backend nimmt Anfragen aus Sencha entgegen, liest Daten aus der angehängten Mysql-Datenbank und sendet diese zurück an Sencha Touch. Die Verbindung zwischen Frontend und Backend läuft über eine sogenannte Json-Schnittstelle. Als Backup-Programm setzten wir «Versions» ein. Sencha Touch besteht aus «Views», welche die Seitenelemente beinhaltet, aus «Controllers», welche die Aktionen der Elemente steuern, aus «Stores» welche Daten aus dem Backend empfangen und aus «Modellen», welche jedoch nicht zum Einsatz kamen. Wir entwickelten Frontend und Backend gleichzeitig, damit wir das Wichtigste zuerst umsetzen können und am Ende Elemente haben, welche funktionieren und nicht nur schön aussehen. Damit wir unabhängig vom Internet sind und das CSS-Stylesheet mit Compass und Sass generieren können, fand die Entwicklung lokal auf dem Rechner statt. Dazu gehört die Nutzung des «Mamp-Servers» und das Einrichten einer lokalen MSQL-Datenbank, auf welche gut durch das Programm «Sequel Pro» zugegriffen werden konnte. Mit der aktuellen IP-Adresse des lokalen Servers und der Portangabe, konnte die App (sofern sie mit dem gleichen Wireless verbunden war) über den Smartphone-Browser aufgerufen werden. Um Aussenstehenden Zugriff auf den Code zu geben, eröffneten wir ein Tunnel mit dem Programm «pageKit». Für die Evaluationsphase luden wir das kompilierte Programm aber auf einen Webserver. So schafften wir eine Entwicklungsumgebung und eine Testumgebung.

Schlussfolgerung

Im Designprozesse definierten wir Konzept und Grafik, erstellten den Prototypen und liessen die Evaluation miteinfliessen. Nebst der Webapp entwickelten wir ein Verkaufskonzept, welches Ausstellungsstand, Werbewebsite und Werbevideo beinhaltet. Unsere Applikation nennt sich «Ready-App» und ist auf den Freundeskreis massgeschneidert. Damit die Benutzung für jeden klar ist, ist die Applikation einfach und banal gehalten. «Ready» befindet sich weiterhin in der Testphase und wird von unseren Freunden genutzt. Der ganze Designprozess war sehr interessant und hat uns beiden viel Neues gezeigt und gelernt. Prototype Iteration als PDF downloaden