Rösterei Bohnenschmiede

WordPress • WooCommerce • Mockups & Wireframes • Google Analytics

Starting the day with a fresh cup of coffee is something very special. But what’s even better, is, if you don't have to run to the next store, but instead the coffee beans get delivered to your home or office. There is a remarkable shift towards online shopping - Rösterei Bohnenschmiede has noticed that too!

The roastery has been selling their coffee online for a few years now. Thanks to WooCommerce it was quite easy in the past to add a store to their existing website. It creates one more menu item called “Shop” where all the products can be found. But that’s the issue. Only one link is visible regarding the shop and all products and categories are hidden. To grow their online revenue, the coffee roastery knew they'd need something new - That’s where we come into play!

Original homepage
Previous Homepage
Improved homepage
New Homepage

Sebastian from Design Studio Lochbronner and I sat down together to brainstorm how to sell more espresso beans and ground coffee for drip brew online.

There were some given elements from the existing website, the new website still had to include (e.g. map for retail stores, dates for roasting days (open days in local roastery)), but we were quite free with our own ideas.

The homepage, especially the part above the fold, must draw more attention to the specific products and categories. To highlight specific types of coffee or roasts, a large picture including a call to action to the product page can be used as a hero element. To highlight the categories (Espresso, Drip Coffee and Sample/Tasting Packages), we need additional blocks to click on besides the menu items. Therefore we have placed additional blocks right below the hero element (70% of the desktop screen height) and still above the fold, which link to the category pages.

The existing shop has a great conversion rate, but we suppose there’s big potential in organic traffic. To get more organic traffic and better ranking, we’re building more content and put it into blog articles that can be accessed from the homepage. It took a couple of versions and iterations until both of us were happy with the structure.

This is the result:

Hand-drawn wireframe of homepage

We split the tasks: One does the design, the other the implementation in WordPress.

After the client approved the new design, which was similar to the existing CI, I started to build the site in WordPress.

The first thing I’ve done after copying the live site to a staging environment, was to get rid of all plugins that have accumulated over the years and replace the old theme to boost the page speed.Since the design and template is customized for this client, I’ve decided to use OxygenBuilder as a page builder. With the WYSIWYG-editor it is easy to rebuild the structure from the mockup above, but to style the elements as designed in the wireframe in the right way takes quite some time. However, it’s way more efficient than building a new template from scratch! The given elements for WooCommerce didn’t always do the job for us. On the one hand they contained unnecessary data, which can be hidden with css display:none, on the other hand there was data missing regarding intensity and fruitiness of the products.

Example for product tile

So I’ve decided to use some custom PHP with the help of Custom Content Shortcode for the product grid. The plugin offers an easy way to retrieve content from the database. What didn’t work with the plugin, I then solved with WordPress PHP functions.

The menu was created when the website was built years ago - yet without an online shop. When they added WooCommerce years later, the only way to find products was the shop item in the menu bar. The different categories were shown when hovering shop or on the shop page itself. We changed the menu bar to contain more transactional items and reduce the click to the shop and show the most important categories (espresso and filter coffee) from the first sight.

Original menubar on homepage
Previous menu bar: homepage | shop | roastery | point of sale | events | partner | contact
Improved menubar on homepage
Improved menu bar: espresso | filter coffee | more | roastery | contact


To track the performance of the new shop and understand how people interact with the site, I’ve implemented Google Analytics via Google Tag Manager. To keep track of the different coffees and accessories, I’ve set up Enhanced E-Commerce Tracking with help of the plugin Google Tag Manager for WordPress.

In the future we will create more content and marketing activity to boost the online revenue.

If you have specific questions about the website or my approach feel free to contact me!

Leave a Reply

Your email address will not be published. Required fields are marked *

One comment on “Rösterei Bohnenschmiede”