Burner – Eine Hardware-Wallet, verkauft als Objekt statt als Datenblatt
Burner ist eine Hardware-Wallet im Kartenformat zum Halten, Ausgeben und Verschenken von Krypto. Die Website musste ein physisches Objekt an Leute verkaufen, die Software zu kaufen gewohnt sind – also führt die Produktfotografie, und die technischen Details folgen.
Aufgabe
Hardware-Wallets werden meist über Sicherheitsmerkmale vermarktet: Das klingt nach Angst und sieht bei jedem Wettbewerber gleich aus. Burner sollte wie ein durchdachtes Konsumprodukt wirken – etwas, das man jemandem in die Hand gibt – und trotzdem die Sicherheitsfragen beantworten, die über den Kauf entscheiden.
Vorgehen
Wir haben die Seite um Fotos der Karte in einer Hand in Originalgröße gebaut, mit einer Serifen-Überschrift, die eher nach Magazin klingt als nach Krypto-Website. Die Bühne rotiert durch die Produktlinie, damit jede Variante dieselbe Behandlung bekommt, und die Kaufoptionen sitzen in der Bühne statt am Ende des Scrollwegs.
Mit dem Objekt beginnen
Der erste Bildschirm ist ein Foto der Karte, gehalten in einer Hand. Nichts vermittelt Größe und Verarbeitung eines physischen Produkts schneller, und es umgeht die Diagramm-und-Icon-Konvention, in die diese Kategorie sonst verfällt.
Die Kaufwege sitzen direkt unter der Überschrift – Direktkauf neben dem Marktplatz –, damit jemand, der schon weiß, was er will, nicht erst scrollen muss.
Eine Bühne, die eine ganze Produktlinie trägt
Burner gibt es in mehreren Varianten, und eine eigene Seite je Variante hätte die Geschichte zerrissen. Stattdessen ist die Bühne ein Karussell: gleiches Layout, gleiche Typografie, anderes Produkt und andere Farbe, mit Punkten als einziger Bedienung.
Weil das Layout geteilt wird, ist eine neue Variante eine Inhaltsänderung und keine Designaufgabe.
Redaktionelle Typografie statt Krypto-Konvention
Die Überschrift steht in einer kontraststarken Serifenschrift, in einer Größe, die man sonst aus dem Druck kennt. Der Fließtext bleibt kurz und schlicht – was es tut, wie man es benutzt, was es kostet –, und die technische Absicherung kommt, nachdem man das Produkt gesehen hat, nicht davor.
Die Farben stammen vom Produkt selbst, also lesen sich Seite und Objekt als dieselbe Marke und nicht als Website über ein Ding.
Umsetzung
Die Website ist eine Next.js-Anwendung auf Vercel. Produktbilder sind naturgemäß schwer, deshalb tragen die Bühnenbilder ausdrückliche Größen- und Prioritätsangaben, und das Karussell lädt nur die benachbarte Ansicht vor, nicht den ganzen Satz.
Was entstanden ist
- Produktgeführte Startseite mit Kaufoptionen direkt in der Bühne
- Rotierende Bühne für die ganze Produktlinie aus einem gemeinsamen Layout
- Next.js-Build, veröffentlicht auf Vercel
Häufige Fragen
Burner ist ein physisches Objekt, und Größe, Verarbeitung und Haptik beantwortet ein Foto sofort, eine Merkmalsliste nie. Die technischen Details stehen trotzdem da – nur nachdem man das Produkt gesehen hat.
Sie teilen sich ein Bühnenlayout und rotieren in einem Karussell, damit jede Variante dieselbe Darstellung bekommt und eine neue eine Inhaltsänderung bleibt statt eines Redesigns.
Mit Next.js, veröffentlicht auf Vercel.
Ein Blick in die Website
„Wir wollten nicht, dass Burner wie noch ein technisches Krypto-Produkt aussieht. Sakura hat es wie ein echtes Konsumprodukt wirken lassen und die wichtigen Details trotzdem drin behalten. Wir sind sehr zufrieden mit dem Ergebnis.“