Fallstudie Website Gestaltung: Warum diese Kaffee Rösterei jetzt mehr verkauft

Lesezeit: Minuten

Lade Dir jetzt unser Whitepaper „5 Dinge, die Deine Website unbedingt braucht — und was Du unbedingt vermeiden solltest, wenn Deine Website Kunden anziehen soll“ kostenlos herunter

Website Gestaltung ist ein heißer Suchbegriff.

Die Chancen stehen gut, dass auch Du diese Seite über Google gefunden hast, weil Du wissen möchtest, wie Du Deine eigene Website am besten gestalten solltest, sodass…

…na was eigentlich?

Ob Du’s glaubst oder nicht: Viele Firmeninhaberinnen, Chefs oder Firmengründer machen sich nicht allzu viele Gedanken darüber, welches Ziel mit der eigenen Website erreicht werden soll.

Was an welcher Stelle angebracht wird, ist nicht so wichtig. Ebenso wenig, wie das, was auf der Website steht. Hauptsache die Website sieht schön aus.

Doch gutes Design ist nur die Hälfte einer guten Website Gestaltung.


Denn Deine Website ist nicht für Dich! Du selbst willst Deine Website wahrscheinlich nicht den ganzen Tag lang anschauen. Deine Website soll andere ansprechen. Andere überzeugen. Andere zum scrollen, klicken und zum kaufen animieren.

Wer sich ausschließlich in das Design einer Seite verliebt und Verkaufspsychologie dabei vernachlässigt, verliert.

Wenn Du bei diesem Artikel auf eine Vielzahl verschiedener Design-Tipps hoffst, dann müssen wir Dich leider enttäuschen. Design ist wichtig, keine Frage. Doch Design muss dem Zweck der Website dienen.

Der größte Versandhandel und eines der erfolgreichsten Unternehmen aller Zeiten macht es vor.

Hand aufs Herz: Würdest Du diese Seite als „wahnsinnig schön“ bezeichnen?
Website Gestaltung
Glaubst Du, Amazon gewinnt hiermit jemals einen Design-Preis?

Und trotzdem verdient Amazon Milliarden.

Keine Angst: Wir widmen dem Thema Design einen Abschnitt innerhalb dieses Artikels. Doch wir möchten Dich zunächst — am Beispiel der Kaffeerösterei Lovely Lots — mit einigen Prinzipien vertraut machen, die es Dir erlauben werden, mehr über Deine Website und/oder Deinen Online Shop zu verkaufen.

Verkaufspsychologische Website Gestaltung am Beispiel der Kaffeerösterei Lovely Lots

Die Firma Lovely Lots ist ein Kunde von uns, deren Website mit Shop erst vor Kurzem live ging.
Website Gestaltung
Website Gestaltung
In der Regel benötigen neue Webseiten — und vor allem: neue Online Shops — etwas Zeit bis sie anlaufen. Es dauert bis ein Shop bei Google für relevante Suchbegriffe auftaucht, Interessenten anzieht und diese Interessenten in Kunden verwandelt.

Bei Lovely Lots gingen bereits in den ersten zwei Wochen mehrere Bestellungen pro Tag ein. Ohne ein riesiges, bestehendes Netzwerk, tausende Follower auf Social Media oder eine riesige E-Mail Liste.

Ganz im Gegenteil. 


Denn Lovely Lots ist ein Startup. Lovely Lots begann als „offline“ Kaffeerösterei. Eine Website gab es zwar. Wer jedoch Kaffee bestellen wollte, musste in der Rösterei vorbeischauen.

Der neue Online Shop ändert das. 


Denn einerseits ist Lovely Lots darüber in der Lage, nicht nur lokal, sondern in die gesamte DACH-Region zu verkaufen. Andererseits helfen Website und Online Shop der Rösterei in Esslingen. Website und Shop steigern die Reichweite der Firma, wodurch wiederum auch die Rösterei an Zulauf gewinnt.

