Konzept mit Screenflow & Wireframes

Transkript

1 Konzept mit Screenflow & Wireframes Social Wall Themenkampagne 05. September 04

2 Wireframes (Screenflow und User Journey durch die Social Wall keine Designs)

3 Seitenaufbau und Elemente der Social Wall (One-Page-Ansatz) Menüleiste Filter, Ansichten, Link zur DZT KampagnenWebseite und DZT-Logo. Kampagnen Titel Per Klick auf das Map-Icon öffnet sich die Kartenansicht (siehe Seite 7). DZT-Blogger Social-Sharing via Google+, Facebook, Twitter, Gekachelte Anzeige des Content-Stream mit: Social-Media-Content DZT-Partner Ads Call-to-Action, DZT-Teaser Key-Visual mit Call-To-Action Die Social Wall ist chronologisch und zeigt Content-Einträge: - Blog-Einträge von der DZT-HotSpots-Seite oder den Blogs der Blogger, - Facebook-Posts, - Videos oder - Bilder von Instagram, dann eine DZT-Partner Ad, dann weitere Einträge, usw. So entsteht eine kontinuierliche Social Wall mit Themen rund um die Kampagne. Hinweis: Die Darstellungs-Logik ist im Rahmen des IT-Konzepts zu klären. Die Seite ist nach unten scrollbar und zeigt initial die ersten 50 Einträge. Über einen mehr Link können dann die nächsten Einträge nachgeladen werden. weitere DZT-Teaser Weitere DZT-Teaser (Kuckucksuhr & Hirsch) mit Call-To-Action und Verlinkungen auf die DZT-Kampagnen Webseite

4 4 Inhalte der Social Wall filtern Filter Klick auf Schaltfläche Filter öffnet die Filteransicht Die Filteransicht zeigt die verfügbaren Kategorien, Orte, Sprachen und Blogger der Kampagne. Beim Aktivieren von Filtern werden die Inhalte der Social Wall live aktualisiert und neu angeordnet (evtl. mit Animation der Neuanordnung). Im Feld Suchen kann nach möglichen #Hashtags und beliebigem Freitext gesucht werden. Auch hier wird die Wall live aktualisiert. Sprach-Filter Content-Einträge Der Sprachfilter bezieht sich auf die ContentEinträge der Social Wall. Standardmäßig werden hier Einträge aller Sprachen angezeigt, der Nutzer kann hier auf eine bestimmte Sprache einschränken. (Techn. Hinweis: entsprechende Language Detection erforderlich, oder: die von der DZT engagierten Blogger werden im Backend direkt den einzelnen Sprachen zugeordnet, in denen sie ihre Blog-Einträge verfassen.)

5 5 Blogger-Profile betrachten Blogger-Profile (Popover) Klick auf Profilbild öffnet Blogger-Profil, weitere Blogger-Profile können über mehr aufgerufen und angezeigt werden

6 6 Der Detail-Dialog Social-Sharing Dialog schließen Per Klick auf das twitter, google+ oder Facebook Icon öffnet sich ein Dialog in dem der Benutzer sich bei der entsprechenden Plattform anmelden kann um diesen Beitrag zu kommentieren, zu liken, usw Klickt der Benutzer auf das Icon, öffnet sich ein Dialog mit der Möglichkeit einen Link auf diesen Beitrag per zu versenden. Blogger Visitenkarte des Blogger. Hinweis: Inhalte (Visitenkarte und Bloginhalt) können von dem Blog des Bloggers stammen, oder alternativ auch von der HotSpots-Seite. Bild / Video Inhalt Um den Aufwand, sowohl technisch als auch administrativ zu minimieren, wäre eine Vereinheitlichung sicher empfehlenswert.

