Webdesign Zweirad Petersen

Mobil optimierte Website für Zweirad-Werkstatt mit sortierbarer Produktübersicht.

  • Handwerker-Website des Jahres 2016 und 2017 in der Kategorie KFZ Die Website von Zweirad Petersen vereint optimiertes Webdesign und hohe Funktionalität — 2016 und 2017 als Handwerkerseite des Jahres in der Kategorie KFZ ausgezeichnet.
  • Werkstatt Homepage - Webdesign mit authentischem BildmaterialEinblicke in das Unternehmen und ein Design mit authentischem Bildmaterial bringen den Besuchern das Leistungsangebot der Zweirad-Werkstatt auf sympathische Art nahe.
  • Darstellung von Mobil-Navigation, Shop-Produkt und Abschlepp-Rechner auf dem SmartphoneOb Navigation, Online-Shop, Abschlepp-Buchung mit Preiskalkulation oder andere Features — selbst auf dem Smartphone lassen sich sämtliche Inhalte komfortabel nutzen.
  • Rahmen-Rechner im Onlineshop der Zweirad- WebsiteService wird auch beim Fahrradhandel groß geschrieben — auf der Website ebenfalls. Im Onlineshop lässt sich anhand der Körpermaße die optimale Rahmengröße berechnen.
  • Handwerker-Website des Jahres 2016 und 2017 in der Kategorie KFZ Die Website von Zweirad Petersen vereint optimiertes Webdesign und hohe Funktionalität — 2016 und 2017 als Handwerkerseite des Jahres in der Kategorie KFZ ausgezeichnet.
  • Kunde: Zweirad Petersen
  •   Halstenbek / Deutschland
  • Projekt: Firmen-Website mit Onlineshop
  •   Modern, vertikal geteilt
  • Erstellung: 2015
  • Relaunch: 2017

Features

- vertikal geteiltes Layout auf vielen Seiten im Desktop-Bereich, vollflächige Nutzung des gesamten Bildschirms
- Startseite mit zwei ineinanderliegenden Slidern, rein mit HTML5 und CSS umgesetzt
- Produktdarstellung mit Filterfunktion
- Anfahrtskarte via Google API, mit individueller Anpassung
- mobil optimiertes Kontaktformular
- Auszeichnung mit Mikrodaten (LocalBusiness/Product)
- Anbindung an Google Analytics / Google Webmaster Tools

Beschreibung

Zweirad Petersen bietet Werkstattleistungen für Fahrräder und Roller an und handelt auch damit. Aufgabenstellung für dieses Projekt war eine Website zu erstellen, die sich von den Mitbewerbern deutlich abhebt, die über die Tätigkeitsbereiche informiert und eine erweiterbare Möglichkeit zur Produktpräsentation bietet.

Das Webdesign der Startseite wurde mit einem vollflächigen Bilder-Slider umgesetzt. Abwechselnd werden hier mit Überblendungseffekt ein Bild für die Zielgruppe „Fahrrad“ und ein weiteres für die Zielgruppe „Motorroller“ angezeigt um visuell den Themenbereich der Website zu vermitteln. Ergänzt werden die Bilder durch kurze Beschreibungen der Tätigkeitsbereiche und Auflistungen der Hauptleistungen. Zusätzlich zur Hauptnavigation werden auf der Startseite unter dem Slider die neuesten vier Produkte mit einem Hinweis auf die Produktseite vorgestellt.

Zwei Unterseiten der Website stellen die Werkstatt und das Unternehmen aus Halstenbek vor. Auf beiden Seiten wurde der Bildschirm in der Desktop-Ansicht vertikal geteilt. Auf der einen Hälfte befinden sich die Inhalte mit Bildmaterial in verschiedenen Formaten und Ausrichtungen, auf der anderen Hälfte befindet sich ein groß dimensioniertes Foto. Diese Aufteilung wurde gewählt um die Textinhalte sehr aufgelockert darzustellen und um einen hohen Wiedererkennungswert bei der Unternehmensdarstellung zu erreichen.

Auf der Produktseite werden die Fahrzeuge mit Bild, den wichtigsten Eckdaten und Preisen in einzelnen Boxen angezeigt. Über eine zusätzliche Navigationsleiste sorgt dafür, dass Interessenten sich die Produkte nach Produktgruppe filtern lassen können, was die Übersicht bei größeren Produktmengen erleichtern soll. Zu jedem Produkt finden die Besucher auf einer Unterseite Detail-Informationen, wie beispielsweise die technischen Daten.

Produktvoschau im Onlineshop
Design der Produktansicht mit Detailbildern
Abschlepp-Rechner via jQuery und Google Maps API
Rahmen-Rechner als Service für den Onlineshop

Je nach Produkt können Interessenten über die Produkt-Detailseiten auf einen Leasing-Rechner (Fahrräder und E-Bikes) oder Finanzierungs-Rechner (Motorroller) zugreifen, der je nach Laufzeit die monatlichen Raten ausrechnet.

Eine weitere Berechnung-Routine ist auf der Unterseite für den Abschleppservice zu finden. Hier können Kunden durch Eingabe ihres Standorts (Straße und Ort) die Kosten für die Abschleppung ermitteln lassen. Die Routine ermittelt über eine Google-Maps-API im Hintergrund die Entfernung, gibt darauf hin den Preis an und zeigt dem Kunden seinen Standort zur Kontrolle auf einer kleinen Karte an. Im Anschluss kann der Service dann auch gleich online bestellt werden.

Die Kontaktseite ist angelehnt an das Webdesign der übrigen Unterseiten auch vertikal zweigeteilt. Hier wird die eine Hälfte des Bildschirms für eine Anfahrtskarte auf Basis von Google Maps API genutzt, damit die Kunden möglichst komfortabel zu dem Standort in Halstenbek gelangen. Die übrige Fläche beinhaltet die Kontaktdaten, die Öffnungszeiten, eine Anfahrtsbeschreibung und natürlich ein Kontaktformular.

Die Website des Mechanikers wurde für Suchmaschinen optimiert und mit Mikrodaten-Markup (Firmendaten, Kontaktdaten, Öffnungszeiten, Produkte) versehen, um die Darstellung in den Ergebnissen von Google aufzuwerten. Ergänzt wurde dies mit einem Google Business-Profil und Google Analytics zur Erfolgskontrolle.

Auszeichnung

Die Website von Zweirad Petersen wurde zur bei der Wahl der „Handwerkerseite des Jahres“ von MyHammer zur Handwerkerseite 2016 und Handwerkerseite 2017 in der Kategorie KFZ gewählt.

Handwerkerseite des Jahres - KFZHandwerkerseite des Jahres - KFZ