Case Study

Pelikan Website

Fallstudie zum Thema Markenwebsite

Kundenprofil

Die Pelikan AG ist mit ihren Tochter­gesell­schaften einer der größten Papier-, Büro- und Schreib­waren­pro­duzenten der Welt. Generationen sind mit der Marke groß geworden.

Pelikan vereint exzellente Qualität, richtungs­weisende Innovationen und Bildungs­konzepte mit perfekter Funktio­nalität und klarer Form­sprache. Auch in der Entwick­lung ist Pelikan Vor­reiter. In Zusammen­arbeit mit Lehrern und Wissen­schaftlern entstehen Schul­produkte, die die moto­rische Ent­wicklung und Schreib­präzision des Kindes von Anfang an fördern. Im Segment „Edles Schreiben“ bietet Pelikan darüber hinaus hand­ge­fertigte Schreib­geräte „Made in Germany“.

Ausgangsbasis

Die Pelikan Homepage – bereits seit 2007 durch :torweg erstellt und betreut – konnte einige An­sprüche an eine moderne Website nicht mehr erfüllen. Die stetig zunehmende Bedeutung von mobilen End­geräten, sowie aktuelle Trends bei Design und tech­nischer Gestal­tung einer Webseite führten zu dem Ent­schluss die Neu­ge­staltung in Angriff zu nehmen.

Für einen der welt­weit füh­renden Her­steller von Papier-, Büro- und Schreib­waren, die in großen Teilen auch direkt an End­kunden ge­richtet sind, kann die Be­deu­tung einer optisch an­sprechenden sowie gut bedien­baren Web­seite nicht genug her­vor­gehoben werden. Nicht zuletzt war als internet­affines Unter­nehmen bei Pelikan nach 4 Jahren auch der ver­ständ­liche Wunsch nach Er­neue­rung vorhanden.

Herausforderungen

23 Länder­varian­ten, eine breite sowie gleich­zeitig tiefe Produkt­palette, die sich teil­weise von Land zu Land unter­scheidet, und eine große An­zahl an Mehr­wert­in­halten führen zu weit über 20.000 Einzel­seiten. Dazu kommen dann noch ver­schie­denste Service-An­wen­dungen, welche inner­halb der Web­seite be­trieben werden. Da wären bei­spiels­weise der Online-Re­pa­ra­tur­ser­vice für hoch­wer­tige Schreib­ge­räte, die Hän­dler­suche, der Flecken­doktor und ein an­melde­pflich­tiger Shop für Lehrer – um nur ein paar zu nennen.

Das moder­nisierte Layout sollte die bisher relativ sachlich gehaltene Prä­sen­tation der Marke Pelikan ablösen und eine größere Emo­tio­na­lisie­rung er­mö­glichen.

Schon alleine die schiere Menge, sowie die Di­ver­sität der Inhalte und An­wen­dun­gen machten die gra­fische Neu­ge­stal­tung der Web­site zu einer echten Heraus­forde­rung – be­rück­sich­tigt man hier­bei noch das je­weilige Er­stellen von platt­form­spe­zi­fischen An­sichten, dann wird schnell klar, dass eine Menge an Design­arbeit ge­lei­stet werden musste.

Neue Informations­ar­chi­tektur

Neben der gra­fischen Neu­ge­stal­tung der Web­site sollte zudem eine Re­struk­tu­rie­rung der In­halte er­folgen. In den bis­he­rigen Re­launches der Pelikan Web­seiten war die An­or­dnung der Pro­dukt­in­halte vor allem an der ge­druck­ten Ka­talog­version an­ge­lehnt. Dies führte dazu, dass Produkte für den End­kunden - als haupt­säch­liche Ziel­gruppe der Web­seite – über die Menü­struk­tur nicht immer leicht auf­zu­finden waren. Die Be­reiche bzw. Pro­dukt­ka­te­gorien er­schlos­sen sich einem Be­nutzer oft nur, wenn be­reits ein ge­wisses Vor­wis­sen bezüglich der Or­ga­ni­sation des Pelikan-Sor­ti­ments vor­handen war.

Der am Pro­dukt­ka­ta­log aus­ge­richtete in­halt­liche Auf­bau führte außer­dem in vielen Fäl­len zu einer tiefen Ver­or­tung der Pro­dukt­in­halte, so dass oft un­nötig viele Na­vi­ga­tions­schritte bis zur ge­wün­schten An­sicht nötig waren. Die Neu­struk­tu­rie­rung der In­halte sollte sich auch im Hin­blick auf die Such­ma­schinen-Op­ti­mie­rung positiv be­merkbar machen.