7 Die Karten-Ansicht 7 Aggregierte Kartenansicht (exemplarisch) Posts werden gruppiert nach regionalen Hashtags (z.b. #Allgäu, #München, #Hamburg, ) dargestellt, und innerhalb dessen nach Themen-Tags wie #Festivals, #Events, #Tradition, #Culinary,. Posts mit Geo-Location-Data werden automatisch in die entsprechenden Regionen eingruppiert (technische Realisierung im techn. Detailkonzept zu prüfen). Klick auf eine Region führt zurück zur dann gefilterten Social Wall, s.o. Farbschema Design-Anmerkung: Evtl. ist es hier sinnvoll, ein einheitliches Farbschema (ähnl. Youth Hotspots ) zur thematischen Kategorisierung aller Social- Media-Posts einzuführen.

8 Responsive Umsetzung zur Abdeckung aller gebräuchlichen Geräteklassen (Desktop, Tablet, Mini-Tablet, Smartphone)

9 Technologie Übersicht, Grob-Konzept, technische Mindest-Anforderungen

10 Übersicht: Vom Travel-Blogger zum aggregierten DZT Social Wall Blogger. Content Collector. schreiben Beiträge entweder auf der Hotspots-Seite oder dem eigenen Blog, mit dem Kampagnen-Hashtag #JoinGermanTradition sammelt Daten aus den unterschiedlichen Medien über die offiziellen Service-APIs und speichert diese dann in der ContentDatenbank. Zusätzlich können weitere vordefinierte Hashtags verwendet werden: Location-Tags: z.b. #Hamburg, #Berlin, #Allgäu, Themen-Tags: z.b. #Festivals, #Events, #Tradition, #Culinary, Über diese Hashtags können die Inhalte dann zielgerecht klassifiziert und auch regional gruppiert, z.b. auf der Karte, angezeigt werden. Beiträge werden auf unterschiedlichen Medien veröffentlicht: Facebook twitter Instagram YouTube DZT-Hotspot-Blog Alternativ kann ein übergreifender Service, wie z.b. Storify genutzt werden. Storify bündelt die einzelnen Service-APIs und stellt eine gemeinsame Schnittstelle zur Verfügung. Zusätzliche Inhalte. Über eine Administrationsoberfläche können ergänzende Inhalte hinzugefügt und verwaltet werden. DZT Partner Ads (alternativ via DZT Ad-Server) DZT Teaser mit Links auf germany.travel Visitenkarten / Profile der Blogger Steuerung der Anzeige-Logik im Stream (Was wird wann und wo angezeigt) Freigabe-Prozess von Inhalten 4 Content Provider 4. stellt die gesammelten Daten über eine REST-API zu Verfügung. 5 Social Wall (responsive) 5. Die Webseite der Social Wall stellt diese Daten dann für die unterschiedlichen Geräteklassen (Desktop, Tablet, Smartphone) zur Verfügung. 0

11 Übersicht der Systemkomponenten und Nutzer-Rollen Blogs on Website Controller (Frontend) 5 Professional Blogger Tags: #joingermantradition Location-Tags: (from predefined List) #Berlin, Category Tags: (from predefined List) #Tradition, Language Tags: (from predefined List) #german, Content Collector Access via Service / existing API REST API Content Provider 4 Filter: Category Location Blogger Language Fulltext search Website Visitor System Components Overview Content Database Update Content Database Fulltext Searchengine Additional Content DZT Partner AD DZT Teaser Visitenkarte Blogger Site Administration

12 Übersicht Content Collector Technische Mindest-Bestandteile Import der Blogbeiträge zu #JoinGermanTradition in regelmäßigen, kurzen Zyklen Transformation / Bearbeitung von binärem Content (Bilder) Extrahieren weiterer Tags / Keywords Youth HotSpots API Social Media API s Sprache des Blogbeitrags erkennen (im Rahmen eines techn. Detailkonzepts zu klären) Indizierung für performante Volltextsuche SMM Service Persistierung in Content-Datenbank Bereitstellung des Content für Anzeige Get Content with #joingermantradition Image processings crop, transform, resize, Image Handler Content Manager Content Database Text Handler Text processings extract Tags, Keywords, Indexing Technologie-Empfehlungen Wir empfehlen einen Ansatz basierend auf RESTful APIs, um die verschiedenen beteiligten externen Web Services, wie auch die DZT-eigene HotSpots-Seite gut integrieren zu können. Da das Projekt sehr inhaltsgetrieben ist, empfehlen wir zur Persistierung die NoSQL- Datenbank mongodb. Für die Volltextsuche in allen Content-Einträgen (s.s. 4) empfehlen wir Elasticsearch. Für die Realisierung des Front-Ends empfehlen wir einen Ansatz basierend auf AngularJS und Bootstrap, als Programmiersprache des Back-End eignen sich in diesem Szenario Java oder Javascript besonders. Alle genannten Technologien sind Open Source und grundsätzlich lizenzkostenfrei verfügbar.