JP│KOM News-Service 1/16: Die neue JP│KOM Website

JP│KOM News-Service 1/16: Die neue JP│KOM Website
DIE NEUE JP | KOM WEBSITE „Die Agentur der Zukunft“ – mit Storytelling im Web den Internetauftritt zum Erlebnis machen NEWS-SERVICE Ausgabe #01 | Januar 2016 7 9 12 NEUPOSITIONIERUNG DER AGENTUR JP | KOM stellt sich neu auf. Wie sieht das neue Portfolio aus – und was haben unsere Kunden davon? GESCHICHTEN AUS DER FINGERSPITZE Vom Storytelling zum Scrollytelling: Mit langen, multimedial aufbereiteten Seiten zum Scrollen werden Websites zum einprägsamen Nutzererlebnis. PROJEKTTAGEBUCH: WAS DIE TOOLBOX NICHT VERRÄT Mit den richtigen Tools Schritt für Schritt zur neuen Website. So ist der neue Internetauftritt von JP | KOM entstanden.
Die Zukunft kann man nicht fotografieren – man muss sie sich vorstellen. Wir als JP | KOM haben den Anspruch, die Zukunft der Kommunikation mitzugestalten. Da sind Phantasie und Ideen gefragt. Der Anspruch. Veränderungskommunikation, Kommunikationsmanagement und -controlling („Wertschöpfung durch Kommunikation“), digitale Unternehmenskommunikation, Organisationsentwicklung der Kommunikation, Portfoliomanagement der Kommunikations aktivitäten: JP | KOM gehörte in den vergangenen 15 Jahren zu den Trendsettern in Strategie und Implementierung der Unter nehmenskommunikation. Davon zeugen auch die Bücher und zahllosen weiteren Veröffent lichungen. Die Marke. „Die besten Stories in modernen, attraktiven Medien – entwickelt und realisiert mit Management-Tools“. Das bisherige Leistungsversprechen von JP | KOM reicht angesichts der digitalen Transformation nicht mehr aus. Das Markensymbol „Das rote Sofa“ und die Meereswellen in den Abbildungen standen für Dialog, die Heritage und die Vitalität der Veränderung – zweifellos wichtige Werte, doch wie attraktiv sind sie noch für Kunden und Mitarbeiter von heute? JP | KOM tritt nun mit dem Anspruch auf, „Die Agentur der Zukunft“ zu sein – entsprechend verbindet sich künftig das Veränderungsmotiv mit digitalen Signalen und einem loftigen postmodernen Ambiente/Lifestyle. Das Portfolio. In 22 Jahren JP | KOM wurde das Leistungsangebot ständig erweitert – und unübersichtlich. Das neue Portfolio lässt wieder erkennen, worum es unseren Kunden mehr denn je geht: „Strategie – Content – Medien“. Die Website führt vor, wie digitale Kommuni kation in den Geschäftsprozess eingelassen ist – so sehen künftige Geschäftsmodelle von Agenturen aus: Nur über die Aktivitäten zu sprechen, reicht nicht mehr aus, wenn Kom munikation zur zentralen Komponente der Wertschöpfung wird. Die Methoden. Wettbewerb um Aufmerk- samkeit und Reaktanz vs. Belehrungen. Im Web muss es schnell gehen, und es muss unterhaltsam sein. Deshalb erzählen wir jetzt absichtsvoll Geschichten. Und wir öffnen uns in vier Blogs tagtäglich der Diskussion. Das Wichtigste jedoch – noch mehr als bisher – sind die Bilder, die Inszenierung der Leistung. So könnte die Agentur der Zukunft aussehen. Das könnte sie machen. Und diese Mitarbeiter arbeiten schon jetzt dort. Wir laden Sie ein, bei uns auf Entdeckungsreise zu gehen. Die Agentur der Zukunft „Digitale Transformation“: Die Zukunft der Kommunikation wird tiefer in Unternehmen hineinwirken. Jörg Pfannenberg Geschäftsführer JP | KOM News-Service # 01 | Januar 2016 2
Inhaltsverzeichnis Kontakt Drucken Nützliche Links Zurück zur ÜbersichtVideo JP | KOM News-Service # 01 | Januar 2016 Ansicht vergrößern 3 NEUPOSITIONIERUNG VON JP | KOM JP | KOM stellt sich neu auf. Wie sieht das neue Port folio aus – und was haben unsere Kunden davon? 7 STORYTELLING IM WEB Der neue JP KOM Look: Mit Geschichten und Anekdoten erleben die Nutzer eine digitale Entdeckungsreise durch die „Agentur der Zukunft“. 4 IDEEN WERDEN WIRKLICHKEIT „Augmented-Reality“ – das visuelle Konzept hinter dem neuen Internetauftritt von JP | KOM: Was steckt hinter der Ästhetik des modernen Webdesigns und wie wurde es konkret umgesetzt? 16 GESTALTUNGSTREND SCROLLYTELLING Scrollytelling bricht mit alten Regeln der Website-Nutzung: konzeptionelle und gestalterische Grundregeln für ein neues, einprägsames Nutzererlebnis. 9 SCHRITT FÜR SCHRITT ZUR NEUEN WEBSITE Projekttagebuch: Ein Website-Relaunch erfordert Ausdauer – und die richtigen Tools. Wie sahen die zentralen Entscheidungen aus, gab es kritische Pfade und was waren die wichtigsten Learnings? 12
Es heißt, die Düsseldorfer Schwanenhöfe waren die erste Waschmittelfabrik Europas. 1897 begann hier die Produktion von „Dr. Thompson’s Seifenpulver Marke Schwan“, einem der ersten Markenartikel in Deutschland. Rund 30 Jahre später wurde das Werk von Henkel übernommen, die Marke „Schwan“ lebte lange weiter. 2005 endete die Produktion und das Gelände verfiel in einen Dornröschenschlaf. Wachge- küsst wurde es im Jahr 2010 von einem wagemutigen Architektenbüro. Heute sind die Schwanenhöfe in Flingern-Süd ein Campus mit Ateliers und Werkstätten, Restaurants, Agenturen und Heimat einer der führenden Business Schools Deutschlands. […] So beginnt die Reise auf der neuen Website von JP | KOM. Mit Geschichten und Anekdoten führt die Webpräsenz seit Mitte Januar durch die „Agentur der Zukunft“, zeigt wer wir sind, wofür wir stehen und wie wir arbeiten. Im Kern: schlank und flexibel Von der ersten Idee bis zum Relaunch vergin- gen nur sechs Monate – dank schlankem Projektsetups. Das Ergebnis kann sich sehen lassen: modernes Webdesign, das statt auf eine komplexe Seitenstruktur und Navigation auf lediglich vier Scroll-Seiten setzt. Die Longpager präsentieren den Kern von JP | KOM: Agentur, Leistungen, Wissen, und Karriere. DIE NEUE WEBSITE VON JP | KOM JP | KOM begleitet seine Kunden bei der digitalen Transformation der Unternehmenskommunikation. Nun legt sich die Agentur endlich selbst den passenden Look zu. Das Konzept der neuen Website: Scrollytelling. Storytelling im Web JP | KOM News-Service # 01 | Januar 2016 4
JP | KOM News-Service # 01 | Januar 2016 5 Agentur. In einem People’s Business geht es um die Köpfe. Die Werte der Agentur, ihre Geschäftsführer und Mitarbeiter erhalten deshalb ihre eigene „Bühne“, inklusive Blog. Und keine Sorge, die meistgeklickte Seite – unsere Spaß-Fotos – bleiben erhalten. Hier finden Sie den Longpager www.jp-kom.de/agentur Alle Longpager im Überblick
Alle vier Rubriken enthalten regelmäßig aktualisierte Beiträge im CEO-Blog im Bereich Agentur, im Fach-Blog, im News-Blog im Bereich Wissen und im Junioren-Blog. Klare Führung statt bunter Auswahl Der User wird linear durch die Seiten geführt. Die vereinfachte Navigation mit dem Scroll- Rad ermöglicht ihm, jederzeit zu verweilen oder tiefer einzusteigen. Die „Tour“ öffnet Raum für Erzählstrukturen. Das „Scrollytelling“ lädt die Informationen emotional auf, macht Fakten durch erzählten Content und Beispiele relevant. An die Stelle typischer Teaser-Texte tritt ein multimedialer Erzählstrang, der Storys mit Bildern, Illustratio- nen und weiterführenden Links verwebt. Blaupause für die digitale Erlebniswelt Das modernisierte, visuelle Erscheinungsbild macht vor keinem der bekannten JP | KOM Eigenmedien halt. Mit der Website als Blaupause hat auch dieser News-Service eine Auffrischung erfahren. Die Bildwelt, die Social Media Kanäle, letztlich sogar die E-Mail-Signaturen von JP | KOM werden folgen. Passend zu jedem Endgerät Als JP | KOM vor fünf Jahren den letzten Relaunch seiner Website hatte, ahnten viele schon, dass es die letzte Desktop- orientierte Seite sein würde. Morgan Stanley hatte 2010 prognostiziert, dass es ab 2014 mehr mobile als stationäre Internet-Nutzer geben wird. Im Mai des vergangenen Jahres kam erstmals die Mehrheit der Google-Suchanfragen von Tablets und Smartphones. Inzwischen ist die Diskussion „Desktop vs. Mobile“ längst keine mehr. Von 3,5 bis über 18 Zoll muss alles mitgedacht und bedient werden. Für die neue responsive Website von JP | KOM stellt das kein Problem dar: Sie passt auf nahezu jedes Endgerät – außer auf Papier. Zur Erinnerung: So sah sie aus – die letzte Desktop-orientierte Startseite von JP | KOM. JP | KOM News-Service # 01 | Januar 2016 6
JP | KOM: Die Agentur der Zukunft Von Attila Söder und Jörg Pfannenberg NEUPOSITIONIERUNG DER AGENTUR JP | KOM positioniert sich neu im Markt. Das Portfolio konzentriert sich auf die drei Felder Strategie, Content und Medien. JP | KOM News-Service # 01 | Januar 2016 7
Zuletzt wurden die Diskrepanzen in den Präsentationen immer größer: Zwischen medialem Feuerwerk tauchten ruhige Ozean bilder auf. Das bekannte, gehobene, gesetzte Erscheinungsbild von JP | KOM passte nicht mehr so recht zu den emotionsorientier- ten Leistungen, die die Agentur verkauft. Zwischen mittelständischen und großen Netzwerk-Agenturen, Change-Beratung und digitaler Avantgarde war das Profil von JP | KOM zunehmend unscharf geworden. Die Analyse der relevanten Segmente im Agenturmarkt zeigte gleich eine deutliche Bedarfslücke: die Kombination von strategischer Beratung, digitalen Medien und innovativem Content. Was muss die „Agentur der Zukunft“ bieten? Wie kann JP | KOM diese Lücke füllen? Neues Portfolio trifft den Markt Digitale Leistungen sind längst in allen Bera- tungsfeldern integriert. Bei der Entwicklung des neuen Portfolios stand deshalb fest: Die Digital-Angebote mit einer eigenen Marke auszuweisen, ist künftig nicht mehr notwendig. Im Markenauftritt konzentriert sich die Agentur künftig auf die Hauptmarke JP | KOM. Die neue Portfolio-Struktur soll dabei stärker an den Bedarfen heutiger Unternehmen ausgerichtet sein. Strategie. JP | KOM begleitet seine Kunden durch alle Aufgaben der Kommunikation, beginnend beim Aufbau der Unternehmens- kommunikation über Veränderungssituatio- nen und komplexe Themenfelder bis hin zur digitalen Transformation. Content. Storytelling ist der Königsweg, um Botschaften zu vermitteln. Texter und Grafik-Designer arbeiten bei JP | KOM Hand in Hand, um komplexe Inhalte in bewegende Geschichten, ausdrucksstarke Formate und digitale Kampagnen zu verwandeln. Medien. Unternehmen sind heute immer auch Medienproduzenten. JP | KOM entwickelt hochwertige Medien für alle Kanäle – von Webseiten und Apps bis zu klassischen Printpublikationen. Urban, digital, kreativ Im Rahmen der Neu-Positionierung soll die Agentur potenziellen Kunden und Mitarbei- tern stärker als bisher ihren urbanen, digitalen und kreativen Footprint vermitteln. Die neue Website nimmt den User auf einen Spaziergang durch die Niederlassungen mit, sie integriert zahlreiche Storys von und über die Agentur und illustriert sie mit Augmented- Reality-Motiven. Zwischen seriöser Strategie-Beratung und digitaler Avantgarde schlägt das neue Branding von JP | KOM einen gesunden Mittelweg ein. Das entspricht dem Stand vieler Kunden von JP | KOM, die ihre traditio- nellen Geschäftsfelder im Zuge der Digitalisierung verändern, wie zum Beispiel Industrie 4.0, Autonomes Fahren und Smart Home. So ebnet die Website den Weg für neue Leistungen, die JP | KOM seinen Kunden künftig anbieten wird. Management-Tools, die funktionieren. Hier die Botschaften-Pyramide des neuen JP | KOM Brandings. JP | KOM News-Service # 01 | Januar 2016 8
Wie Scrollytelling mit alten Regeln der Website-Nutzung bricht GESCHICHTEN AUS DER FINGERSPITZE Wenn Multimedia, Storytelling und Touchdisplays zusammenkommen, entsteht für Online-Nutzer ein Erlebnis, das in Erinnerung bleibt. Genau das hat JP | KOM mit seiner neuen Website umgesetzt. Wer ein gutes Buch liest, kennt das: Man kann es einfach nicht aus der Hand legen und muss die Geschichte möglichst in einem Rutsch durchlesen. Scrollytelling bedient genau diesen Effekt. Galt in Zeiten des stationären Webs noch, möglichst alle Inhalte einer Webseite in kleinen Häppchen direkt im Bildschirm sichtbar zu machen, so kehrt sich dieser Leitsatz mit dem Siegeszug mobiler Geräte inzwischen um. Mit der Fingerspitze auf den Displays entdecken die Nutzer die weite Welt dahinter. Das Ergebnis sind lange, multimedial aufbereitete Seiten zum Scrollen. Damit solche Websites zu einem einprägsa- men Nutzererlebnis werden, sollten konzeptionelle und gestalterische Grundregeln beachtet werden: Übersicht. Auf den langen Seiten kann der Nutzer leicht den Überblick verlieren. Die immer verfügbare Navigation und eine Positionsanzeige geben Orientierung. Pfeile helfen, die Scrollrichtung deutlich zu machen. Verfügbarkeit. Multimediale Seiten können schnell datenintensiv werden. Durch asyn- chrones Laden tauchen die ersten Elemente im Blickfeld auf, während spätere Inhalte sich noch aufbauen. Ladehinweise halten den Nutzer im Zweifel noch ein paar Sekunden bei der Stange. Responsivität. Das Design muss anpassungs- fähig wie ein Chamäleon sein, sich in verschie- denen Bildschirmformaten und auf diversen Betriebssystemen korrekt anzeigen lassen. Reduktion. Das Screendesign beschränkt sich auf wesentlichen Content ohne Schmuck- elemente. Statt klassischem Layout mit Header und Footer werden Inhalte bildschirmfüllend dargestellt. Auch interaktive Elemente sollten mit Bedacht ausgewählt werden, um den Nutzer und die User Experience nicht überzu- strapazieren. Erzählstruktur. Vor der Gestaltung muss die inhaltliche Grundidee bestimmt sein. Die Story der Website braucht Haupt- und möglicher- weise auch Nebenstränge. Außerdem muss die Erzählperspektive festgelegt werden. Dank Verlinkung ist eine lineare Erzählung nicht obligatorisch, trotz Scroll-Effekt. Von Sarah Weber „ Vor der Gestaltung muss die inhaltliche Grundidee bestimmt sein “ JP | KOM News-Service # 01 | Januar 2016 9
Tools für Scrollyteller(keine Programmierkenntnisse benötigt) http://pageflow.io/ http://aesopstoryengine.com/ https://storify.com/ http://shorthand.com/ Einfache Bedienung durch WYSIWYG-Editor Plug-in für Wordpress mit 13 Story-Komponenten Besonders geeignet zur Kuratierung von Social Media-Inhalten, lässt sich in Webseiten einbetten Die einzelnen Komponenten einer Geschichte werden gleich auf Twitter gepostet 9-99€/Monat kostenlos kostenlos Ab 6 US$/Monat Korrespondenz. Die technischen Effekte sollten im Einklang mit der Story stehen, sie stützen und nicht überlagern. Will man etwa einen linearen Ablauf darstellen, so eignet sich eine interaktive Zeitleiste mit multimedi- alen Fragmenten oder eine sogenannte Scroll-Activated-Animation – eine durch Scrollen aktivierte Animation. Diese Leitprinzipien beeinflussten die Gestaltung der neuen Website von JP | KOM. Statt der ehemals über 100 Einzelseiten gibt es ab jetzt nur noch vier. Multimedial führt die Seite die Besucher an den wichtigen Passagen ihres Interesses vorbei. Auf der Agenturseite begegnen ihnen Anekdoten zu Themen beim Mittagstisch, animierte Infografiken zu unseren Werten oder Bildergalerien der Mitarbeiter. JP | KOM News-Service # 01 | Januar 2016 Vom Storytelling zum Scrollytelling Storys haben eine Ereignisebene und eine Bedeutungsebene. Letztere wird implizit durch die Ereignisebene erzeugt, welche, ausgeschmückt mit Details, für Anschaulichkeit und Glaub würdigkeit sorgt – und dem Leser deshalb so viel Spaß macht. Viele kleine Storys sind auf der neuen JP | KOM Website integriert – und das nicht einfach so. Sie verstecken sich in den großflächigen Fotos. Der Clou: Das moderne Webdesign visualisiert diese Stories, verortet sie – und lässt den Leser eintauchen in die JP | KOM-Welt. Um die ganze Geschichte der „Agentur der Zukunft“ zu erfahren, müssen sich die Leser von Story zu Story scrollen. Was wir machen, wie wir denken und handeln – als das erfährt der Leser dabei nahezu „en passant“. 10
Scrollytelling Beispiele Scrollytelling für Megatrends. Mit einer bunten Mischung aus Artikeln, Bildergalerien, Videointerviews, Cases und Statistiken bereitet das Handelsblatt das vielschichtige und teils abstrakte Thema Mobilität greifbar auf. http://media.handelsblatt.com/handelsblatt/specials/ mobilitaet-der-zukunft/#Start Scrollytelling an der Schnitt- stelle zum Film. Mit jeder Fingerbewegung treibt der Nutzer den Prozess der Kaffeeherstellung visuell voran. http://forbetter.coffee/ Scrollytelling für Kampagnen. Der britische Autohändler Arnold Clark erzählt die Story einer Kundenkampagne in animierten Infografiken. Originelle Vergleiche und ansehnliche Motive machen das ansonsten trockene Geldthema zur guten Unterhaltung. http://www.arnoldclark.com/ challenge/ JP | KOM News-Service # 01 | Januar 2016 11
PROJEKTTAGEBUCH: WAS DIE TOOLBOX NICHT VERRÄT Schritt für Schritt zur neuen Website Von Manuel Wecker Den Website-Relaunch über sechs Monate hinweg zu steuern, erforderte die richtigen Tools, Ausdauer und ein Händchen für gute Entscheidungen. In diesen fiktiven „Tagebuch- einträgen“ zeige ich kritische Pfade und Learnings auf, die einen abseits des guten Lehrbuchs voranbringen. JP | KOM News-Service # 01 | Januar 2016 12 25.06.2015 Am Vorabend der Entscheidung 01.06.2015 Kick-off 14.01.2016 Kurz vor Go-Live 14.09.2015 Vorbereitung des Dienstleisterbriefings 07.09.2015 Das gesamte Drehbuch 18.08.2015 Kommentierung des Basislayouts
25.06.2015: Am Vorabend der Entscheidung Ich bin gespannt: Morgen um 15 Uhr entscheidet die Geschäftsführung darüber, in welchem Design sich die neue JP | KOM Website der Öffentlichkeit präsentieren wird. Wir sind mit Scribbles und ersten Mock-Ups gut vorbereitet, um für unsere Gestaltungsideen zu werben. In den Zwischenmeetings hat sich gezeigt: Kaum einer ist in der Lage, anhand von schriftlichen Ausführungen, einer Excelliste oder einigen Bildern die neue Webseite vor seinem inneren Auge entstehen zu lassen. Durch grobe Strukturlayouts machen wir unsere Ideen anschaulich. So sollte es klappen! Die Entscheidungs-PPT liegt jetzt ausge- druckt vor mir – viele Stunden Denkarbeit und Diskussion gebündelt auf 30 Seiten Papier, strukturiert durch vier Tools: Benchmarking von Wettbewerber-Auftritten Moodboards für die Bildwelt, den Illustrationsstil Pre-Voting der Grafikdesigner anhand transparenter Kriterien Markenarchitektur, Leistungsportfolio und technische Funktionsliste in Szenarios mit anschließender SWOT-Analyse 01.06.2015: Kick-off Wie bei jedem Kick-off lag auch heute Spannung in der Luft. Zu Vorfreude und Euphorie gesellte sich eine Prise Unruhe, als der sechs Monate umfassende Projektplan für den Re- launch der Website an die Wand projiziert wurde: „Wie stemmen wir dieses Projekt zusätzlich zu den zahlreichen Kundenjobs?“ – las ich die Frage in den Gesichtern des Projektteams ab. Wir mussten jetzt die organisatorischen Weichen stellen, sonst würden spätestens in Woche sechzehn die „Status-Ampeln“ des Activity Reports auf Rot stehen. In Abstimmung mit der Geschäftsführung legten wir daher fest, dass der Website-Relaunch unter den internen Projekten bevorzugt behandelt wird. Selbstverständlich bleiben Kunden- projekte erste Priorität. Treten spontan Engpässe im Tagesgeschäft auf, sollten jedoch die für den Website-Relaunch vorgesehenen Kapazitäten nicht angetastet werden. Auf diese Weise stellten wir sicher, dass möglichst keine Interessenkonflikte auftreten. Moodboards für den Illustrationsstil und die Bildwelt SWOT-Analyse Activity Report Projektplan JP | KOM News-Service # 01 | Januar 2016 13
07.09.2015: Das gesamte Drehbuch Wie ein Regisseur die Dramaturgie seines Films bis hin zur letzten Feinheit schleift, so arbeiteten auch wir in den letzten Wochen die Gestaltung der JP | KOM Website bis ins Detail aus – mit Hilfe eines „Drehbuchs“. In ihm laufen die Fäden der einzelnen Teilprojekte zusammen: Testfotos aus den Shootings im Düsseldorfer und Frankfurter Büro finden hier ebenso Platz wie Zeichnungen der Illustrato- rinnen, technische Funktionsbeschreibungen, Sprungmarken und Verlinkungen. Ein wichtiges Learning für uns: Tools setzen sich nur dann im Team durch, wenn sie auch visuell ansprechend sind. Die Mastersitemap, die wir zuvor in Excel angelegt hatten, wurde schnell vom Drehbuch-Dokument abgelöst – das ist einfach übersichtlicher und anschaulicher. 18.08.2015: Kommentierung des Basislayouts Heute halte ich zum ersten Mal einen finali- sierten Layout-Vorschlag unserer Grafikdesigner in den Händen. Die Vision der neuen JP | KOM Webseite nimmt Gestalt an. Und neben positiven Gefühlen meldet sich gleich der Advocatus Diabolus in mir. Das braucht noch einen Feinschliff! Ich bat die Mitglieder des Projektteams, die Layouts zu kommentieren. Mit gezückten Stiften und bunten Post-its stehen wir vor den beschreibbaren Wänden unserer „Werkstatt“ und lassen die kritischen Blicke über das Screendesign wandern: Wie sollen Boxen und Kästen animiert sein? Welche Bilder bleiben beim Parallax-Scrolling fest im Hintergrund verankert? Und wie bewegen sich welche Elemente beim Scrollen mit? Seitenaufteilung, Bildformate und Schmuckelemente – am Ende des Meetings blieben keine Fragen offen, die To-Do Liste war dafür umso länger. Korrekturen am Screendesign-Entwurf Masterdokument: Das Drehbuch JP | KOM News-Service # 01 | Januar 2016 14
Die zentralen Learnings im Überblick 1. Die inhaltliche und zeitliche Erwartungs- haltung der internen Auftraggeber von Beginn an klar definieren 2. Teilprojektpartner wie Grafik, Text und Programmierung stark in die Mitverant- wortung nehmen 3. Frühzeitig Kapazitäten für das zusätzliche Projekt sichern und kontinuierlich benötigte Ressourcen freisperren 4. Die Vergleichbarkeit von externen Dienstleistern und ihren Angeboten durch ein einheitliches, vorabdefiniertes technisches Pflichtenheft erhöhen 5. Neue Funktionselemente und ihre einheitliche Bezeichnung bereits beim Projektstart festlegen 6. Nicht zu lange in der Konzeption verharren, sondern möglichst früh parallel dazu in die Content-Erstellung einsteigen 7. Bei Änderungen im Konzept sofort den gesamten Projektplan inkl. aller Projektschritte, Kapazität und Timings neu überprüfen Bei JP | KOM sprechen wir die Sprache der Programmierer. Der Weg bis zum einheitlichen Wording war jedoch lang. In unserem heutigen Meeting sprachen wir viel zu häufig aneinander vorbei, verheddert in der technischen Fachterminologie. Diese Verstrickung hieß es nun aufzulösen. Aber wie? Zum Glück hatten wir eine Idee: Funktionselemente und ihre Bezeichnungen haben wir ein für alle Mal in einem Pflichten- heft bzw. Design Styleguide glattgezogen. Was im Drehbuch in aller inhaltlicher Breite ausgeführt wurde, mussten wir nun, insbe- sondere für die Programmierer, auf die technischen Komponenten heruntergebre- chen – zudem hatte die Dienstleistersuche bereits begonnen. Unterschiedliche Funktions- verständnisse und damit uneinheitliche Angebote, die den Vergleich erschwerten, waren die Folge. Durch ein frühzeitiges Commitment auf einheitliche Begriffe und einen Design Styleguide inkl. technischer Funktionsbeschreibungen hätte dies verhindert werden können. 14.01.2016: Kurz vor Go-Live Die Website geht bald online! Die Kollegen freuen sich auf den neuen Internetauftritt. Die Geschäftsführung hat im Montagsmeeting in Düsseldorf und Frankfurt angekündigt: Morgen ist es endlich so weit! Eines steht jetzt schon fest: Die Arbeit der letzten Monate hat sich gelohnt. 14.09.2015: Vorbereitung des Dienstleisterbriefings JP | KOM News-Service # 01 | Januar 2016 15
Was ist besonders an dem visuellen Konzept der Website? Die neue Website integriert die relevanten Infos auf wenigen Longpagern statt wie bisher auf vielen Subsites. Sprungmarken führen zu den einzelnen Informationen. Statt nüchterner Fakten erzählen wir emotionale Storys über unsere Agentur und ihre Mitarbeiter. Das beeinflusste das visuelle Konzept maßgeblich. Wie auf einer Erkundungstour durch die Agentur kann der Nutzer jetzt an interaktiven Infopoints kleine Geschichten inner- und außerhalb der Büroräume entdecken. Zudem bebildern wir diese Stories im Augmented-Reality-Stil, ganz im Sinne der „Agentur der Zukunft“. Dieses Prinzip sorgt so für einen starken Wiedererkennungswert der Marke JP | KOM im Internet. Was bedeutet das für die Ästhetik des Auftritts? Von Anfang war die Prämisse, ein wertiges Webdesign zu schaffen. Wir haben das bestehende JP | KOM Corporate Design um wiederkehrende Layout-Elemente ergänzt, die alle in einem Design Guide festgehalten wurden. Prägnant sind hier der Einsatz von bildschirmfüllenden Bildern, die klare minimalistische Typografie mit zwei Schrift- schnitten, der elegante Einsatz anthrazit- farbener Elemente und der rote Kachel-Look bei Mouseover. Es handelt sich weniger um eine Revolution, mehr um eine Evolution, die das bestehende Corporate Design berücksichtigt und dennoch frisch und zeitgemäß wirkt. Schließlich haben wir uns als Agentur auch weiterentwickelt und nicht komplett umgekrempelt. Was hat Dich bei der Entwicklung inspiriert? Es ist nicht so, dass ich gewartet habe, bis mir die guten Ideen zufliegen. Ich bin da systematisch herangegangen. Zu Beginn des Projekts habe ich ein Moodboard angelegt, um das Look-and-Feel der neuen Website zu bestimmen. Dort habe ich Beispiele für User Interface und User Experience Designs, Farbkombinationen, Illustrationsstile, Typografie-Beispiele und Studioporträts gesammelt. Des Weiteren habe ich die Benchmark zentraler Mitbewerber visuell analysiert, um Do´s und Dont´s für das neue Website-Konzept zu bestimmen. Um den State-of-the-Art im Webdesign zu kennen, durchforste ich auch privat Fach medien wie Page, t3n, Designmadeingermany oder Smashing Magazine. Manche Kunden fragen sich ja, warum es für Fotos so viel Aufwand benötigt. Was gehört alles dazu? Die Liste ist wirklich lang. Auch hier kam wieder das Moodboard als Entscheidungs-Tool zum Einsatz. Wir wollten einen freundlichen, authentischen Look, der sowohl den Arbeits alltag in der Agentur als auch die schöne Architektur unserer Niederlassungen berücksichtigt. Zudem sind wir mit offenen Grafik-Designerin Sarah Weber hat das visuelle Konzept der neuen JP | KOM Website entwickelt und implementiert. Im Interview spricht sie über Systematik bei der Design-Entwicklung, die Koordinierung anderer Experten und die Begeisterung über die Ergebnisse. Plötzlich werden Ideen Wirklichkeit Bei der Arbeit Brainstorming zu Beginn des Relaunch-Projektes JP | KOM News-Service # 01 | Januar 2016 16
Sarah Webers Job Schritt für Schritt 1. Kick-off. Festlegung von Design-Strategie in Abhängigkeit von Informationsarchitektur, Technik und Content 2. Gestaltungsrichtung. Entscheidung auf Basis von Moodboards und exem plarischer Screendesigns 3. UI/UX-Design. Definition auf Basis eines Benchmark von Navigationsprinzipien und User-Experience-Ansätzen und Briefing der Programmierer 4. Umsetzung Bildwelt. Steuerung von Fotografen/Illustratoren bei Konzeption und Realisierung 5. Usability-Test. Beobachtung bei der Bedienung von Klick-Dummies; Weiter- entwicklung des Designs 6. Finalisierung. Übertragung des Screendesigns auf alle Seiten und Steuerung der Programmierer bis zur fertigen Website Für die Erstellung des Moodboards hat Sarah Weber Pinterest genutzt. Es war leicht zu editieren und für Kollegen gut einsehbar. http://tiny.cc/x0f37x Von ersten Ideen zum fertigen Ergebnis einer Illustration. Augen und der Handykamera durch die Agentur gezogen, auf der Suche nach Schokoladenseiten. Die Bildmotive waren vordefiniert, entsprechend den Augmented- Reality-Objekten innerhalb der Bilder. Wichtig und zugleich aufwendig war es, eine detaillierte Motivliste zu erstellen, um die Stories zu integrieren und genügend Platz für Illustrationen bereitzuhalten. Des Weiteren musste ich die Models (JP | KOM Mitarbeiter) hinsichtlich Kleidung briefen, weil etwa kleingemusterte oder auffällige Farben schlecht auf den Fotos ausgesehen hätten. Und die Requisiten mussten parat stehen. Hast Du selbst fotografiert? Wir haben uns in diesem Fall für einen externen Fotografen entschieden. Ich war aber beim Shooting dabei und habe mich mit ihm durchgehend hinsichtlich der Motive und Stimmungen abgestimmt. Was war Dein Lieblingsmoment während des Projekts? Aufregend war der erste Blick auf die Um setzung der Programmierer. Plötzlich werden alle Ideen Wirklichkeit. Begeistert hat mich auch das Zusammenfügen der bearbeiteten Fotos und der tollen Illustrationen. JP | KOM News-Service # 01 | Januar 2016 17
Im Schaffensprozess der Website gab es einige Highlights. Sehen Sie selbst: Das Making-of IMPRESSUM Verantwortlich Anja Montag JP | KOM GmbH Galeriehaus, Erkrather Str. 228b, 40233 Düsseldorf +49 211 687835-24 Kostenloses Abo und Abbestellung über news-service@jp-kom.de. Bei Änderung Ihrer E-Mail-Adresse, Anregungen oder Fragen klicken Sie bitte hier. Über JP | KOM ist eine mittelständische, inhabergeführte Kommunikationsagentur – die Agentur der Zukunft. Wir stehen für strategische Beratung, spannende Storys und hochwertigen Content in modernen Medien. In den Büros in Düsseldorf und Frankfurt unterstützen 38 Mitarbeiter Kunden aus Maschinen- bau und Technik, Chemie, Banken/Versicherungen, Healthcare und anderen Branchen auf dem Weg ins neue Kommunikationszeitalter. Wir gestalten den digitalen Wandel – auch in traditionsreichen Unternehmen. Als Mitglied des International PR Network (IPRN) hat JP | KOM weltweit mehr als 40 Kooperationspartner. Abbildungen JP | KOM; Fotos: Falco Peters Titel © Pixeden; S. 2 © Tomas Florian; Macro- vector/Shutterstock, S.6 © tovovan/Shutterstock, S.15 © Pixeden Mehr Fotos gibt es auf unserer neuen Website. JP | KOM News-Service # 01 | Januar 2016 Kein Problem dank Postproduction: Den Schal der Kollegin können unsere Grafik-Designer verschwinden lassen. 18

JP│KOM News-Service 1/16: Die neue JP│KOM Website

Check these out next

JP│KOM News-Service 1/16: Die neue JP│KOM Website

Recomendados

Más contenido relacionado

Presentaciones para ti(20)

Similar a JP│KOM News-Service 1/16: Die neue JP│KOM Website(20)

Más de JP KOM GmbH(20)

Último(20)

JP│KOM News-Service 1/16: Die neue JP│KOM Website