Fallstudie

Banan

Eine Modemarke als eigenes Produkt neu gebaut: Shop-Oberfläche, Shop und Admin

Jahr
2026
Rolle
Gründer · Produkt & Design
Plattform
Web, mobiles Web, Admin
Status
Live
Website
bananclothing.com

Banan ist meine eigene Marke für Basics. In zwei Wochen habe ich sie von einem angepassten Shopify-Theme auf ein eigenes Produkt umgestellt: eine Shop-Oberfläche in sechs Sprachen, ein Shop mit Online-Zahlung, Kundenkonten, eingebaute Forschung und ein Admin-Bereich für den täglichen Betrieb.

Design, Produkt und Inhalte von Leo Spektor; Entwicklung KI-gestützt (Claude Code).

Basics, die gleich bleiben

Banan entstand 2009 in Kyjiw als kleine T-Shirt-Marke. 2026 kam sie mit einer neuen Idee zurück: Basics als Produktsystem, nicht als Mode. Oversized-T-Shirts, Hoodies, Sweatshirts, Hosen und Tops ohne Logos und ohne Saisons.

Menschen kaufen Basics immer wieder, doch jede Saison ändern sich Schnitt, Stoff oder Farbe, und das Lieblingsteil ist weg. Banan hält eine feste Kernkollektion mit gleichem Schnitt und gleichem Größensystem. Jedes Teil wird auf Bestellung gefertigt, nichts liegt im Lager.

Ein Shop-Theme reichte für den Start nicht

Die Marke lief auf einem stark angepassten Shopify-Theme. Es sah richtig aus, doch der Start brauchte mehr: eine Warteliste vor der Shop-Eröffnung, Forschung mit künftigen Kundinnen und Kunden, eigene Kundendaten in der EU, Zahlung im Markt der Marke und mehrere Sprachen vom ersten Tag an.

Ich habe die Marke als eigenes Produkt neu gebaut und alles behalten, was am alten Auftritt gefiel: die dunkle Bühne, die Fotos, die ruhige Typografie. Ziel war ein System, in dem Shop-Oberfläche, Shop, Forschung und Admin mit denselben Daten arbeiten.

Den Look behalten

Die Kundschaft kannte die dunkle, fotogetriebene Website. Der Neubau sollte sich gleich anfühlen, nur schneller und klarer.

Eigene Daten

Abonnenten, Bestellungen und Antworten liegen in der eigenen Datenbank der Marke in der EU, nicht in fremden Tools.

Start in Schritten

Zuerst die Warteliste, dann der Shop. Der Wechsel ist eine Einstellung, kein Redesign.

Allein betreiben

Eine Person führt die Marke im Alltag, also musste der Admin echte Fragen schnell beantworten.

Die Fotos führen, die Oberfläche tritt zurück

Die Shop-Oberfläche folgt einem schriftlichen Designsystem mit sieben Regeln: schwarze Bühne mit weißer Schrift, Linien statt Flächen, leichte Schriftstärke, keine Radien und Schatten, Fotos ohne Text darüber. Der Katalog zeigt alle 47 Produkte auf einer Seite mit Filtern nach Verfügbarkeit, Preis, Farbe und Art.

Auf der Produktseite wählt man Farbe und Größe, sieht den Bestand je Größe und den Hinweis zur Fertigung auf Bestellung. Auf dem Handy wird das Raster der Startseite zu einem Fotostreifen in jeder Kachel.

Startseite — Fotoraster
Fotoraster der Startseite von Banan
Produktseite — Farbe, Größe, Bestand
Produktseite von Banan
Startseite auf dem Handy
Startseite von Banan auf dem Handy
Produkt auf dem Handy
Produktseite von Banan auf dem Handy
Checkout auf dem Handy
Checkout von Banan auf dem Handy

Ein Checkout auf einem Bildschirm

Warenkorb und Checkout sind ein kurzer Weg. Der Checkout hat drei nummerierte Teile: Kontakt, Lieferung und Zahlung. Die Felder sind groß und immer sichtbar, der Bezahl-Button zeigt den Betrag, und auf dem Handy hält eine fixierte Leiste Summe und Button in Reichweite.

Versand wird nach Land und Gewicht berechnet, Gutscheincodes und Anzeigewährung sind eingebaut, bezahlt wird online. Nach der Bestellung bekommt man ein Konto per E-Mail-Code, ohne Passwort, um die Bestellung zu verfolgen und eine Rücksendung anzufragen.

Zum Warenkorb hinzugefügt
Warenkorb von Banan
Checkout — Kontakt, Lieferung, Zahlung
Checkout von Banan
Kundenkonto — Anmeldung per E-Mail-Code
Anmeldung zum Kundenkonto von Banan

Kundinnen und Kunden fragen, bevor der Shop öffnet

