Südhang: Marke und Web

Wein trinken, eine Marke kreieren. Und jetzt brauchts noch einen E-Shop. Aber wie verkauft man im Internet Wein wie ein Profi – mit Aussagen wie «ausgewogen mit runden Tanninen»? Metaphern sind zentral: metaphorische Bilder schweben über ein Layout, das die traditionelle Erzählweise der Marke stützt.
Flüchtige Weinmetaphern

Südhang AG
Weine

Markenstrategie, Print, Webshop, Corporate Identity, Konzept, UX-Design, Entwicklung

www.suedhang.com

Das Briefing

Die ganze Seite nach dem neuen Brand neu bauen.

Vor über fünf Jahren bat uns der Schweizer Wein-Retailer und -Verteiler Südhang, ihm beim Aufbau einer Marke zu helfen. Nach Recherchen, Workshops und (wiederholten) Produkttests, legten wir das Fundament, entwickelten die Kernaussagen und gestalteten eine komplette Identity-Plattform.

Einige Jahre darauf expandierte Südhang nach Zürich und in die sozialen Netzwerke. Der Zeitpunkt war gekommen, um die Unternehmensseite neu zu bauen und eine E-Commerce-Plattform zu entwickeln.

Logo Südhang Rüschlikon

Das Nutzenversprechen

Schwierige Weine für alle, die sich noch dem Mainstream widersetzen.

Das Südhang-Universum (nicht nur die Marke und die Unternehmenskultur, sondern auch ihre Marketing- und Produktstrategie) dreht sich um drei Achsen: Qualität zu fairen Preisen, lokale Raritäten und unkommerzielle Ehrlichkeit. Vom Flyer, der in Ihrem Briefkasten landet, bis hin zu den Escargots, die Sie zum seltenen Wein geniessen, der Ihnen persönlich empfohlen wurde – alles rund um Südhang kann unbegreiflich cool und unfassbar köstlich sein. Aber vor allem können Sie sicher sein, dass es für Sie mit einer (gefährlich) unkommerziellen, geradezu brutalen Aufrichtigkeit empfohlen, geschrieben oder gestaltet wurde.

Weg mit den Mittelklasse-Pärchen, die sich vor prächtigem Sonnenuntergang ein Gläschen Cabernet Sauvignon genehmigen, fort mit den bärtigen Hipstern, die ihre Bio-Weissweine auf Instagram inszenieren. «Werbung lügt, Wein nicht» stand auf dem Schild, das wir für Südhang nach dem Marken-Workshop produzierten. Seither ist alles nur noch schräger geworden.

Grafik Weine abseits des Mainstreams

Das Konzept

Moment mal! War das eben ein Pin-up mit Warhols berühmter Banane?

Was braucht es, um einen Wein zu verkaufen? 🤔

Erst mal einen guten Wein. Zweitens Zungenfertigkeit. Die meisterhafte Überzeugungskunst des Weinhändlers macht 50% des Verkaufserfolgs aus. Und das meiste davon sind Metaphern, die leichtfüssig über Ihre Sinneskanäle tänzeln, sodass Ihnen das Wasser im Mund zusammenläuft, während Sie innerlich schon an 🌰 Kastanienwäldern nippen, die sich über dichten Schichten von wilden Beeren und frischen Zitrusfrüchten 🍋 erheben.

Der Wein war da. Was wir brauchten, waren die Allegorien, um ihn online zu verkaufen. Wir begannen also damit, ganze Listen von Weinmetaphern zusammenzustellen und suchten dann die Bilder, die diese Ideen sichtbar machen. «Zitrone» oder «Erdbeeren» waren kein Problem, doch wie soll man mit einem einzigen Bild «ausgewogen mit runden Tanninen» sagen?

Wir mussten schwierige Entscheidungen treffen, um gewisse Aromen zu beschreiben und dabei doch immer genau dem Charakter der Marke gerecht zu werden. Deshalb sehen Sie jetzt durchaus auch mal die Banane von Velvet Underground oder ein Pin-up-Girl über Ihren Bildschirm flitzen, wenn Sie einen bestimmten Wein auswählen.

