BEO Energy
A German battery storage provider given a Webflow blog, a reusable article template and a Success Stories page, all built from the design language the site already had.
Overview
BEO Energy supplies battery storage systems and energy optimization services to commercial and industrial companies in Germany.
The company had a website but not the publishing infrastructure behind it. There was no dedicated blog experience, no repeatable structure for articles, and no place to show customer references. The team wanted to start publishing quickly and to keep publishing without needing a developer for every article.
The brief was a defined set of pages and CMS work, and it carried on as ongoing support after delivery.
The challenge
No blog experience and nothing to publish into. Articles had nowhere to live. Without a CMS collection, categories and a repeatable article template, every post would have been a manual page build.
The publishing workflow had a specific requirement. The team planned to push prepared content into the site through a Claude to Webflow workflow, so the CMS had to be structured for content arriving programmatically rather than typed into the Designer.
No customer references on the site. A commercial energy buyer looks for evidence of comparable installations, and there was no Success Stories experience to carry that.
One form workflow doing two jobs. Business enquiries and careers applications ran through the same external workflow, so the two could not be tracked separately.
A short window with real pressure behind it. The order ran on a five day delivery and the team wanted the blog and Success Stories live quickly so they could start publishing.
Goals
- Give BEO a blog listing and a reusable article template
- Structure the CMS and its categories for consistent, repeatable publishing
- Build a Success Stories page for customer references
- Separate business enquiries from careers applications
- Keep everything responsive, fast and consistent with the existing site
Approach
Reuse the existing design language rather than introduce a new one. The first Success Stories concept sat too far from the rest of the site. The client asked for it to feel closer to what was already there and pointed at the Story and About pages as references. Bilal went back through those pages, took the patterns and animations already in use, and revised the design around them. That version was approved outright.
Build the blog on the CMS, not as static pages. The team intended to publish through a Claude to Webflow workflow, which only works if articles are CMS items with a consistent field structure. Static pages would have looked identical and blocked the thing the blog was for.
One article template, used repeatedly. Prepared articles needed to go live without being designed each time, so the Blog Details page was built once as a template and publishing became a content task.
Move the article metadata instead of shrinking it. The client felt the category, date and reading time sat too heavily at the top of an article. Rather than reducing type sizes, he proposed moving them into the empty left sidebar and styling the category as a tag, which cleared the article opening using space the layout already had.
Match the interactions to what the site already does. The blog interactions were built to follow the Careers page and the Success Stories scrolling to follow the behaviour already on the site, so the new pages read as part of the site rather than as additions to it.
Split the forms without breaking the working one. The Careers form stayed connected to its external application workflow while the business contact form moved toward HubSpot. The client completed the HubSpot embed themselves and the studio handled the formatting.
Design
The Success Stories page was drawn from the existing BEO visual language, reusing the patterns and scroll behaviour already established on the Story and About pages.
On the blog, the article opening puts category, date and reading time in the left sidebar with the category set as a tag, so the headline and the first paragraph stay the first thing read.
Blog cards carry a hover state, and the listing sits alongside a customer logo carousel and content slots that accept video as well as images.
Build
Built in Webflow. The blog runs on a CMS collection with categories and article metadata, feeding a Blog Listing page and a single reusable Blog Details template, with the initial articles uploaded.
Also implemented: the Success Stories page and its content structure, a custom coded comparison table, a customer logo carousel, scroll animations on Success Stories, blog card hover animations, a BEO logo animation, a sticky contact action, video ready content slots, and support for the HubSpot business contact form including its formatting.
Supporting work covered responsive layouts, SEO setup, speed optimization, navigation and multilingual navigation fixes, German and English setup checks, and link corrections, with refinements continuing after delivery.
Outcome
The blog experience and the Success Stories page were delivered, and the CMS structure is in place for the team to publish into.
The revised Success Stories direction was approved without changes. The client's words were: Love it. Lets implement it exactly like this! Earlier in the process the first draft drew all in all a very good start - thank you! and the revision drew Overall moving in a good direction, thank you for the push!
The engagement continued past the original order. The client returned on 14 August with a further request for short term website adjustments.
No traffic, ranking, enquiry or publishing speed figures are published here. BEO has not shared post launch data, and those numbers will be added if and when they exist rather than estimated.
Key takeaways
- A new section on an existing site has to be built from that site's own patterns. The first Success Stories concept was sent back not for quality but for distance from what was already there, and reusing the Story and About pages resolved it in one revision.
- When content is going to arrive from an automated workflow, the CMS structure is the deliverable. Static pages would have looked the same and blocked the entire point of the build.
- Crowded metadata is usually a layout problem before it is a type size problem. Moving category, date and reading time into unused sidebar space solved it without shrinking anything.
See it in the browser
The finished site is live. Open it and judge the work in its real context.
.png)
Have a project in mind?
Whether you're launching something new or improving an existing website, let's discuss your goals and see if we're a good fit.