Auch wenn Du selbst wenig mit Kaffee am Hut hast und ein völlig anderes Geschäftsmodell verfolgst: Die Prinzipien und Ideen aus dieser Fallstudien werden trotzdem relevant für Dich sein.

Denn egal, was wir verkaufen: Wie Du Deine Website gestaltest, entscheidet darüber, ob und wie viel Du verkaufst.

Website Gestaltung Tipp #1: Kenn’ Dein Ziel

Wirf einen Blick auf folgenden Ausschnitt von Lovely Lots „alter“ Website (ohne Shop). Achte dabei besonders auf den Text und sag’ uns dann, ob Dich dieser Text anspricht.
Website Gestaltung
Website Gestaltung
Der Gründer der Lovely Lots Kaffeerösterei, Arthur Pereira, erzählt hier etwas über sein Equipment und seine Leidenschaft für Kaffee im Allgemeinen.

Wir finden: Dieser, und alle anderen Texte auf der Unterseite, sind durchaus sympathisch. Und trotzdem haben wir diese Unterseiten so nicht auf der neuen Website mit Shop übernommen.

Denn Ziel der neuen Website ist der Verkauf von Kaffee.

Besucher und Besucherinnen der Website sollen hier zwar etwas über die Rösterei, deren Gründer, Werte, Philosophie und Arbeitsprozesse lernen können.

Doch alles, was in diesem Zuge preisgegeben wird, sollte Lust auf mehr machen und jemandem unmissverständlich klar machen, warum es sich hierbei nicht um herkömmlichen Kaffee handelt, den man auch im Supermarkt oder in einem anderen, x-beliebigen Online Shop bestellen kann.

Jeder Satz muss dementsprechend auch auf dieses Ziel ausgerichtet sein. Lass’ uns den ersten Text-Abschnitt unter diesen Gesichtspunkten noch einmal anschauen:

„Mein ganzer Stolz ist meine Röstmaschine. Mit dieser wird Esslingen künftig mit besonders gutem Kaffee versorgt. Die Maschine stammt aus dem Jahr 1964. Nach der Generalüberholung ist sie voll einsatzfähig. Die Hitze in der Röstmaschine wird mit Erdgas erzeugt.“

Verspürst Du nach diesem Satz das dringende Bedürfnis, Deine Kreditkarte aus der Tasche zu ziehen?

Nein?

Warum nicht?

Weil Du nicht weißt, wie Du davon profitierst?

Erwischt!

Wir sehen die Welt immer nur durch unsere eigenen zwei Augen. Wir sind der Protagonist unseres Lebens — und beurteilen Situationen demnach auch meist nach den Auswirkungen, die diese auf uns haben.

Glaubst Du nicht?

Was machst Du, wenn Du ein altes Klassenfoto von Dir entdeckst? Du schaust nach Dir, haben wir recht? „Wo bin ich? Was hatte ich damals an? Wie habe ich ausgesehen?“

In unseren Augen ist das weder gut, noch schlecht. Wir müssen diese Tatsache nicht werten. Wollen wir anderen allerdings beeinflussen, sollten wir uns diese Tatsache zu Eigen machen und die andere Person in den Mittelpunkt stellen.

Arthur erzählt in diesem ersten Abschnitt von sich und seiner Röstmaschine, dass diese aus dem Jahr 1964 stammt und mit Erdgas betrieben wird. Die Intention ist gut. Doch mit dieser Umsetzung läuft er Gefahr, dass der ein oder andere Besucher an dieser Stelle abspringt.

„Warum ist die Maschine von 1964? Hat es finanziell nicht für ein neues Modell gereicht?“

Auch ob die Röstmaschine mit Erdgas betrieben wird oder nicht ist nur dann relevant, wenn wir jemandem erklären, wie diese Eigenschaft die Qualität und den Geschmack des Kaffees beeinflusst.