Technik & Orga­ni­sa­torisches

Aus technischer Sicht sollte durch den Ein­satz moderner Web­tech­niken die Per­for­mance aber auch die Funk­tio­na­lität der Web­seite weiter ver­bes­sert werden. So spielte im Hin­blick auf die Ge­schwin­dig­keit und Usability ins­be­son­dere die Be­rück­sich­tigung mobiler End­ge­räte eine große Rolle.

Zu guter Letzt ist die or­ga­ni­sa­to­rische Ko­or­di­nation der Um­stel­lung einer Web­site, welche in 23 ver­schie­denen Sprach- bzw. Länder­va­rianten vor­liegt eben­falls nicht zu un­ter­schätzen.

Umsetzung

Die ersten großen Arbeits­schritte waren die Kon­ze­ption einer neuen In­for­ma­tions­archi­tektur ins­be­sondere für das Pelikan-Sor­timent. Die be­reits lang­jährige Zu­sam­men­ar­beit mit Pelikan und das tiefe Ver­ständ­nis für die Pro­dukte waren hier­für äußerst hilf­reich. Parallel dazu er­folgte die Aus­ge­stal­tung des Design­ent­wurfs.

Für die in­halt­liche Neu­struk­tu­rierung wurde folgende grund­sätz­liche Regel auf­ge­stellt: aus Sicht der Start­seite soll eine ma­xi­male Na­vi­ga­tions­tiefe von vier (also nach höch­stens vier Klicks ist man beim ge­such­ten In­halt) nicht über­schrit­ten werden.

Für die Struk­tu­rierung des Sor­ti­ments wurde folgende An­nahme ge­troffen: Es soll sich dem Ver­braucher in­tu­itiv er­schließen – also weg von der star­ren Ab­bildung der Druck­version des Ka­ta­logs bzw. der internen Sicht auf das Sor­ti­ment bei Pelikan.

Neu­or­ga­ni­sation der Inhalte

Zuerst wurde eine Ein­tei­lung in acht we­sen­tliche Pro­dukt­ka­te­go­rien de­finiert, die sich nur noch be­dingt am Ka­ta­log orien­tieren: „Edles Schreiben“ (hoch­preisige Schreib­ge­räte), „Design Schreib­ge­räte“ (mittlere Preisg­ruppe), „Schreiben“ (Schule, Büro, etc.), „Malen & Basteln“, „Büro­pro­dukte“, „Ersatz­teile & Zubehör“, „Drucker­zu­behör“ und „Werbe­mittel“. Inner­halb dieser Ka­te­go­rien wurden die Pro­dukte und Pro­dukt­gruppen erst einmal ent­sprechend der bisher gelten­den Sicht ver­ortet.

Nun kam der zentrale Bruch mit der bis­he­rigen Sicht auf das Sor­timent – Pro­dukte lassen sich aus Sicht des Kon­su­men­ten eben nicht immer ein­deu­tig einer de­fi­nierten Pro­dukt­ka­te­gorie zu­ordnen – so ist z.B. ein Klebe­stift im Pro­dukt­be­reich „Malen & Basteln“ min­des­tens ge­nauso gut auf­ge­hoben wie im Pro­dukt­bereich „Büro­pro­dukte“. Das gesamte Sor­timent wurde unter Be­rück­sich­tigung dieses Aspekts zu­sätz­lich neu struk­tu­riert, so dass man nun auf ver­schie­denen Na­vi­ga­tions­wegen zum ge­wünsch­ten Pro­dukt ge­langen kann.

Designaspekte

Das Design be­rück­sich­tigt die Tat­sache, dass Web­seiten heut­zu­tage mit ver­schie­den­sten End­ge­räten be­trach­tet werden. Das be­deu­tet das Layout muss am Desktop-PC, sowie auf Tablet und Smart­phone, dem hohen Anspruch einer Welt­marke ge­nügen. Die Be­dien­bar­keit der Website mit Maus aber auch per Finger auf einem Touch-Device muss gleicher­maßen ge­geben sein.

