Garten & Freizeit - multi-brand ecommerce for garden and leisure furniture UX case study

Garten & Freizeit is a German multi-brand ecommerce website for high-quality, exclusive garden and leisure furniture. Every year, well over 100,000 sun loungers, garden tables, garden chairs, outdoor lounge furniture, parasols, and other garden products are delivered by Garten & Freizeit to customers throughout Europe.

Besides offering a huge range of products on their website, they also host garden furniture exhibitions where customers can come and see the products with their own eyes, test the materials being used, and discover practical functions with the help of specialist salespeople.

There are many established brands listed on the website, and Garten & Freizeit certainly made an effort to make them both discoverable and well presented, as you will soon see.

Let's now take a look at some of the interesting features and stylistic choices they made when designing their multi-brand ecommerce website.

{{blog-card}}

Navigation

Here we also see a mega menu on desktop. In contrast, the mobile version has a hamburger menu icon in the left-hand corner that, upon clicking, displays the top categories over the entire screen. 

The bottom of the mobile menu features a simplified version of the footer, containing links to contact the website admins and a CTA to register on the platform.

Homepage

As our previous example, the first thing we see on the homepage is a banner advertising their latest seasonal promotion.

Notice also how in the header there is a thin bar at the top advertising the same promotion, and below that three details about the return policy, invoice issuing, and customer service.

This is followed by a section that promotes four of their most popular categories with some lovely lifestyle images. Note the stacking of blocks on mobile vs. the grid layout on desktop.

Beneath that are a few paragraphs explaining their products, company values, and some inspirational words.

Further below, there’s another section covering ‘exclusive customer benefits’, a few words about the quality of the products they offer, and a carousel featuring the top brands listed on their website.

Footer

There is nothing too out of the ordinary within the footer besides the site navigation contained within drop-down menus.

Take note of how they added payment method icons and website quality badges to add to their authenticity.

Brand Listing

The brand listing features a carousel of the top brands, followed by a list of all of them in alphabetical order, which only displays their logos.

Unfortunately, there’s no way to jump to the brands starting with a specific letter as we saw with lights.ie.

Further down, there are additional sections that list brands selling products from particular categories, e.g., garden furniture and barbecues.

Brand Page

We are first greeted by a carousel of circular images that link to the subcategories offered by the brand.

This is immediately followed by the product listing, with a ‘sort by’ dropdown menu, and a filter button that opens a popup UI with a huge amount of attributes to choose from.

Notice how each product card features the average customer rating and information about availability and estimated shipping times.

At the bottom of the product listing is a section dedicated to the history of the brand.

If you're running a multi-brand ecommerce platform, you should always give them the ability to describe their history, products, company values, or whatever else they deem important.

Below that is another text section that goes on to describe some of the brand’s most popular products.

Category Page

At a glance, the category product listing page doesn’t differ entirely from the last page we looked at.

Although, we do see here that discount percentage of sale items is displayed in the top left corner. And let's not forget the add to wishlist heart icon.

There are two unique sections below the actual product listing itself. One has short descriptions of the benefits and pleasures to be had by incorporating a subcategory’s products into your garden, and the other is a carousel with links to category-related blog posts.

Product Page

At first glance, the product page seems quite typical, but looking more closely at the details, we see a few interesting features.

In this specific example where the ‘product’ is actually a product bundle, we are shown the individual products included in the set. 

There is an anchor link to view more details about the product and a small section that displays the estimated delivery time with another anchor link to view more details.

Below the top section is a carousel of recommended products, which is quite common among product pages.

At the bottom of the product page, we have a multi-tab section that contains a comprehensive breakdown of the product’s attributes, as well as delivery information, reviews, and matching products.

Note that the above-mentioned anchor links each redirect the user to the relevant tab of this section.

Cart

When adding a product to the cart,  a popup appears that lists a range of matching products (e.g., cushions that exactly fit a chair), which the user can add directly to the cart.

Besides that, the there is an indication as to how long the product will take to be delivered, a customer review rating for each product, and options alter the quantity or remove items entirely.

Checkout

The checkout is clean, shows the next steps in the (three-step) checkout process, and is completely free from distractions - just as it should be!

It's worth pointing out that is styled to match the look and feel of the rest of the website. A checkout page that hasn't been styled in-line with the brand can be a bit off putting to potential customers.

{{blog-card}}

Summary & suggestions

Garten & Freizeit is a brilliant illustration of a successful, large-scale, multi-brand ecommerce platform. Besides having a gigantic catalog with many product discovery paths, they also go to great lengths to inspire and educate their customers through the use of collection pages and informative sub-sections.

It's clear that they've already invested a considerable amount into their platform. Most likely, they will continue to do so to enhance the user experience further and, as a consequence, improve sales.

But what could the next step for Garten & Freizeit be? With such a feature and content-rich website, it could be a challenge to decide. There is, however, one thing we've identified that might be appropriate - product bundles.

Bundles are groupings of several products sold together as fixed, customizable, or semi-customizable sets, usually at a price lower than purchasing each item individually.

In this case, Garten & Freizeit already have a section on the product page that presents matching products, such as covers for tables, cushions for chairs, protective and cleaning solutions for wood, and so on.

Seeing as they already have matching products, we believe there's an opportunity to capitalize by offering these products together as bundles. Pairing these products together at a slightly discounted rate could both improve sales as a result of increased average order value and allow them to sell less-popular items by bundling them together with more commonly-purchased items.

UX deliverables guidelines

When it's time to upgrade your storefront design by using a more custom solution, here a few things to help streamline the process:

• All layouts should be designed mobile-first, desktop-second (but you will need both)
• Using pre-made components shortens the implementation time
• Layouts should be presented following the user journey in an orderly fashion
• All actions and menu or navigation states should be included
• All brand or icon assets should be in SVG format 
• UX design hand-over using Figma.com or a similar service is recommended
• UX questions & answers sessions should be included
• Follow up adjustments or corrections should be anticipated

{{blog-card}}