Eine moderne Webseitengestaltung beginnt immer mit guten Texten, nie mit der Optik der Seite. Bilder, Grafiken und andere Designelemente fangen zwar die Aufmerksamkeit einer Person ein. Doch Bilder und Grafiken allein, überzeugen niemanden. 

Oder hast Du schon einmal etwas im Netz gekauft ohne zunächst die Beschreibung zu lesen?

Wirf einen Blick auf die neue Unterseite, welche die Rösterei beschreibt.
Website Gestaltung
Erkennst Du den Unterschied?

Die neue Seite eröffnet mit einer starken Überschrift, die jemandem sofort klarmacht, wie er oder sie von einem Besuch in der Rösterei profitiert:

„Lerne mehr über die Herstellung und Zubereitung von Kaffee, entdecke die Tricks und Geheimnisse professioneller Baristas und probier' Dich einmal quer durch unser Sortiment!“

Die Überschrift macht Besucher gleichzeitig neugierig und zieht deren Augen automatisch nach unten. Denn in der Überschrift klären wir die wichtigste Frage, die sich Besucher oder Besucherinnen unterbewusst stellen:

„Was ist hier für mich drin?“ 

Die Überschrift funktioniert, weil es dabei nicht um die Kaffeerösterei selbst geht. Es geht ausschließlich um die Vorteile, die Besucher und Besucherinnen der Rösterei erhalten.

Plus:

Alle Vorteile werden so beschrieben, dass deren volle Wirkung entfaltet wird.

„Die Geheimnisse und Tricks professioneller Baristas“ suggeriert, dass man hier eine Menge Wissen mitnehmen kann. Wissen, das die wenigsten Privatpersonen kennen.

„Probier’ Dich einmal quer durch unser Sortiment“ zeigt, dass ein Besuch in der Rösterei fast schon mit einer Kaffeeprobe gleichzusetzen ist. Hier kann man probieren, so viel man möchte — nicht einfach nur an zwei, drei Sorten riechen.

Doch wie genau man dieses Angebot in Anspruch nimmt, erfährt man erst, wenn man nach unten scrollt. Hier werden die Vorzüge des Lovely Lots Kaffees noch einmal gelistet:
  • Fair gehandelt und direkt von Kaffeefarmern aus Südamerika
  • Frisch geröstet
  • Keine Sekunde länger gelagert, als notwendig
Auch im Text darunter geht es ausschließlich um die besonderen Eigenschaften des Kaffees und darum, wie jemand von diesen Eigenschaften profitiert:

„In Esslingen werden diese Bohnen unter dem Einsatz großer Handwerkskunst für jede Bestellung frisch geröstet. So entsteht unser einzigartiges Lovely Lots Aroma, das seit 2019 die Morgenroutine der Stadt Esslingen zu etwas Besonderem macht.“

„Unter dem Einsatz großer Handwerkskunst“ veranschaulicht, dass es sich hier nicht um Massenproduktion handelt. Und, dass das Endprodukt, das die Rösterei verlässt, etwas Besonderes ist, das nicht jeder nachmachen kann.

„Für jede Bestellung frisch geröstet“ ist ein weiteres Argument für die Rösterei und deren Vorgehensweise. Und weil die meisten Kunden wissen wollen, dass das, was sie kaufen, von anderen bereits getestet und für gut befunden wurde, endet der Abschnitt mit:

„So entsteht unser einzigartiges Lovely Lots Aroma, das seit 2019 die Morgenroutine der Stadt Esslingen zu etwas Besonderem macht.“

Das sind fast schon die wichtigsten Website Gestaltung Kriterien: 



Gib jemandem einen Grund zu lesen, zu scrollen, zu klicken und schließlich zu kaufen — indem Du an sein oder ihr Eigeninteresse appellierst!

Website Gestaltung Tipp #2: Handlungsaufrufe — Führe jemanden aktiv durch Deine Seite

