Onlineshop und Website für Cupper Teas
Cupper Teas: Ein Auftritt, so bunt wie das Teeregal
Wir haben Onlineshop und Website von Cupper Teas entwickelt. Der Auftritt zeigt das ganze Sortiment der Bio-Marke und führt mit einem Klick dorthin, wo es die Tees zu kaufen gibt.
Die Startseite
25.000+
zufriedene Kund:innen laut Cupper
6
Kategorien für das ganze Sortiment
25
Teesorten im Filter
6
Händler hinter einem einzigen Button
Ausgangslage
Viele Sorten, eine klare Bühne
Cupper mischt seit 1984 Tee im englischen Dorset: fair gehandelt, in Bio-Qualität und in Packungen, die man im Regal sofort wiedererkennt. Genau diese Farbigkeit sollte auch online tragen.
Unsere Aufgabe war ein Shop, der das Sortiment ordnet, ohne die Marke zu bändigen. Wer eine bestimmte Sorte sucht, findet sie in Sekunden. Wer stöbern will, bekommt Lust auf die nächste Tasse.
Topseller auf der Startseite
Lösung
Drei Zutaten für den Auftritt
01
Produktwelt mit Ordnung
Geschenke, Kräutertee, Früchtetee, Destinations, Wintertee und Matcha: Sechs Kategorien und ein Filter nach Teesorte machen aus einem großen Sortiment eine kurze Suche.
02
Ein Button zum Kauf
„Online kaufen“ steht an jedem Produkt. Ein Klick zeigt, wo es die Sorte gibt, und führt direkt dorthin.
03
Die Marke erzählt mit
Illustrationen aus der Verpackung ziehen sich durch die ganze Seite. Story, Fairness und Blog geben der Marke Raum neben den Produkten.
Produktwelt
Jede Sorte ist schnell gefunden
Oben die Kategorien, darunter der Filter nach Teesorte, dann die Produkte mit Bild, Kurzbeschreibung und zwei klaren Buttons.
- Alle Produkte
- Geschenke
- Kräutertee
- Früchtetee
- Destinations
- Wintertee
- Matcha Powder
Die Produktübersicht
Produktseite „Be Happy Bio“
Produktseite
Alles Wichtige neben der Packung
Die Produktseite hält sich kurz und sagt trotzdem alles, was man vor dem Kauf wissen will.
Auf einen Blick
Name, Geschmacksrichtung und ein kurzer Text stehen direkt neben der Packung.
Packungsgröße wählen
20 oder 50 Beutel: Die Größe lässt sich direkt am Produkt umschalten.
Online kaufen
Der Button öffnet die Auswahl der Händler, die das Produkt führen.
Zutaten
Die Zutatenliste klappt auf, wenn man sie braucht, und nimmt sonst keinen Platz weg.
Siegel
Bio- und Fairtrade-Siegel sitzen sichtbar am Produkt.
Der Weg zum Kauf
Wo gibt es das? Hier.
Ein Fenster zeigt alle Händler, die das Produkt führen, und verlinkt direkt dorthin. So endet jede Produktseite mit einem klaren nächsten Schritt.
Die Händlerauswahl an jedem Produkt
Marke
Mehr als ein Regal
„Unsere Story“: die Geschichte der Marke
Der Cupper Blog
Mobil
Passt in jede Teepause
Auf dem Smartphone bekommt die Startseite ein eigenes Motiv im Hochformat, die Produkte stehen zu zweit nebeneinander und die Buttons sind groß genug für den Daumen.
Mehr dazu, wie wir das angehen: Responsive Webdesign.
Startseite
Produktübersicht
Leistungen
Das haben wir für Cupper gemacht
- Onlineshop Konzept, Design und Entwicklung des Shops für die Bio-Teemarke.
- Produktwelt Kategorien, Filter und Produktseiten für das ganze Sortiment.
- Händler-Verlinkung Ein Button pro Produkt, der zu allen Verkaufsstellen führt.
- Webdesign Ein Auftritt, der die Illustrationen der Verpackung auf die Seite holt.
- Entwicklung Technische Umsetzung in WordPress, inklusive Blog.
Designsystem
Papier, Oliv und sehr viel Illustration
Der Hintergrund erinnert an Papier, das Olivgrün führt durch Buttons und Links. Die Farbe kommt von den Packungen und den Illustrationen, die jede Kategorie eröffnen.
- Schwarz #262626
- Oliv #96982F
- Dunkeloliv #737524
- Papier #F4F3F0
- Limette #E2E68A
- Weiß #FFFFFF
Dein Sortiment braucht auch eine Bühne?
Ob neuer Onlineshop oder Marken-Website: Wir entwickeln Auftritte, die verkaufen. Erzähl uns von deinem Produkt.
