Digital First: Loading

Ivoclar
Vivadent
Redesign
-
Mehr
als
nur
ein
neuer
Anstrich

Ivoclar Vivadent Redesign
Ivoclar Vivadent Redesign

Zu Beginn des Jahres stand mit dem Redesign des Ivoclar Vivadent Webshops sowie deren Website ein Großprojekt an. In meinem Blog werde ich Bezug auf die Rundumerneuerung der Website nehmen.

Redesign Website

Neben der Neugestaltung der Website gab es auch einige funktionale Erweiterungen, welche die Seite spannend machen. Als größtes Feature erhielt die Seite nun die Möglichkeit Produktkategorien abzubilden. Hierbei ging es darum, einzelne Prozessstufen in einem vielfältigen Produktbaum anzuzeigen. 

Insgesamt gibt es drei verschiedene Produktbereiche, in denen der Behandlungs- und Verarbeitungsprozess dargestellt wird. Die einzelnen Stufen gehen vom Vorbereiten über das Verarbeiten bis zum Pflegen. Weiters gibt es in einem besonderen Fall wiederum drei Varianten des Prozesses. Für diesen komplexen Sachverhalt galt es ein benutzerfreundliches Design zu finden.

Die Lösung

Die einzelnen Produktbereiche werden auf der Startseite als Reiter (Tabs) dargestellt. In den jeweiligen Reitern kann man direkt zu den Prozessstufen springen. Die Bereiche heben sich farblich voneinander ab, wobei sich diese Farbe durch den gesamten Prozess durchzieht. Im Spezialfall, in dem die Varianten zum Einsatz kommen, hat man in den einzelnen Stufen weitere Tabs um zwischen den Varianten wechseln zu können. Der Prozess zieht sich bis in die Detailansicht eines Produktes durch und es kann durch die eigene Navigation zwischen den einzelnen Schritten gewechselt werden.

Die Umsetzung

Das System ist in ZOOLU integriert und kann dort komplett gepflegt werden. Eine grundlegende Struktur ist natürlich notwendig, allerdings können sämtliche Inhalte, sowie die angezeigten Tabs und die Varianten manuell gepflegt werden. Dazu kann auch die Farbe, die für einen Prozess steht, in ZOOLU abgeändert werden. Wichtig war hierbei, dass Informationen die für den gesamten Bereich stehen, einmalig gepflegt werden können und somit für sämtliche Stufen und Produkte dieses Bereiches gültig sind. Da es ein dynamisches System ist, war dies nicht immer einfach, das Ergebnis kann aber sowohl im Frontend (Website) als auch im Backend (ZOOLU) überzeugen.

Ivoclarvivadent Website Startpage
Ivoclarvivadent Website Startpage
Ivoclarvivadent Website Overview
Ivoclarvivadent Website Overview

Eine der größten Herausforderungen, für mich als Programmierer, war es, die eigentlich voneinander unabhängigen Seiten in ZOOLU zu einem Paket aus mehreren Stufen und Varianten zu vereinen. Besonders die lose Struktur ließ viele Möglichkeiten offen, die alle abgedeckt werden mussten. Es gab viele Spezialfälle, die alle andere Herangehensweisen benötigten. Die gesamten Produktkategorien sind nämlich nichts anderes als eine Ordnerstruktur, die nach gewissen Regeln festgelegt wurde. Nach diesen Regeln kann ich nun erkennen ob ein Ordner ein Bereich, eine Variante, eine Stufe oder nur eine Sammlung von Produkten innerhalb einer Stufe ist. Besonders diese Diversifizierung stellte sich manchmal als großer Knackpunkt heraus. Zusätzlich musste aus allen Unterordnern (Prozessstufen, Übersichten, Produkten) eine Verbindung zum obersten Ordner (Produktkategorie) hergestellt werden, damit die einmalig gepflegten Inhalte, wie die Farbe oder gewisse Texte, die in den einzelnen Stufen gleich bleiben, herausgelesen werden konnten.

Schlussendlich ist es allerdings gelungen, mit ein paar wichtigen Regeln, das ganze System aufzubauen und auch dynamisch erweiterbar zu gestalten.

Eine weitere neue Funktion bieten die Cross-Promos, welche es erlauben verschiedene Produkte miteinander zu verknüpfen. Dafür können spezielle Texte beim beworbenen Produkt eingepflegt werden, die dann in der Sidebar der Seite angezeigt werden.

Ivoclarvivadent Cross-Promo
Ivoclarvivadent Cross-Promo

Zusätzlich zu den Erweiterungen wurde die komplette Seite von Prototype auf jQuery umgebaut.

Zu sehen gibt es das ganze hier:

http://www.ivoclarvivadent.com/de/

Diskutieren Sie mit uns auf Facebook und Twitter . Natürlich freuen wir uns auch über ein E-Mail von Ihnen.

Mehr Blogartikel zum Thema:

loading
Nach oben
 

Hallo!
Sie möchten mit uns zusammenarbeiten? 

Welche Themen sind für Sie interessant?

ICH

Erzählen Sie uns doch bitte ganz kurz worum es geht.

ICH

Gerne würden wir mehr darüber erfahren! Wie dürfen wir Sie denn kontaktieren?

Wie dürfen wir Sie denn kontaktieren?


ICH

An welche Addresse sollen wir die Mail schicken?

Unter welcher Nummer sind Sie am besten erreichbar?

Leider sind zur Zeit alle MASSIVE DOVES auf Urlaub ;) Wollen Sie uns alternativ vielleicht eine Telefonnummer oder E-Mail Adresse hinterlassen, unter der Sie erreichbar sind?

ICH

Bitte geben Sie eine gültige E-mail Adresse ein.


Verraten Sie uns noch Ihren Namen?

ICH

Zum Schluss noch etwas Bürokratie #DSGVO:

Vielen Dank für Ihre Anfrage! Wir werden uns so rasch wie möglich bei Ihnen melden.

Es ist etwas schiefgelaufen.
Bitte lade die Seite neu und versuch es noch einmal.