Wirf erneut einen Blick auf die neue Seite und vergleich’ diese mit der alten. Fällt Dir — abgesehen von der Überschrift und den überarbeiteten Texten — noch etwas auf?

Website Gestaltung
Website Gestaltung

Auf der alten Seite finden wir keinen Handlungsaufruf. Kaffee, Gründer und Herstellungsprozess werden lediglich beschrieben. Wer, am Ende der Seite angekommen, mehr möchte, muss wieder einmal komplett nach oben scrollen und nun überlegen, welchen Reiter im Menü er oder sie als nächstes klicken möchte.

Die neue Seite macht es jemandem sehr einfach.

Nicht nur werden Kaffee und Herstellungsprozess zunächst sehr ansprechend und bildhaft beschrieben. Die Beschreibung dient gleichzeitig dem übergeordneten Ziel, mehr Kaffee zu verkaufen. Und das geht logischerweise nur, wenn wir jemandem sagen, wie das geht.

Hier kommt der erste Handlungsaufruf ins Spiel. 

„Du möchtest in der Rösterei einmal vorbeischauen, um mehr über die Herstellung und Zubereitung von Kaffee zu erfahren und Dich einmal durch unser Sortiment zu probieren? Du möchtest vielleicht sogar lernen, wie man Herzen und andere Muster in den Cappuccino-Schaum hinein bekommt?

Dann klicke den folgenden Button und buche eine unserer beliebten Kaffee Schulungen. Für Dich, für jemanden den Du gern hast oder als Firmenevent.“

Wer in der Nähe wohnt und persönlich in der Rösterei vorbeikommt, hat die Möglichkeit, sich durch die Rösterei führen zu lassen, mehr über die Zubereitung zu lernen und den Kaffee zu probieren.

Lovely Lots hat umgekehrt die Möglichkeit, Kunden eine unvergessliche Kaffee-Erfahrung zu bieten, die eigene Marke dadurch zu stärken und den eigenen Kaffee direkt in der Rösterei zu verkaufen.

Wer einmal kauft, kauft in der Regel wieder. Glaub’ uns: Der Kaffee ist wirklich gut 😉 Und die meisten Wiederholungstäter nutzen den Online Shop, um nachzubestellen. Die Besuche in der Rösterei beflügeln den Online Shop, der Online Shop beflügelt die Besucher in der Rösterei.

Doch was ist mit den Leuten, die nicht in der Nähe der Rösterei wohnen oder einfach nicht persönlich vorbeikommen wollen?

Diese Leute nun einmal wieder komplett nach oben scrollen zu lassen, wäre doof. Daher endet diese Unterseite auch nicht an dieser Stelle.

Website Gestaltung

Die nächste Überschrift spricht all diejenigen an, die nicht aus der Region kommen. „Kein Problem, wenn Du nicht aus der Nähe kommst, wir haben trotzdem etwas für Dich“.

Du erinnerst Dich:

Ziel der Seite ist es, Kaffee zu verkaufen. Den Kaffee, dessen Zubereitung und Vorteile zu beschreiben, ist der erste Schritt. Die Beschreibung weckt im Idealfall einen Kaufwunsch. Doch ohne mehrere Handlungsaufrufe, fehlt Interessenten ein konkreter Weg, diesen Wunsch in Realität zu verwandeln.

Die Welt im Netz ist schnelllebig. Je klarer wir Besucher durch unsere Seite führen, desto besser.

Aus diesem Grund listen wir hier drei der beliebtesten Sorten, versehen jede Sorte mit einem Link zur entsprechenden Produkt-Seite und präsentieren einen Button, der zum gesamten Shop führt. Zählt man die Links hinter den Produktbildern mit, so haben Interessentinnen und Interessenten an dieser Stelle 7 Möglichkeiten, zu einer Verkaufsseite zu gelangen.

