Talks - App Prototyping mit Framer.js

Talks ist eine App für wissbegierige, die gerne Expertentalks besuchen, aber nicht wissen, wo sie nach diesen suchen sollen. Die zu entdeckenden Themen sind in den Bereichen Design, Innovation, Technologie, Business, Kultur, Kunst und vielen weiteren Bereichen angesiedelt. Dabei greift die App auf große Veranstaltungsplattformen wie »TED« oder »Typo Talks« zu, bettet jedoch auch kleinere lokale Events und Veranstaltungen in die App ein.

Video des Prototypen

Der Kurs

Die App entstand im Rahmen des Kurses »Software Interfaces« von Pierre La Baume. Wir sollten eine Veranstaltungsapp entwerfen und diese anschließend mit dem Prototyping Tool Framer Studio programmieren. Framer.js, die Programmiersprache in Framer Studio, ist eine Javascript Library, mit Hilfe von der sich mit wenigen Zeilen Animationen und komplexere App-Prototypen aufbauen lassen. Im Verlauf des Kurses wurden uns die Grundlagen zur Realisierung eines Konzepts bis zum interaktiven Prototypen vorgestellt und beleuchtet. Dafür wurden uns neben Framer Studio auch andere Prototyping Tools vorgestellt, und deren Vor- und Nachteile beleuchtet. Außerdem gab es auch viel theoretischen Input in Form von Referaten, und nicht zuletzt konnte Pierre auch viel wertvolle persönliche Erfahrung mit in den Kurs einbringen.

Veranstaltungen gibt es viele - Nur welche?

Gibt man in den Appstore den Suchbegriff »Veranstaltungen« ein, findet man eine Bandbreite unterschiedlichster Veranstaltungs-Apps. Ein großer Teil davon sind Club- oder Konzertguides dicht gefolgt von Kulturveranstaltungs-, CityGuides und Kinozeitplänen. Außerdem gibt es unzählige Apps wie »VAMOS« , die versuchen mehrere Eventkategorien in sich zu vereinen. Mir erschien es wenig sinnvoll erneut eine dieser Kategorien abzudecken. Ich überlegte daraufhin lange, welche Veranstaltungskategorie mich interessiert, bei der ich mir eine App wünschen würde.
Ich bin ein sehr großer Fan von Plattformen wie TED oder TYPOTALKS, und schaue mir auf den Onlineplattformen regelmäßig Videos von interessanten Talks an. Ich halte Veranstaltungen dieser Art für sehr wichtig, da diese den eigenen Wissens-Horizont erweitern, und einem Expertenwissen vermitteln, an das man sonst im Internet oder Lektüren nur schwer und sehr aufwendig kommt. Gleichzeitig bieten solche Events eine Bühne für Designer, Wissenschaftler und Experten aus anderen Disziplinen. Auf den Veranstaltungen findet man Gleichgesinnte, die sich mit den gleichen, ähnlichen oder ganz neuen Themen auseinandersetzen. Leider gibt es derzeit keine zentrale Anlaufstelle für derartige Events, wodurch man häufig attraktive Events verpasst. Der Ansatz gefiel mir sehr gut, und ich entschied mich kurzerhand eine App als zentrale Anlaufstelle zu entwerfen.

Themen der Talks Anfangs dachte ich, ich würde die App für Designkonferenzen und Talks zuschneiden, mit der Zeit wurde mir jedoch bewusst, dass es gerade für Designer wichtig und interessant ist, in andere Disziplinen Einblick zu erhalten, und sich mit diesen auszutauschen. Ich übernahm also das Grundkonzept von TED, und erweiterte dies lediglich durch zusätzliche Veranstalter.

Wer sollte meine App benutzen? - Analyse der Zielgruppe

Um aus einem Konzept ein gutes und erfolgreiches Ergebnis zu machen, ist es sinnvoll vorerst eine Zielgruppenanalyse zu betreiben. Damit wird der Rahmen der zu befriedigenden Personen abgesteckt, und es kann gezielter an Wirkung auf und Kommunikation mit dem Benutzer gearbeitet werden. Die Zielgruppe für eine solche App zu kreieren stellte sich als ziemlich schwierig heraus. Ich konnte und wollte eigentlich auch keinen Archetypen eines Benutzers erstellen. Nach langem Überlegen sind mir doch einige Eigenschaften aufgefallen, die auf die meisten Personen der Zielgruppe zutreffen: - wissbegierig - gebildet - weltoffen - selbst in einer oder mehrerer der angebotenen Disziplinen tätig oder zumindest belesen - intellektuell

