✔ Show that the company builds the entire metering system, not just sells meters
✔ Explain clearly how data travels – from the meter to analytics
✔ Speak to partners and to businesses in their own terms
✔ Take enquiries through short forms in pop-up windows
✔ Let the client’s team update case studies, documents and contacts themselves
Clever Meter Ukraine came with a detailed 65-page specification: a corporate website in Ukrainian and English, two audiences – “Partners” (water utilities, heating companies, municipalities and dealers) and “Business” (property developers, property management companies, enterprises) – a signature water texture and precise requirements for animation, forms and accessibility.
I started with the design: a visual direction based on the brand book, the home page, 20 inner page templates, a UI kit with every element state, an animation sheet and pop-up windows for the forms. The header, footer, buttons and CTA block are components, so a change in one place carries through to every page.
Then came development: the site is built on WordPress with my own theme, burum. Contacts and general settings live in ACF, the forms run on Contact Form 7 in pop-up windows with an enquiry number, case studies and technical documentation are separate sections with filters, and SEO is handled by Yoast. The main language is Ukrainian, and the English version is provided for in the specification.
A website where a complex engineering subject makes sense from the first screen, and the client updates the content themselves.
A “meters → data transmission → platform → analytics” strip right in the main banner
Tokens, typography, a 12-column grid, and buttons and fields in every state
Sections, news, case studies, docs, contacts, search, 404 – following the specification’s sitemap
The burum theme, general settings in ACF, SEO with Yoast and a UA / EN switcher in the header
10 Contact Form 7 forms in pop-ups; once sent, each gets a CMU-year-number reference
Case studies with a city map, a document library filtered by type, technology, brand and language
From the design system and page templates to a WordPress site the client runs themselves.
The website’s main tasks are to:
Guaranteed reply within 24 hours.
The first call is free and with no commitment.
When a company sells entire metering systems rather than just devices, its website has to build trust and explain at the same time. Using Clever Meter Ukraine as an example, I show how I turned a 65-page specification into a design system and page templates, and then into a WordPress website on my own theme.
Clever Meter Ukraine works in water and heat metering: it selects and supplies meters, sets up automatic collection and transmission of readings, and offers software, analytics and integration with billing systems. The company needs a new corporate website that makes the key point from the first screen: it builds the entire metering system, not just sells devices.
The client provided a detailed 65-page specification: the sitemap, the blocks on every page, audience segmentation, and requirements for the signature texture, animation, forms and accessibility. The site is in Ukrainian, with an English version. I am handling the whole project: first the design in Figma, then development on WordPress.
The site has two audiences with different questions. “Partners” are water utilities, heat supply companies, municipalities and dealers. “Business” covers property developers, property management companies, and industrial and commercial enterprises. Under the specification, both segments share the same structure and navigation; what changes is the emphasis: the subheading, recommended solutions, case studies and calls to action.
In the header, next to the phone number, email, search and language switcher, I added a link to the version for the other segment, and on the first screen a label that tells visitors straight away who the page is for.
The first screen is a full-width photo of a city with a soft dark overlay, the signature texture and a large heading: modern water and heat metering, from meter to analytics. Under the specification the banner changes with the visitor’s region, so the photo sits on a separate layer. Along the bottom of the banner runs a glass-effect data path strip: meters → data transmission → digital platform → analytics and billing.
The home page then unfolds the offer step by step:
I turned the header, footer, floating quick-contact button, buttons and CTA block into Figma components. Inner pages follow a common pattern: a section banner with a photo, breadcrumbs, a heading and an accent button → the blocks from the specification → a call to action → the footer. There are 20 templates in all – business areas and solutions, telemetry, software, service, technical documentation, news and case studies, about the company, contacts, the academy, and utility pages: search, thank-you, subscription, policies, 404 and maintenance.
A separate page of the design file holds the UI kit, so the site can be built with no guesswork:
The brand orange appears only where there is an action or data on the move – main buttons, dotted data paths, stage numbers, key figures – and takes up no more than 10% of the screen. White text on orange is never used: that pair fails the contrast check, so accent buttons carry dark blue text.
The specification requires animation to explain, not decorate. The motion for each section is described right in the design, and a separate sheet sets out the general rules and 17 blocks – what moves, for how many milliseconds and why. Animation shows the path of the data, reinforces the figures and holds attention; there is no purely decorative movement.
For the enquiry forms in the brief I designed a pop-up window in four states – filling in, validation error, sending, and success with an enquiry number – and set out how it behaves: it closes with Esc or a click on the background, keeps focus inside the window, allows resubmission only after 60 seconds, turns into a bottom sheet on mobile and has tap targets of at least 44 px.
The site is built on WordPress with my own theme, burum: every template matches the design, and the site is now waiting for the client’s photos and contact details. Styles and scripts are loaded the standard way, without unnecessary libraries, and the brand tokens from the UI kit are carried over into CSS variables, so the colours on the site are exactly those in the design. What the theme includes:
The site’s main language is Ukrainian, and the English version is provided for in the specification.
When a company sells complex engineering solutions, its website acts as the first consultant. The visitor – a water utility engineer, a municipal representative or a property developer – has to understand quickly what is on offer and how it works. That is why, on corporate websites for B2B companies, I follow a few principles:
If you need a corporate website built end to end – from design based on your specification to a WordPress site – I will take the project from the first mock-up all the way to launch.