Scrollt man an dieser Stelle weiter, erfährt man mehr über die Herkunft und die Herstellung des Kaffees. Auch dieser Text appelliert an das Eigeninteresse einer Person und unterstreicht noch einmal die Qualität des Kaffees — sowohl in fertiger Form, als auch während der Herstellung.

„Mit einer Bestellung in unserem Online Shop förderst Du einen bewussten Umgang mit Kaffee, unterstützt die Kaffeefarmer in den Herkunftsländern sowie deren Handwerkskunst beim Anbau von sortenreinem Kaffee.“
Website Gestaltung

Weil wir nicht möchten, dass jemand nun wieder nach oben scrollen muss, um zum Shop zu gelangen, haben wir auch hier einen Button eingefügt. Erneut: Je reibungsloser der Ablauf, desto größer der Umsatz.

Im Shop angekommen, fragen wir jemanden sofort nach der eigenen E-Mail Adresse. Im Gegenzug bieten wir 5% Rabatt auf die erste Bestellung an.

Website Gestaltung

Warum?

Weil nicht jeder, der den Shop besucht, direkt kauft.

Hat Lovely Lots die E-Mail Adresse, kann Arthur die Person wieder zurück in den Shop lotsen — und muss nicht hoffen, dass jemand, der den Shop einmal besucht hat, irgendwann von selbst wieder zurück kommt.

Website Gestaltung Tipp #3: Positive Bilder und Grafiken

Ohne ansprechende Beschreibungen und ausreichend Handlungsaufrufe, die jemanden aktiv durch die Seite führen, ist Dein Umsatz nicht halb so gut, wie er sein könnte. Alle Webseitengestaltung Tipps wirken nicht, wenn Du (potentiellen) Kunden und Kundinnen nicht unmissverständlich klarmachst, was Deine Produkte oder Dienstleistungen einzigartig macht — und wie jemand davon profitiert.

Trotz dessen möchten wir natürlich nicht so tun, als würde es bei der Gestaltung einer Website nicht auch auf die Optik ankommen.

Unser Hirn denkt in Bildern.

Und wenn wir in der Beschreibung davon sprechen, dass alle „Bohnen unter dem Einsatz großer Handwerkskunst für jede Bestellung frisch geröstet“ werden, dann sollte das dazugehörige Bildmaterial diese Aussage untermauern.

Das menschliche Hirn nimmt Abweichungen sehr deutlich war. Wenn die Beschreibung die eigenen Produkte in den Himmel lobt, das dazugehörige Bildmaterial allerdings nur semi-professionell aussieht, fragen sich viele Besucher, ob der Kaffee wirklich so gut ist, wie beschrieben. Zudem wollen viele das Produkt einmal sehen — und damit einschätzen — können.

Aus diesem Grund haben wir uns ganz oben für ein Bild von drei 200g Packungen der mitunter beliebtesten Sorten entschieden. Die Rösterei ist im Hintergrund zudem leicht zu erkennen. So erhält man ein Gefühl für das Produkt und dessen Optik.
Website Gestaltung
Die weiteren Bilder zeigen Arthur, den Lovely Lots Gründer, beim Zubereiten von Kaffee. Auch hier wird die Atmosphäre der Rösterei und die Sorgfalt bei der Zubereitung transportiert. 
Website Gestaltung
Eben das ist auch unser Tipp an Dich:

Zeig’…
  • Dein Produkt im Einsatz
  • Dich beim Umsetzen der Dienstleistung, die Du anbietest
  • Bilder von zufriedenen Kunden
…und achte bei all dem vor allem darauf, dass Du, wortwörtlich, ein positives Bild abgibst. Die Begeisterung, die Dein Produkt bei jemandem auslösen soll, sollte bereits auf den Bildern rüberkommen.

Die Unterseite, der wir uns in dieser Fallstudie gewidmet haben, ist weder verspielt, noch kompliziert aufgebaut. Bild, Überschrift, Text, Button, Überschrift, Bild, Text, Überschrift, Text, Bilder, Button, Überschrift, Text, Button. Und trotzdem macht die Seite einen hochwertigen Eindruck.