Aus diesen Eigenschaften entstand meine erste Persona, Clara Zenoe:

Die Hauptzielgruppe solcher Events sind junge oder im Kopf jung gebliebene, begeisterte, Wissbegierige. Viele von ihnen sind selbst Experten in einer der angebotenen Disziplinen.

Eine der Zielgruppen für diese Art von Events sind Journalisten. Es gehört zu ihrem Beruf neuesten Entwicklungen mitzubekommen und für das Publikum greifbar zu beschreiben.

Neben Zuhörern und Journalisten besuchen häufig auch Investoren, Firmenchefs oder hochrangige Firmenmitglieder solche Veranstaltungen. Für sie ist es wichtig aktuelle Entwicklungen mitzubekommen, um diese beispielsweise in ihre Produkte zu integrieren. Außerdem bieten diese Events eine Menge an potentem Publikum, das gegebenenfalls für die eigenen Interessen gewonnen werden kann.

Die Merkmale, die aus den Personas für die App entstand waren: - frei wählbarer Radius der Suchergebnisse (große Bandbreite an Reisebereitschaft) - suchen innerhalb bestimmter Kategorien und Empfehlungen mit Notification - Möglichkeit, die Tickets direkt über die App zu kaufen

Im Entstehungsprozess entstanden weitere: - favorisierbare Kategorien und Möglichkeit persönliche Interessen in die Suchergebnisse einfließen zu lassen - Suche nach Künstlern/Rednern/Artists, und die Möglichkeit bestimmte zu favorisieren. Findet ein Vortrag von favorisierten Künstlern in der Nähe statt, erhält man eine Nachricht.

Skizzen des Entstehungsprozesses

Zwischenstand im Dezember

Bildschirmfoto 2016-03-14 um 18.03.18.png

Finaler Entwurf

Die App - Schritt für Schritt erklärt

Beim ersten Start wird der Begrüßungsscreen eingeblendet, an dessen Ende der Benutzer seine Interessen angeben kann. Diese werden in einen Algorithmus eingespeist, der den Content an den Nutzer anpasst. So bekommt jeder die Suchergebnisse, die er sich wünscht.

Sucht man nach einem Ereignis in einem bestimmten Radius, lässt sich dieser einfach und schnell einstellen. Man erhält dabei nicht nur numerisches Feedback, sondern kann erhält durch die Karte zusätzlich eine bildliche Vorstellung des eingestellten Radius.

Wurde ein interessantes Event gefunden, lassen sich die Details, sowie die vorgetragenen Themen im dazugehörigen Artikel nachlesen. Gefällt es, kann es von dort aus direkt gemerkt oder bei Bedarf auch gekauft werden.

Die App bietet unterschiedliche Sortier- und Suchmöglichkeiten. Die unterschiedlichen Sortierungen lassen sich über die Tab Bar schnell und einfach erreichen.

Talks selbst ausprobieren Unter diesem Link kannst du Talks selbst ausprobieren. Für ein optimales Ergebnis benötigst du Safari.

[http://share.framerjs.com/xknc8xflcixr/](http://share.framerjs.com/xknc8xflcixr/ „http://share.framerjs.com/xknc8xflcixr/“)

Fazit

Mit dem Kurs und meinem Ergebnis bin ich sehr zufrieden. Ich habe viel gelernt, und auch wenn ich die ein oder andere Nacht verzweifelt an einem Problem saß, so hat es auch wirklich immer viel Spaß gemacht. Vielen Dank an dieser Stelle noch einmal an Pierre La Baume, der uns immer gutes Feedback gegeben hat, womit er maßgeblich zu meinem Ergebnis beigetragen hat. Im Kurs war immer eine coole lockere Stimmung und ich habe mich immer wohl gefühlt. Neben den vielen erlernten Tools und Coffeescript wurde in diesem Kurs auch viel nützliches über Präsentationen vor Kunden, Research, Ideenfindung und den kompletten Prozess des App-Prototying gelehrt.

sonstige Verwendung von Framer Studio

Parallel zu diesem Kurs konnten wir im Rahmen des »Siemens Future-Appliences Award« erneut Gebrauch von Framer Studio machen.

Das Interface unseres Prototypen »Pai« wurde komplett mit Framer Studio programmiert, und ich denke es war nicht das letzte Mal, dass ich von Framer Gebrauch mache. Es besticht durch seine Einfachheit, und ich kann es nur jedem empfehlen, der etwas umfangreicheres Prototyping machen möchte.

Bei Interesse hier der Link zum Video: [https://vimeo.com/155359097](https://vimeo.com/155359097 „https://vimeo.com/155359097“) Passwort des Videos: pai