KeelsonE-Commerce-Website für eine Kajakmarke
Ein responsives Produkt- und Bestellerlebnis für konfigurierbare Kajaks - von der Entdeckung bis zum Checkout
DeutschlandLandKeelson ist eine Kajakmarke mit Modellen, die sich durch verstellbare Sitze, praktischen Stauraum und konfigurierbare Ausstattung an verschiedene Aktivitäten auf dem Wasser anpassen. Xmethod konzipierte, gestaltete und entwickelte eine responsive Produktwebsite, die detaillierte Konstruktions- und Spezifikationsdaten in einen klaren Kaufprozess übersetzt - von der Modellentdeckung bis zur Bestellung.
Was wir gemacht haben
Aufgaben
- 1Detaillierte Kajakdaten in eine klare Produktreise übersetzen
- 2Konstruktion, Komfort, Stauraum und Haltbarkeit visuell erklären
- 3Maße und Traglast leicht verständlich präsentieren
- 4Konfiguration, Warenkorb, Rückruf und Bestellung gestalten
- 5Produktsuche und Bestellung für mobile Screens anpassen
- 6Das responsive Erlebnis in Webflow umsetzen und testen
Das Projekt auf einen Blick
Ausgangslage
Kajaks sind technische Produkte: Vor der Modellwahl müssen Besucher Konstruktion, Maße, Sitzkonzept und Stauraum verstehen. Diese Informationen sollten auch auf dem Smartphone leicht nutzbar bleiben.
Lösung
Wir strukturierten die gesamte Customer Journey, entwickelten in Figma ein visuelles Produktsystem und setzten es in Webflow mit responsiven Modellseiten, Feature-Erklärungen, Spezifikationen, Konfiguration, Warenkorb und Bestellformularen um.
Ergebnis
Produktentdeckung und Bestellung bilden jetzt ein konsistentes Erlebnis. Besucher können relevante Eigenschaften vergleichen, das Kajak konfigurieren und zur Bestellung wechseln, ohne die visuelle Welt der Marke zu verlassen.
2
responsive Kontexte: Desktop und Mobile
4
Konfigurationsoptionen: Modell, Farbe, Sitze und Menge
3
Conversion-Wege: Warenkorb, Detailanfrage und Rückruf
1
durchgängige Journey von der Produktsuche bis zur Bestellung
Ein technischer Kajakkatalog für sichere Kaufentscheidungen
Keelson-Modelle verbinden verstellbare Sitze, Gepäckfächer und Konfigurationen für verschiedene Einsätze auf dem Wasser. Die Website musste deshalb mehr leisten als attraktive Produktbilder zu zeigen. Sie sollte erklären, wie ein Kajak aufgebaut ist, welches Modell zum Einsatz passt und was sich vor der Bestellung anpassen lässt.
Produktdetails als geführtes Einkaufserlebnis gestalten
Ziel war es, umfangreiche technische Informationen schnell erfassbar zu machen, ohne die für erfahrene Käufer wichtigen Details zu verlieren. Besucher sollten sich vom Modellüberblick logisch zu Features, Spezifikationen und Konfiguration bewegen können - und dieselbe Journey bis zu den Lieferdetails bequem mobil durchlaufen.
Technische Komplexität
Maße, Kapazität, Konstruktion und Ausstattung mussten verständlich sein, ohne die Seite in ein Datenblatt zu verwandeln.
Konfigurierbare Produkte
Farbe, Sitzoptionen, Menge und Zusatzausstattung brauchten vor dem Warenkorb einen gemeinsamen Auswahlprozess.
Mobile Bestellung
Lange Produktseiten und Formulare mussten auch auf schmalen Screens klar und handlungsorientiert bleiben.
Die komplette Journey stand vor dem visuellen Design
Desktop- und Mobile-Wireframes definierten den Weg von Vorbestellung und Vergleich über Warenkorb und Rückrufanfrage bis zur Bestellbestätigung. Weil jede Aktion früh ihren Platz bekam, konnten Produktinformation und Conversion als ein System statt als Sammlung einzelner Seiten entstehen.
Orange Akzente machen das Kajak zum Anker der Oberfläche
Das Figma-Design verbindet leuchtendes Orange mit weißen Flächen, kräftiger Typografie und großformatigen Produktbildern. Das Kajak bleibt im Mittelpunkt, während Navigation und Handlungsaufforderungen bewusst zurückhaltend sind. Modulare Inhaltsblöcke trennen Features von Spezifikationen und strukturieren lange Seiten.
Große Visuals führen in die Modelldetails
Ein Modell startet mit einem großen Kajakbild, Farbauswahl und direkten Wegen zur Detailseite. Anschließend verbinden Feature-Karten Nahaufnahmen mit dem jeweiligen Bauteil. So verstehen Besucher verstellbare Sitze, Fußstützen und weitere praktische Details, bevor sie die Konfiguration öffnen.
Praktische Vorteile sind direkt mit dem Kajak verbunden
Handling, Sitzraum und Gepäckstauraum werden mit verschiedenen Produktansichten und kurzen Erläuterungen erklärt. Das Layout zeigt, woher jeder Vorteil kommt: Rumpfform, Sitzposition und Heckfach. Dadurch lassen sich Komfort und Kapazität besser beurteilen als über eine allgemeine Liste von Verkaufsargumenten.
Maße und Traglast werden Teil der visuellen Geschichte
Ein eigener Spezifikationsblock kombiniert eine Maßzeichnung mit Länge, Kabinengröße, Gewicht und Traglast. Die Grafik schafft räumlichen Kontext, während die Karten darunter exakte Werte für die Bewertung und den Vergleich liefern.
Optionen, Preis und Produktdetails in einer Oberfläche
Die Vorbestellseite vereint Galerie, Farbauswahl, Sitzoptionen, Menge und Preis. Besucher können das gewählte Modell mit seinen Eigenschaften prüfen, Ausstattung ergänzen und zum Warenkorb wechseln. Eine Detailanfrage unterstützt außerdem Kunden, die vor der Bestellung mit dem Unternehmen sprechen möchten.
Dieselbe Informationshierarchie funktioniert auf kleinen Screens
Mobil werden Modelleinstieg, Komponenten-Karten und Haltbarkeitserklärungen zu einer klaren vertikalen Abfolge. Große Bilder bleiben dominant, während Typografie und Abstände Übersicht, Feature und Beleg voneinander trennen - ohne die Fläche eines Desktop-Layouts vorauszusetzen.
Konfiguration, Warenkorb und Lieferung bleiben verbunden
Der mobile Ablauf hält Farb- und Ausstattungsoptionen nah am Produktbild und übernimmt die Auswahl anschließend in einen kompakten Warenkorb. Das Bestellformular erfasst Kontaktdaten und zeigt Abholung oder Transportlieferung als klare Optionen, sodass der Kontext bis zum letzten Schritt erhalten bleibt.
Das Figma-System wurde in responsive Webflow-Seiten übersetzt
Die Entwicklung umfasste Navigation, Katalog und Produktdarstellung, Konfigurationsoptionen, Warenkorb und Formulare. Beim Testing standen das Layoutverhalten auf verschiedenen Bildschirmgrößen, Interaktionszustände und die Übergänge zwischen den Einkaufsschritten im Mittelpunkt. Bildskalierung, Abstände und Contentfluss wurden so verfeinert, dass das Produkt auf Desktop und Mobile im Fokus bleibt.
Umsetzung und Prüfung deckten folgende Bereiche ab:
- Responsives Verhalten langer Produkt- und Spezifikationsseiten
- Farb-, Sitz-, Mengen- und Ausstattungsoptionen
- Warenkorb-Aktualisierung und Erhalt der gewählten Konfiguration
- Zustände von Rückruf-, Kontakt- und Lieferformularen
- Bildskalierung und Inhaltshierarchie auf Desktop und Mobile
Ein konsistenter Weg von der Produktgeschichte zur Bestellung
Die fertige Webflow-Website verbindet Keelsons Produktpräsentation mit einem strukturierten Bestellerlebnis. Besucher können die Kajaks visuell entdecken, Konstruktion und Spezifikationen verstehen, eine Konfiguration wählen und zur Bestellung wechseln, ohne in einen losgelösten Verkaufsprozess zu geraten.
Weitere Projekte
FinTechFundora
Investment-Plattform im Web: Kontostand, Investments und Erträge in einem Dashboard, dazu Primär- und Sekundärmarkt sowie Ein- und Auszahlungen.
AgenturbetriebCPD
ERP-System für Arbeitsnachweise, Auszahlungen und Projektfinanzen einer Agentur.
SportSportsForce
Mobile Tinder für Sport-Recruiting: FlutterFlow-App mit Custom-Swipe-Widget, Matching, Ranking und Supabase-Backend.
Lassen Sie uns Ihr Projekt besprechen
Kostenlos & unverbindlich — buchen Sie direkt einen Termin oder schreiben Sie uns eine Nachricht.
Dennis Polevik
CEO
Kostenloses Erstgespräch mit Xmethod
- Kostenlos und unverbindlichUnverbindlich und kostenlos
- Direkt mit dem TeamDirekt aus dem Team, ohne Vertriebsumwege
- Konkreter nächster SchrittSie gehen mit einem konkreten nächsten Schritt raus
Dennis Polevik
CEO
Lassen Sie uns über Ihr Projekt sprechen
Wie geht es weiter?
- Antwort innerhalb eines WerktagsWir prüfen Ihr Projekt und melden uns innerhalb eines Werktags
- Kurzes Gespräch zu Ihren ZielenWir vereinbaren ein kurzes Gespräch zu Umfang und Zielen
- Klares, unverbindliches AngebotSie erhalten ein klares Angebot — unverbindlich, ohne Druck
