Giving a safety-services business its first digital product

The business ran on expertise delivered in person: risk assessments, playground inspections, fire-safety plans, staff briefings. That expertise was described across two separate websites, and neither of them could take a payment. A customer could read about a service — and then had to pick up the phone.

The knowledge was the product — and there was no way to buy it without booking a visit.

So the brief was not really “merge two websites”. It was: give this business a digital product, and build the structure a customer travels through to reach it. Consolidation was the precondition — a self-paced course and a members' area only make sense once there is one place they can live.

Four service areas

These four are the spine of everything downstream. They already existed in the business, and they already existed in the logo — an umbrella with the four areas set around it, each in its own colour. The platform puts that colour system to work: it is how you know where you are.

Decision 1 — the services carry the site

Rather than following page types, the architecture follows the four service areas the business actually sells. Each opens into its own set of offers — Arbeitsschutz alone holds six, from consulting to automated staff briefings. The same four appear in the mega-menu, the mobile menu, the homepage and the button set, so a customer learns the structure once.

Decision 2 — pages you compose vs. pages that behave

I mapped every page in the platform down to its section stack, then split the pages into two kinds. Content pages are compositions — hero, features, benefits, FAQ, CTA — assembled from the same sections, so the client can build new ones without me. System pages are not: cart, checkout, booking confirmation, the learning area, password reset. Those behave rather than compose, and they were specified separately.

Decision 3 — every path ends somewhere

The flow map sets out how someone moves through the platform: informing themselves across the four areas, then taking one of three routes out — contact, book an appointment, or subscribe — each with its own confirmation. Alongside them run the two paths that were new: buying a course, and booking a seminar seat.

Desktop — the whole offering at once

The mega-menu shows all four areas side by side, each under its own colour, each service with its own icon. One glance covers the entire catalogue. The header carries both entrances to the paid side — Mitgliederlogin for the course area, Kundenlogin for documents — plus the cart and a booking CTA, so the commercial routes stay in reach without crowding the editorial nav.

Mobile — the same tree, three levels deep

A mega-menu does not survive a phone screen. Instead of flattening the catalogue or burying it in accordions, the mobile menu drills down one level at a time: main menu, then the four areas, then the services inside one. A back arrow and the parent name as a heading keep you oriented, the active branch takes its service colour, and Sign Up / Log In stays pinned to the bottom at every level — so the route into the paid product never disappears mid-navigation.

The homepage

The homepage opens on a slider that introduces the four areas in turn, each taking over the page in its own colour — so the first thing a visitor learns is the shape of the offering.

‹›

1 / 2

1. 01DiscoverA service area, or the course that solves the same problem
2. 02DecideOffer detail — price, dates, seats, what you leave with
3. 03BuyCart and checkout, for a course, a seminar seat or a document
4. 04Get accessConfirmation, then credentials by e-mail
5. 05LearnMembers' area — course overview, learning area, lessons

Five steps, and the design work is in the joins. Buying is where consolidated platforms usually give themselves away: you check out on one system and get dropped into another that looks nothing like it. Here the checkout, the confirmation and the members' area are built from the same component library as the marketing pages, so the seam is not visible.

Buying — three things, one checkout

The platform sells a self-paced course, seats at dated seminars, and downloadable documents — three different kinds of thing through one WooCommerce checkout. The seminar template carries the constraints that come with a real room: price, seats left, how many have already registered, duration, date, and the certificate you leave with. Both “add to cart” and “book now” are offered, because a Kita ordering for its staff and an individual signing up behave differently.

Learning — the members' area

After checkout, credentials arrive by e-mail and the customer enters the members' area: a course overview, the learning area, and the individual lessons that walk a Kita through its own risk assessment step by step. This is the product the business did not have.

The colour system is the load-bearing part. Every component that can belong to a service area has a variant per colour — buttons come as a matrix of four service colours across filled and outline, with and without an arrow — so a Brandschutz page is built from Brandschutz components rather than recoloured by hand. Navigation ships in default and active-section variants, and the category card is one component in four service colours.

The platform runs on WordPress and WooCommerce, and the client maintains it in-house. That set the constraint on the whole system: components had to map onto what the page builder could actually assemble, and content pages had to be composable from a fixed set of sections. A design the client could not extend would have started decaying the week after launch.

Assembled

‹›

1 / 2