- „Die Agentur der Zukunft“ – mit Storytelling im Web den Internetauftritt zum Erlebnis machen - Neupositionierung der Agentur – JP│KOM: Die Agentur der Zukunft - Geschichten aus der Fingerspitze: Wie Scrollytelling mit alten Regeln der Website-Nutzung bricht - Projekttagebuch: Was die Toolbox nicht verrät – Schritt für Schritt zur neuen Website

1. 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.

2. Die Zukunft kann man nicht fotografieren –
man muss sie sich vorstellen. Wir als
JP | KOM haben den Anspruch, die Zukunft
der Kommunikation mit­­zugestalten.
Da sind Phantasie und Ideen gefragt.
Der Anspruch. Veränderungskommunikation,
Kommunikationsmanagement und -controlling
(„Wertschöpfung durch Kommunikation“),
digitale Unternehmenskommunikation,
Organisationsentwicklung der Kommunikation,
Portfoliomanagement der Kommunikation­s­
aktivitäten: JP | KOM gehörte in den
vergangenen 15 Jahren zu den Trendsettern in
Strategie und Implementierung der Un­ter­
nehmenskommuni­kation. 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
Leistungs­versprechen 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
post­modernen 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 zen­tralen 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 Unter­nehmen
hineinwirken.
Jörg Pfannenberg
Geschäftsführer
JP | KOM News-Service # 01 | Januar 2016 2

3. 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

4. Es heißt, die Düsseldorfer Schwanenhöfe waren
die erste Waschmittelfabrik Europas. 1897
be­gann 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 Produk­tion und das Gelände
verfiel in einen Dorn­röschenschlaf. Wachge-
küsst wurde es im Jahr 2010 von einem
wagemutigen Architekten­bü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

5. 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

6. 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

7. 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

8. 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 heu­tiger 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 entwi-
ckelt 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, digita-
len 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

9. 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 konzepti-
onelle 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

10. 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

11. 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

12. 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

13. 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

14. 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

15. Die zentralen Learnings
im Überblick
1. Die inhaltliche und zeitliche Erwartungs-
haltung der internen Auftrag­geber 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 techni-
schen 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

16. 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
zeit­gemäß 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

17. 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

18. 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