Vor dem Start bietet die Produktseite „Join the list“ statt „In den Warenkorb“. Man hinterlässt eine E-Mail für Produkt, Farbe und Größe, und die Marke weiß, was sie zuerst fertigen soll.

Eine kurze Umfrage fragt, wie Basics sein sollen: drei Minuten Fragen für 50 % Rabatt auf ein Teil. Im Admin vergleiche ich die Antworten derer, die abgeschlossen haben, mit denen, die abgebrochen haben, und sehe, wo Menschen aussteigen.

Die Analyse gehört der Marke selbst: anonyme Ereignisse ohne Cookies, ein Einwilligungsbanner für alles Weitere, Do Not Track wird respektiert.

Umfrage — die Einladung
Kundenumfrage von Banan
Umfrageergebnisse im Admin (Demodaten)
Umfrageergebnisse im Admin von Banan

Ein Ort, um die Marke zu führen

Der Admin ist mein tägliches Werkzeug. Traffic, Besucher, Bestellungen, Katalog, Personen und Besuche, Umfrage, Kundenkonten, Abonnenten und Nachrichten haben je eine eigene Seite. Jede Zahl führt zur Liste dahinter.

Der Katalog wird direkt bearbeitet: Bestand je Größe, Farbgruppen, Tags, Fotos und ein Verlauf jeder Änderung. Der Zugang ist doppelt geschützt: Nur der Inhaber kann sich anmelden, und der Server prüft das Anmelde-Token bei jeder Anfrage erneut.

Ich nutze den Admin auf Russisch, meiner Arbeitssprache; für diese Screenshots sind die Beschriftungen auf Englisch. Sie zeigen Demodaten, keine echten Kundinnen und Kunden.

Traffic
Traffic-Übersicht im Admin von Banan
Bestellungen
Bestellungen im Admin von Banan
Katalog bearbeiten
Katalog im Admin von Banan
Personen und Besuche — Weg zum Kauf
Analyse im Admin von Banan

Ein Shop, sechs Sprachen

Jede Seite gibt es auf Englisch, Ukrainisch, Deutsch, Französisch, Spanisch und Russisch, auch die Rechtstexte, E-Mails und das Konto. Die Übersetzungen kommen aus gemeinsamen Wörterbüchern und einem Glossar, damit ein Produkt oder ein Button überall gleich heißt.

Sprach- und Währungswahl auf dem Handy
Sprach- und Währungswahl von Banan auf dem Handy
Besucher nach Land und Kanal (Demodaten)
Besucher im Admin von Banan

Kleiner Stack, viele Prüfungen

Die Website ist statisch und schnell, Serverfunktionen gibt es nur, wo sie nötig sind: Formulare, Bestellungen, Zahlung und Konto. Sie läuft auf Cloudflare mit einer Datenbank in der EU. 82 Abonnenten und Kunden wurden ohne Verluste aus den alten Tools übernommen.

Ich habe das Produkt gestaltet und die Spezifikationen geschrieben; der Code entstand KI-gestützt (Claude Code) und wird von 179 automatischen Tests in 43 Testdateien geprüft: Formulare, Checkout, Zahlungsstatus, Übersetzungen, Breiten von 360 bis 1440 px. Ein Skript baut, prüft und veröffentlicht und stoppt beim ersten roten Ergebnis.

2 Wochen Vom Shopify-Theme zum eigenen Produkt
47 Produkte in einem Katalog
6 Sprachen
179 Automatische Tests

Gebaut für Wiederkäufe

Banan ist als Direct-to-Consumer-Marke geplant, Startmärkte sind die Niederlande, Deutschland, Schweden und Dänemark. Die Zahlen unten sind Ziele aus dem Investoren-Deck, noch keine Ergebnisse.

€128 Ziel: durchschnittliche Bestellung
€2.000 Ziel: Kundenwert über die Zeit
€20 Ziel: Kosten pro Kunde
€500k Geplante Pre-Seed-Runde

Was ich gelernt habe

Designer und Inhaber zugleich zu sein, verändert die Fragen. Ich frage nicht mehr, wie ein Screen aussieht, sondern welche Entscheidung er mir heute erleichtert.

  1. Ein Start ist eine Abfolge, kein Datum. Warteliste, Umfrage und Shop als ein System zu gestalten, machte jeden Schritt zu einer Einstellung statt zu einem neuen Projekt.
  2. Forschung ist im Produkt am günstigsten. Eine Umfrage mit klarer Belohnung und ein Admin, der abgeschlossene und abgebrochene Antworten vergleicht, sagten mir mehr als jede Interviewrunde.
  3. KI-gestützte Entwicklung ist nur mit klaren Spezifikationen und Tests schnell. Das Designsystem-Dokument und die Tests hielten zwei Wochen schneller Arbeit konsistent.