Als wir alle Bilder gesammelt hatten, entwickelte der digitale Teil von Jam’on digital einen Algorithmus, der Kombinationen von verzerrten Bildern flüchtig aufblitzen liess. Bilder, die wie kurze Reflektionen auf einer Fensterscheibe über den Bildschirm huschen, wenn der Benutzer durch die Website scrollt. Jede Kombination von metaphorischen Bildern ist einem bestimmten Wein zugeordnet. So kann man entweder den Weinbeschrieb lesen oder einfach darauf vertrauen, dass die Kombi von Schokolade, Kirschen, Gewürzen, schwarzen Oliven und dem berühmten Werk eines holländischen Malers genau die richtige Wahl ist für die Party morgen Abend. Mit den Metaphern hatten wir die Hauptallegorie fürs Web; jetzt brauchten wir eine weitere Analogie, um das Layout-Design zu lösen.

Grafik-Metaphern

Das Design und die Navigation

Bewegte Kleinanzeigen und ein logischer Filter.

Die Entscheidung ein Layout zu wählen, wie es Zeitungen für ihre Kleinanzeigen-Seiten verwenden, hatte ebenfalls viel mit der Marke zu tun. Das Unternehmen bevorzugte in seiner ganzen Kommunikation stets Printmedien sowie deren Design und Sprache (literarische Prosa und eine allgemein eher traditionelle Erzählweise). Unsere Aufgabe war es, die Marke ins Internet auszudehnen und sie dabei für ihre üblichen Kunden erkennbar zu machen ohne die Markengeschichte abrupt abreissen zu lassen.

Sarah verwendete rechteckige Karten, um eine Vorschau der Inhaltselemente zu zeigen und platzierte sie dann wahllos auf dem karierten Raster. Kein übergreifendes Menü. Kein Footer. Nur Karten, wunderschön in drei Spalten geteilt, und dazu ein Header, der den Inhalt beschreibt (Wein, Event, Post ...). Das Ganze kippelt kurz, wenn der Benutzer seine Maus darüber bewegt.

Die Navigation wurde mit einem ziemlich wuchtigen seitlichen Menü gelöst, das die Hälfte der Seite überlappt und über eine Suche mit bis zu acht Kategoriefiltern sofort zum gesuchten Wein führt.

Bei den Weindetails angekommen, kann man entweder eine Geschichte über die jeweilige Kellerei lesen, die Region auf einer detaillierten interaktiven Karte erkunden oder mit einer Empfehlung aus dem Bereich «ähnliche Weine» auf weitere Entdeckungsreisen gehen.

Das resultierende Einkaufserlebnis ist weit inspirierender als alles, was man sonst so sieht, wenn man online gute Weine sucht (das wissen wir, weil wir hier alles sehr gründlich recherchiert haben!). Mit unserer Navigation sind Sie mit wenigen Klicks bei Ihren Lieblingsweinen und können sogar Ihren eigenen virtuellen Weinkeller aufbauen und bewirtschaften, wenn Sie sich registrieren.

Screenshot

Die technische Herausforderung

Import aus einer mit Daten vollgepackten FileMaker-Datenbank.

Die grösste Knacknuss war, die Daten vom physischen Shop, der immer noch auf FileMaker lief, auf die neue Online-Plattform zu importieren und dann dafür zu sorgen, dass alles parallel funktionierte. Unter den FileMaker-Daten waren übrigens auch Bestellungen, Lagerbestände und Produktinformationen.

Wir entwickelten mehrere Interfaces für ein neues integriertes System, welches das physische Geschäft und den Online-Shop gleichzeitig managen konnte. Zum Schluss entwickelten wir ein spezifisches CMS, um die News, Events und Rezepte zu aktualisieren, die Südhang regelmässig auf seiner Webseite publiziert.

Technische Zeichnung

Technische Spezifikationen

CMS:Typo3 (Version 7.3)
Öffentlicher und privater E-Shop:Typo 3 Extension Developing Frame (Extbase)
Zahlungsmöglichkeiten:PostFinance Professional
Technologien:HTML5, CSS3, JavaScript, Typoscript, Extbase, PHP, MySQL

www.suedhang.com