Als Lösung wurde eine Responsive Website gestaltet. Die Web­seite passt sich in ver­schie­denen, de­fi­nierten Schrit­ten ent­sprech­end des End­ge­rätes des Be­trach­ters op­timal an die je­wei­ligen Display­auf­lösung an. Es wurden klare Raster für die Dar­stel­lung der In­halte pas­send zur Auf­lö­sung de­fi­niert, die dann per CSS3 Media Query um­ge­schal­tet werden können. Die Kon­ze­ption von er­kenn­baren Be­dien­ele­men­ten er­mö­glicht das in­tu­itive Na­vi­gieren durch die Web­seite per Maus und Finger.

Mit groß­flächigen Bildern sowie der grund­sätz­lichen De­fi­nition einer neuen Bild­sprache sollen die Produkte und die Marke Pelikan emo­tio­nal prä­sen­tiert werden. Der grund­sätz­lich kalten Unter­nehmens­farbe Blau wurden ent­sprechend groß­flächige Ab­bildungen in warmen Farben ent­ge­gen­gestellt, die die Pro­dukte im Kontext prä­sen­tieren.

Modernes HTML und CSS

In technischer Hin­sicht waren bei der Neu­ge­stal­tung der Homepage ins­be­sonders zwei As­pekte vor­rangig. Bereits durch die Op­ti­mie­rung und Aus­rich­tung der Web­seite für mobile End­ge­räte ergab sich zwangs­läufig der An­spruch die Lade­zeiten der Web­seite weiter zu op­ti­mieren. Diese Op­ti­mie­rung ist in­zwischen auch ein essen­tieller Faktor für das SEO-Ranking der ein­zelnen Seiten. Außer­dem musste die mehr­fache Verortung von In­halten inner­halb der Website so um­ge­setzt werden, dass sich diese ihrer­seits nicht ne­ga­tiv auf die Be­wer­tung durch Such­mas­chinen aus­wirkt (Stich­wort: Canonical Links).

Bild­in­halte werden durch den Ein­satz des HTML5 <picture> Ele­ments unter Ver­wen­dung von Source­sets je nach Auf­lösung op­ti­miert aus­ge­lie­fert. Für Browser, die im WebP-Format kom­pri­mierte Gra­fiken dar­stellen können, wird das Bild­ma­terial ent­spre­chend aus­ge­liefert, da diese noch ein­mal eine er­he­blich bes­sere Kom­pres­sions­rate ge­gen­über z.B. JPEG-Format bietet. Die Im­ple­men­tierung von Lazy-Loading - also das Nach­laden von Grafiken kurz bevor sie in den sicht­baren Be­reich ein­tre­ten – be­schleu­nigt das initiale Rendering der An­sicht zu­sätz­lich.

Schnelle Ladezeiten

Um die Lade­zeiten der Inter­net­prä­senz möglichst gering zu halten, werden text­basierte In­halte der Web­site GZIP-kom­pri­miert aus­ge­liefert. Außerdem wurde mit der Um­stel­lung die Unter­stützung von HTTP/2 aus­ge­rollt. Die kom­plette Site wird nach­wie­vor aus­schließ­lich ver­schlüs­selt und mit HTTP-Strict-Trans­port-Security aus­ge­liefert.

Die An­zahl der An­fragen an den Server, die zur Dar­stel­lung der je­wei­ligen An­sicht be­nötigt werden, wurde auf das nötige Minimum re­du­ziert. Das be­in­hal­tete auch die Re­duk­tion von CSS- und JavaScript-Dateien. Für die Dar­stel­lung der Web­seite werden nur je­weils eine so­genan­nte mini­fi­zierte - durch spezielle Re­du­zierung des Datei­in­haltes kom­primierte - Version ein­ge­bunden.

Ergebnisse

Vom Konzept über das Design bis hin zur Um­setzung hat :torweg den Re­launch der neuen Pelikan als Full-Service-Agentur durch­geführt.

Der Relaunch aller 23 Sprach­vari­anten wurde dabei eben­falls ko­or­diniert. Das be­in­haltete unter anderem die Kom­mu­ni­kation mit den jeweils zu­stän­digen Pelikan Landes­ge­sell­schaften. Darunter fiel beispielsweise das An­fordern und Ein­pflegen noch fehlender Über­setzungen. :torweg kümmerte sich dabei auch um alle weiteren Maß­nahmen, z.B. die Infra­struk­tur be­treffend.

Durch den Ein­satz aktueller Web-Tech­no­logien konnte eine Unter­nehmens­präsenz ge­schaffen werden, die per­formant aktuelle An­for­derungen und Trends voll­um­fänglich erfüllt und sich sowohl am Desktop-PC, aber vor allem auch mit mobilen End­ge­räten intuitiv be­dienen lässt.

Weiterführende Links