Südhang: brand & web

Drinks wine, creates a brand. Now an e-shop is needed. But how to sell wine like a pro, saying things like “balanced with rounded tannins” on the Internet? Metaphors are key. Uses images floating like metaphors over an editorial layout, which in turn maintains the brand’s vintage narrative.
The metaphors of wine

Südhang AG

Brand strategy, Print, Web-shop, Corporate identity, Concept, UX design, Development


The brief

Rebuild the entire site according the new Brand.

Over 5 years ago the Swiss wine retail and distribution brand Südhang asked us to help them build a Brand. After researching, workshopping and –repeatedly-testing the product, we could set out its basic foundations, develop its core messages and design a complete identity platform.

A few years later, Südhang expanded to Zürich and into the social networks. It was the right time to rebuild the corporate site and develop its E-commerce platform.

Logo Südhang Rüschlikon

The value proposition

Difficult wines for those still resisting the mainstream.

The Südhang universe (not only the brand and the company’s culture, but also their marketing and product strategy) spins around 3 basic axis: quality at fair prices, local rarities and uncommercial honesty. From the flyer you receive at home up to the escargots accompanying the rare wine you’ve been personally recommended to taste, everything around Südhang can be strangely cool and weirdly ambrosial. But above all things, you can be sure it was recommended to you, written or designed for you, with a (dangerously) uncommercial spirit of brutal honesty.

No more middle class couples sipping a Cabernet Sauvignon in the sunset, nor bearded hipsters instagramming their organic white wine. “Advertising lies. Wine does not” was the street sign we produced for them after our brand workshop, and since then, things just got weirder.

Artwork wines outside the mainstream

The concept

Wait. Was that a Pin-up with Warhol’s famous banana?

What does it take to sell a wine? 🤔

First, a good wine. Second, a glib tongue. The artful persuasion of the wine dealer makes 50% of the sale, and most of it is made through metaphors that jog down your sensory channels, making your mouth water as you visualize drinkable 🌰forests of chestnut, shading a thick layer of vegetation of wild berries and fresh lemons 🍋.

The wine was there, what we needed now were the allegories to sell it online. We started by creating lists of wine metaphors and then we prepared the images that would identify those ideas. “Lemon” and “Strawberries” weren’t a problem, but how could you say “balanced with rounded tannins” in a single picture?

We had to make difficult decisions, based precisely on the brand’s character in order to describe certain essences, and that’s why you might see; The Velvet Underground’s banana or a Pin-up travelling across your screen when you choose a certain wine.

Once we gathered all the pictures, the digital part of Jam’on digital, created an algorithm that fleetingly showed combinations of distorted images, like momentary reflections on a window, that would cross the screen in a flash as the user scrolled down. Each combination of metaphoric images would be assigned to its related wine, so the user could either read the description or just trust that a combination of chocolate, cherries, spices, black olives and a famous master-piece of a Dutch painter would be the right choice for tomorrow’s party. We had the main web allegory, which were the metaphors themselves; now we needed yet another analogy to tackle the layout design.

Artwork metaphors

The design and the navigation

Shaking classified ads and a logical filter.

The decision to use such an editorial layout, as the one of a newspapers classified ads section, also had a lot to do with the Brand. The company always prioritized the editorial medium, the editorial design and the editorial style (literary long copy and an overall vintage narrative) in all its communication efforts. Our assignment was to extend the brand to the Internet, making it recognizable to its usual customers without abruptly interrupting that brand narrative.

Sarah used rectangular cards to show a preview of the content element, and then placed them randomly onto the chequered grid.

No global menu. No footer. Just cards beautifully divided in three columns and a header identifying the type of content (wine, event, post…), all of which would momentarily shake as the user moused over.

The navigations were solved using a rather huge lateral menu, overlapping half of the page, and offering up to eight category filters on the search function, that would immediately take you to the wine you were looking for.

Once at the level of the wine details, you could either read a story about the cellar, navigate the region on a detailed interactive map or find a new recommendation in the related wines section.

The resulting shopping experience wasn’t as flat as it generally is when you go online-shopping for a good wine. (We know it because we thoroughly researched that area.) With our navigation you could get your “usual flavour” in a couple of clicks and even set up and maintain your own virtual wine cellar if you registered!


The technical challenge

Importing from a FileMaker database packed with data.

The real hack was to import the data from the physical shop, still running on FileMaker, to the new on-line platform and then make it work along with the new on-line system. The data from the FileMaker also included purchase orders, stock and product information.

To achieve this, we developed several interfaces, which would result in a new integrated system capable to manage both the physical and the online stores at the same time. Finally, we developed a specific Content Management System to update the news, the events and the recipes that Südhang regularly posts on its website.

Technical drawing

Technical specifications

CMS:Typo3 (Version 7+)
Public and private e-shop:Typo3 Extension Framework (Extbase)
Payment:PostFinance Professional
Technologies:HTML5, CSS3, JavaScript, Typoscript, Extbase, PHP, MySQL