Ceratizit

Strategie, Informations Architektur, UX Design

Briefing

Ceratizit hat uns beauftragt eine neue Webseite für sie zu erstellen. Bei der Erstellung sollte eine optimierte Navigation, bessere Zuordnung der Produkte und eine responsive Seite umgesetzt werden.

Vorhergehensweise

Schritt I – Analyse

Intern haben wir die aktuelle Webseite analysiert und ich habe anschließend die Produkte und mögliche Gruppierungen erarbeitet. Dies war die Vorarbeit für die Erarbeitung einer Informations Architektur und einer Navigationsstruktur. Wir haben auch die Anforderungen des Kunden aus dem Briefing und aktuelle Entwicklungen im Webdesign in unsere Anforderungsliste aufgenommen.

Schritt II – Workshops

In mehreren Workshops mit den Produktmanagern an den verschiedenen Standorten und dem Marketing wurden Personas für die wichtigsten Zielgruppen erstellt, so dass ein einheitliches Verständnis über die Zielgruppen bestand. Im nächsten Schritt wurde mittels Card Sorting eine Zuordnung der Produkte zu Clustern erstellt. Auf Basis dieser Cluster wird mit den Workshop Teilnehmern nach Oberbegriffen gesucht, diese sollten als Navigationspunkte dienen. Zum Abschluss der Workshops wurde eine mögliche Sitemap mit den Teilnehmern erstellt.

Schritt III – Ideengenerierung

Basierend auf den Ergebnissen der Workshops und unserer Analyse habe ich mehrere verschiedene User Flows und dadrauf basierende Wireframes erstellt. Dabei habe ich verschiedene Wege der Aufteilung der Produkte, der Präsentation der Produkte und der Integration der Informationen über die Firma erstellt.

Die verschiedenen Wege waren:

  1. Starke Teilung der Webseite und der Produkt ein die vier großen Produktgruppen mit unterschiedlichen Layout und einer “separaten” Seite für die generellen Informationen
  2. Klassische Integration der Produkte in eine integrierte Seite
  3. Ein gesunder Mittelweg, hierbei haben wir eine einheitliche Seite allerdings mit einem Einstieg in die 4 Produktgruppen.

Schritt IV – Ausarbeitung

Nach dem meine Vorschläge intern im Team besprochen wurde haben wir uns für den dritten Weg entschieden und auf dieser Basis habe ich für verschiedene Wege die wichtigsten Seiten als Wireframes erstellt. Die Seiten waren: Homepage, Produktüberblick, Produktdetailseite.

Nach der Entscheidung im Team für die User Experience Richtung habe ich die wichtigsten Seiten für Desktop, Tablet und Smartphone als Wireframes erstellt.

Auf Basis dieser Wireframes haben die Grafiker die finalen Layouts erstellt.

Ergebnis

Der Kunde war begeistert von der User Experience und den finalen Layouts. Die Webseite wurde im folgenden auf Basis unserer Ausarbeitungen umgesetzt. Die Idee den Einstieg in die vier Produktgruppen in den Fokus zu stellen, erlaubte es dem Unternehmen im nächsten Schritt einfach diesen Produktgruppen eigene Logos zu geben. Diese finden sich auf der Webseite wieder.