CASE /// ERFUNDENE GETRÄNKEMARKE · SHOWCASE
PULPA
Konzept von RAVAROErfundene Marke · ein Showcase von RAVARO.
Eine Limonade, die es nicht gibt, auf einer Website, die Dinge kann, die die meisten Websites nicht können.
pulpa-drink.vercel.app
Zur SeiteAm besten zuerst erleben, dann hier weiterlesen.
Öffnet in neuem Tab
Websites, die alle gleich aussehen
Fast jeder Betrieb, mit dem wir sprechen, sagt zuerst: „Eine Website haben wir.“ Und meistens stimmt das. Nur sieht sie aus wie die vom Nachbarn: Bild oben, drei Kästen, Kontaktformular. Wer so auftritt, wird verglichen, und verglichen wird dann nur noch der Preis.
Das lässt sich erklären, aber Erklärungen ändern daran wenig. Wer noch nie erlebt hat, was eine Website kann, glaubt es nicht, bis er es selbst in der Hand hatte. Also haben wir aufgehört, es zu behaupten, und etwas gebaut, das man anfassen kann.
→ Dafür brauchten wir ein Produkt, das jeder kennt — und eine Idee, die man nicht vergisst.
Eine Marke, die es nicht gibt
Wir haben eine Limonade erfunden. Eine Dose kennt jeder, keine Branche fühlt sich ausgeschlossen, und ob man sie haben will, entscheidet man in drei Sekunden. Genau diese drei Sekunden muss auch Ihre Website gewinnen.
Vorn spielt PULPA ohne Augenzwinkern: vier Sorten, ein Logo, eine Dose, deren Rückseite stimmt. Erst wenn man eine Dose aufmacht, kippt die Seite: „PULPA gibt es nicht. Diese Website schon.“ Das ist ein Pattern Interrupt — ein Bruch mit dem, was das Gehirn erwartet, und deshalb bleibt er hängen.
Wer bis zur Lasche kommt, wollte gerade etwas kaufen, das es nicht gibt. Einen besseren Beweis, dass eine Website verkaufen kann, haben wir nicht.
→ Damit das funktioniert, musste die Marke echt wirken. Also haben wir mit der Marke angefangen, nicht mit der Seite.
Erst die Marke, dann die Seite
Bevor eine Zeile Code entstand, haben wir PULPA positioniert, so wie wir es bei jedem Kunden tun: Wer kauft das, wann, und wogegen tritt es an? Die Antwort: Koffein aus der Kaffeekirsche, 80 mg je Dose, ohne Taurin — „Energy-Drinks sind für die Nacht gebaut. PULPA ist für den Nachmittag.“ Dazu eine Käuferin mit Namen, Alter und Alltag, an der sich jeder Satz messen lassen musste.
Name, Sorten und Logo haben wir gegen den Markt geprüft. Eine Annahme fiel dabei sofort um: Getränke aus der Kaffeekirsche gibt es schon, in Berlin. Für einen Showcase haben wir das offen notiert; für einen echten Kunden wäre das der Moment, umzuplanen.
Warum dieser Aufwand für eine erfundene Marke? Weil eine Website ohne Geschichte Dekoration bleibt. Die Effekte, die jetzt kommen, sind nur so gut wie der Grund, aus dem sie da sind.
→ Und jeder davon hat einen Grund.
Jeder Effekt hat eine Aufgabe
Auf PULPA ist nichts Dekoration. Jeder Effekt übernimmt eine Aufgabe, die auf einer echten Website ein Verkäufer hätte: Aufmerksamkeit holen, Vertrauen schaffen, erklären, beraten, zur Handlung führen. Die Clips sind Mitschnitte; auf der Seite selbst rechnet der Browser jede Bewegung in dem Moment aus, in dem Sie scrollen, wischen oder tippen.
- 01 / 06
Durch die Sorten wischen
- Seine Aufgabe
- Aufmerksamkeit in den ersten drei Sekunden — bevor jemand weiterklickt.
- Was passiert
- Die Dose bleibt stehen, Farbe, Früchte und Schriftzug wechseln mit jeder Sorte — per Wischen, Pfeil oder Scrollen.
- So ist es gemacht
- Die Bühne besteht aus einzelnen Ebenen: Hintergrund, Dose, Früchte, Spritzer und der Sortenname als echter Text. Jede Ebene bewegt sich mit eigenem Tempo, das ergibt die Tiefe. Weil der Name Text ist und kein Bild, bleibt er scharf und für Suchmaschinen lesbar.
- Bei Ihnen:
- Ihre Leistungen oder Modelle als Bühne, durch die der Kunde wischt, statt eine Liste zu lesen.
- 02 / 06
Die Dose dreht sich um
- Seine Aufgabe
- Vertrauen: Was drin ist, steht drauf, und man muss nicht danach suchen.
- Was passiert
- Beim Scrollen dreht sich eine echte 3D-Dose zur Rückseite, die 80 mg Koffein zählen hoch, der Pflichthinweis steht im Wortlaut daneben.
- So ist es gemacht
- Die Dose ist ein echtes 3D-Modell, das im Browser gerendert wird; das Etikett ist als flache Druckvorlage um sie gewickelt. Die Drehung hängt am Scrollen: Wer zurückscrollt, dreht sie zurück. Der Text der Rückseite ist echter Text, damit der Pflichthinweis wörtlich stimmt. Geräte ohne 3D-Unterstützung bekommen Standbilder.
- Bei Ihnen:
- das Produkt von allen Seiten, mit den Angaben genau dort, wo der Kunde gerade hinschaut.
- 03 / 06
Ausgießen statt Trennlinie
- Seine Aufgabe
- Den Faden halten: Der Übergang trägt den Besucher ins nächste Kapitel, statt ihn mit einer Linie abzusetzen.
- Was passiert
- Zwischen zwei Abschnitten kippt eine Dose, und die Seite füllt sich mit Limonade, in der Kohlensäure aufsteigt.
- So ist es gemacht
- Die Limonade wird live gezeichnet, nicht abgespielt: eine wellige Oberfläche, Kohlensäure in drei Tiefen, Lichtstrahlen, Fruchtfasern, die beim Scrollen aufwirbeln. Gemessen läuft das mit 60 Bildern pro Sekunde.
- Bei Ihnen:
- Übergänge aus Ihrem eigenen Material — Holz, Beton, Wasser — statt grauer Striche zwischen den Kästen.
- 04 / 06
Die Kaffeekirsche bricht auf
- Seine Aufgabe
- Das eine Unbekannte erklären — Koffein wächst an einer Kirsche — so, dass man es nicht mehr vergisst.
- Was passiert
- Eine Kirsche fällt durchs Getränk und öffnet sich, bis Samen und Fruchtfleisch beschriftet nebeneinander liegen.
- So ist es gemacht
- Ganze Kirsche, Hälften und Samen sind einzelne Bilder aus demselben Licht, damit beim Aufbrechen nichts springt. Alles hängt an einem einzigen Scrollwert: vorwärts öffnet sich die Kirsche, rückwärts schließt sie sich wieder. Die Schilder sind echter Text.
- Bei Ihnen:
- das eine, was Kunden über Ihr Handwerk nicht wissen, Schritt für Schritt aufgeklappt statt in einem Absatz erklärt.
- 05 / 06
Der Sortenfinder als Spiel
- Seine Aufgabe
- Beraten: Aus „welche nehme ich?“ wird in drei Fragen eine Empfehlung.
- Was passiert
- Drei Fragen, ein Rad aus Dosen, das sich mitdreht, und am Ende die passende Sorte — die Seite färbt sich in ihre Farbe.
- So ist es gemacht
- Drei Fragen mit je vier Antworten, jede Antwort gibt Punkte für eine Sorte. Daneben dreht sich ein Rad aus vier 3D-Dosen wie ein Glücksrad mit Federung nach. Das Ergebnis färbt die ganze Seite ein, und der Knopf führt direkt zur passenden Dose.
- Bei Ihnen:
- Bedarfsermittlung, die Spaß macht und beim passenden Angebot endet statt in der Preisliste.
- 06 / 06
Die Lasche ziehen
- Seine Aufgabe
- Handeln: Aus Neugier wird eine Bewegung, und aus der Bewegung eine Anfrage.
- Was passiert
- Wer eine Dose aufmacht, erlebt, wie die Seite sich umdreht und zur Website von RAVARO wird. Der Moment, für den die ganze Seite gebaut ist.
- So ist es gemacht
- Ziehen, tippen, klicken oder Tastatur: Jede Geste hat einen zweiten Weg. Nach dem Öffnen fährt die Kamera auf den Deckel, ein Kreis im dunklen Grund von RAVARO wächst über die Seite, und die Farbwelt wechselt von der Marke zu uns.
- Bei Ihnen:
- der Moment, in dem aus Neugier eine Anfrage wird — mit einer Geste statt mit einem Formular.
→ So viel Bewegung hat einen Preis, wenn man sie falsch baut. Wir haben sie so gebaut, dass sie keinen kostet.
Gebaut wie ein Produkt
Die meisten Seiten mit solchen Effekten spielen Videos ab. Das ist schwer, unscharf und am Handy langsam. PULPA besteht stattdessen aus Ebenen: Hintergrund, Dose, Früchte und Spritzer liegen einzeln übereinander, 28 Bildlagen für vier Sorten, dazu eine echte 3D-Dose und Limonade, die live gezeichnet wird.
Das Ergebnis messen wir, statt es zu behaupten: 100 von 100 Punkten bei Google Lighthouse am Handy, das größte Bild nach 1,8 Sekunden sichtbar, keine einzige Anfrage an fremde Server, keine Cookies. Schnelligkeit ist kein Technik-Detail — jede Sekunde Warten kostet Besucher, bevor sie überhaupt etwas gesehen haben.
Gemessen
→ Ob die Seite wirkt, haben wir allerdings nicht selbst entschieden.
Gemessen mit WebGainer, nicht mit Bauchgefühl
Ob eine Seite wirkt, entscheidet bei uns nicht unser Gefühl, sondern WebGainer, unser eigenes Prüfwerkzeug: 80 Prüfpunkte vom ersten Eindruck bis zum Weg zur Anfrage, am Ende eine Note von 100. Damit die Note nicht freundlich ausfällt, misst eine Prüfung, die die Seite nicht gebaut hat.
Die erste Messung gab 57 und fand, was unsere eigenen Abnahmen übersehen hatten: Wer die Lasche nicht zieht, sieht nie den Satz, der die Seite erklärt. Wir haben jede Runde die Befunde abgearbeitet und neu gemessen, bis 84. Zur letzten Runde gehört ein ehrlicher Hinweis: Erst da wusste die Prüfung, dass Besucher von ravaro.de kommen und RAVARO schon kennen.
Dasselbe Werkzeug misst auch Ihre Website, in rund einer Minute, kostenlos und ohne Gespräch.
→ Nicht jede Runde lief glatt. Was schiefging, gehört zur Geschichte dazu.
Was schiefging und was wir daraus gelernt haben
- Was passierte
Die erste Prüfung von außen fand, was unsere eigenen Abnahmen übersehen hatten: Wer die Lasche nicht zieht, sieht nie den Satz, der die Seite erklärt.
→ Was wir seitdem anders machenSeitdem führt ein sichtbarer Weg dorthin, und die Seite stupst an, wenn man zu lange wartet.
- Was passierte
Die drehende Dose ließ beim ersten Bau die Seite einfrieren, weil sich der Bildtakt mit jedem Bild verdoppelte.
→ Was wir seitdem anders machenSeitdem wird Bewegung gemessen — Bilder je Sekunde, Bilder in Ruhe —, nicht nur angesehen.
- Was passierte
Die Lasche ließ sich anfangs nur ziehen, nicht antippen.
→ Was wir seitdem anders machenJede Geste hat jetzt einen zweiten Weg: Tippen, Klicken, Tastatur.
- Was passierte
Ein fertiges Formular-Bauteil siezte auf einer Seite, die duzt.
→ Was wir seitdem anders machenÜbernommene Bausteine werden seitdem auf ihre Anrede geprüft.
PULPA gibt es nicht zu kaufen. Rezept, Sorten und Etikett sind erfunden, die Bilder mit KI erzeugt. Die rechtlichen Angaben — Impressum, Datenschutz, Koffein-Hinweis im Wortlaut — haben wir selbst geprüft, nicht von einem Anwalt. Auf einem echten iPhone steht der Test noch aus; geprüft ist mit dem Safari-Motor im Browser.
Was das für Ihre Website heißt
PULPA ist erfunden. Was dahinter steckt, ist es nicht: eine klare Positionierung, eine Seite, die erzählt statt aufzählt, Effekte mit Aufgabe, eine Ladezeit, die nichts verschenkt, und eine Prüfung von außen, bevor irgendetwas live geht.
Genau so bauen wir Ihre Website. Und Sie sehen sie, bevor Sie sich entscheiden.
Eine Website, die nur gut aussieht, ist totes Kapital. Website Systems baut eine Seite aus Ihren echten Unternehmenszielen — die Ihnen Arbeit abnimmt und Besucher zu echten Anfragen macht.
WEITERE CASES ///
Nächster Build
Jade Tempel
Was wäre, wenn Ihre Gäste den Weg zu Ihnen schon gegangen wären, bevor sie anreisen? 1.284 Stufen, eine Halle aus Jade, ein Drache nach dem Gewitter — eine Website, die man nicht ansieht, sondern besteigt.
NEPHELE Residences
Niemand kauft das Projekt. Man kauft Wohnung A1803.
Leuchtfeuer Nordsee
Vier Tage, zehn Fassungen, ein Leuchtturm — und eine Linse, die man selbst zerlegt.
NUIT VISIBLE
Einen Duft kann man nicht zeigen. Also erzählt ihn der Scroll.
The Elite Cars
Ein Supersportwagen-Händler, dessen Website schon gut aussah — und trotzdem keinem etwas verkaufen konnte, der keine Lust hatte, vorbeizufahren.
CLAW BBQ
Ich kenne diesen Ort. Ihre Website nicht.
Juwelier Dührkoop
Feine Uhren, verkauft von einer Seite, in die man sich nicht hineinlehnen konnte.
Andy Engel
Ein Mann, für den Menschen über Kontinente fliegen — mit einer Website für Leute, die vorbeifahren.
BSD Wiedemann
Wir haben seine Website aufhören lassen, Feuerlöscher zu verkaufen — damit das Unternehmen Expertise verkaufen kann.
Hofmühl
Eine Brauerei verkauft auf ihrer Website kein Bier. Sie verkauft den Grund, warum jemand im Laden nach dieser Flasche greift.
Aurora Grand
Eine Hotel-Website, durch die man läuft, bevor man bucht.
Alle unsere Website-Arbeiten
Alle Projekte in dieser Disziplin — mit Zahlen, Videos und Ergebnissen.