Beachte zudem, dass die Optik einer Website persönlichen Geschmäckern unterliegt. Klar, es gibt Designprinzipien, die wir alle attraktiver finden, als andere. Doch bei Verkaufspsychologie gibt es keine zwei Meinungen.

Wer verkaufen will, muss jemandem erklären, wie er oder sie vom Produkt profitiert. Was das Produkt besonders macht. Und wie viel besser das Leben mit dem Produkt aussehen könnte.

Hast Du die ersten beiden Punkte abgehakt, bist Du auf einem guten Wege.

Bevor wir alle Inhalte dieses Artikels noch einmal zusammenfassen, möchten wir Dir allerdings noch unsere Hilfe anbieten. Der richtige Text, die richtige Website Gestaltung, das perfekte Bild — all das nimmt Zeit in Anspruch und wirft Fragen auf:
  • Was sollte ich hervorheben, was nicht?
  • Was ist zu reißerisch, was wirkt nicht selbstbewusst genug?
  • Und wie kombiniere ich all das nun zu einem Shop, der auch wirklich verkauft?
Genau hier liegt unsere Stärke. mad.Design erstellt Dir nicht einfach nur eine anspreche Website oder einen Online Shop. Wir erstellen Dir eine Website, die andere dazu bringt, zu lesen, zu klicken und zu kaufen.

Einmal, indem wir die Prinzipien anwenden, die wir Dir in diesem Artikel zum Thema Website Gestaltung vorgestellt haben.

Und einmal, indem wir bewährte Praktiken aus Verkauf, Marketing und Werbung nutzen.
Website Gestaltung
Viele Unternehmerinnen und Unternehmer sehen ihre eigene Website als notwendiges Übel an. „Heute hat jeder eine Website, dann machen wir halt mit.“ Website oder Shop werden daher oft auch als Ausgabe, nicht als Investment angesehen.

Eine mad.Design Website ändert das.

Wenn Du für einen einmaligen Betrag von 10.000€ einen Vertriebsmitarbeiter oder eine Vertriebsmitarbeiterin einstellen könntest, die Tag für Tag, Woche für Woche, Monat für Monat, Jahr für Jahr für Dich arbeiten würde — auch am Wochenende, auch an Feiertagen, auch nach Feierabend…würdest Du diese Person einstellen?

Gute Vertriebler kosten Deine Firma mindestens 100.000€ pro Jahr an Gehaltskosten. Eine Website erhältst Du schon für ein Zehntel dessen. 


Mehr noch: 


Du investierst diesen Betrag einmalig. Unterm Strich bringt Dir beides das gleiche Ergebnis: Mehr Interessenten, mehr Kunden, mehr Umsatz. 


Klick' diesen Link und setz' Dich via E-Mail mit uns in Verbindung. Nenn' uns am besten auch einen Termin für ein mögliches Telefonat. Gerne erarbeiten wir eine Lösung für Deine individuelle Situation.

Zusammenfassung

  • Kenn’ Dein Ziel: Was willst Du mit Deiner Website erreichen? Welches Angebot, welche Dienstleistung oder Idee verdient am meisten Aufmerksamkeit und sollte demnach in den Mittelpunkt rücken?
  • Achte darauf, wie Du Dich und Deine Angebote beschreibst: Stellst Du Besucher ausreichend in den Mittelpunkt? Machst Du ihm oder ihr unmissverständlich klar, was Du anbietest und warum Du dafür der richtige Anbieter bist?
  • Und untermauerst Du Dein Wertversprechen mit positiven Bildern? 

Diese Artikel und Fallstudien könnten Dir auch gefallen

3 Tipps für gutes Webdesign
E-Learning Website Redesign

Du hast ein spannendes Webprojekt, das Unterstützung benötigt?

Klicke den folgenden Button und setz' Dich mit uns in Verbindung!

>