Workcloud24 Website Redesign and Framer Development

workcloud24 AG is a German company headquartered in Düsseldorf. In its own words it connects building data, smart metering and AI with real-world execution, to deliver verified savings, stronger assets and financing-ready evidence. From its German base it works across nine European markets, with hotels, offices, residential buildings, logistics, retail and public buildings.

That is a technical offer with several audiences: owners, operators, tenants, lenders and buyers. The website had to make it clear which problem workcloud24 solves for each kind of building, and what the next step is.

We designed and built the new site, and the engagement is ongoing.

The redesign was designed in Figma, page by page, and reviewed with the client's team in the file before each page went into Framer. In Framer we built a new design system next to the old site, so the live pages stayed untouched while the new ones were in progress.

• Colour tokens and text styles in their own namespace, with every text and colour bound to a style
• Every repeated element as a component: buttons, section eyebrows, challenge cards, process steps, stat blocks, the call-to-action band, FAQ items and the navigation dropdown
• One spacing scale and one radius scale for every gap, padding and corner
• Four breakpoints: 1440 and up, 1200, 810 and phone, with type that scales through the text styles
• Accessibility landmarks on every page (header, main, section, footer) and a clean heading order

The home page explains the offer through components a visitor can use rather than read.

Asset Explorer

Six asset types as tabs. A segmented progress bar fills over five seconds and moves on to the next asset, and a click jumps straight to the one you need.

Market Explorer

Nine markets as tabs, each with its own contact card, and an interactive map of Europe. The map is a custom code component: the country outlines are traced from the Figma design itself, so they line up with it exactly, and the highlighted countries can be clicked.

Process Explorer

Built for the home page's How it works section: three steps in a sticky stage that advance as you scroll and reverse on the way back up. When the home page was later shortened, the section was hidden rather than deleted. The same scroll-driven pattern runs the decision cards on the Public Services page, which appear one after another while the illustration stays pinned.

Each asset type got its own page, built from the same components: Hospitality, Office, Public Services, Residential and the Commercial Wallet, followed later by Logistics and Retail. Every page explains the operational challenge of that kind of building, how workcloud24 works with the data already there, and links to the matching white paper.

The navigation lists them in a Solutions dropdown on desktop and a drawer on tablet and phone, and the Commercial Wallet has its own place in the main menu.