HZ IT · IT-beheer, support en consultancy
Twee websites voor twee doelgroepen, op één gedeeld ontwerpsysteem
IT-bedrijf uit Weert met twee takken: dagelijks beheer en support, en strategische consultancy. Twee websites op één ontwerpsysteem, elk met een eigen doelgroep en verhaal.
· Project van het team van Volstoom
- 2
- websites, elk voor een eigen doelgroep
- 1
- gedeeld ontwerpsysteem en huisstijl
- 100%
- zelf te beheren in de blokeditor
De site in beeld
De consultancysite uitgerold, van lichtringen tot offerte
Dit is de volledige homepage van HZ IT Consultancy: wijs het venster aan en hij scrolt van de lichtringen in de hero naar het offerteformulier onderaan. Op de telefoon zie je daarna ook de zustersite HZ IT Services.
Hetzelfde navy op een klein scherm
Op de telefoon staan de koppen groot en de knoppen onder elkaar, met het menu achter één knop rechtsboven. De expertisepagina zet de negen vakgebieden onder elkaar als kaarten, en de servicessite houdt dezelfde huisstijl aan met een eigen belofte: IT die gewoon werkt.
De vraag
Twee doelgroepen die elkaars taal niet spreken
HZ IT bedient twee werelden die weinig met elkaar gemeen hebben: mkb-bedrijven die hun IT-beheer, telefonie en support willen uitbesteden, en organisaties die strategisch advies zoeken over cloud, DevOps en platform engineering. Eén website die beide verhalen tegelijk vertelt, maakte geen van beide overtuigend.
De aanpak
Eén merk, twee sites, één ontwerpsysteem
We splitsten het aanbod in twee websites onder één merk: HZ IT Services voor beheer, support en implementatie, en HZ IT Consultancy voor strategie, architectuur en engineering. Beide sites delen hetzelfde ontwerpsysteem en dezelfde huisstijl, maar spreken elk de taal van hun eigen doelgroep.
Technisch bouwden we beide sites als WordPress-blokthema met een eigen blokkenbibliotheek: het team past elke tekst, foto en pagina zelf aan in de blokeditor, zonder ontwikkelaar.
Het resultaat
Iedere bezoeker leest meteen zijn eigen verhaal
Bezoekers landen direct op het verhaal dat voor hen relevant is: de ondernemer die ontzorgd wil worden ziet geen Kubernetes-termen meer, en de CTO die een partner zoekt geen supportpakketten. Beide sites houdt het team volledig zelf actueel.
De uitdaging
Waarom één website hier niet ging werken
HZ IT bedient twee soorten klanten die zelden dezelfde persoon zijn. De ondernemer die zijn IT wil uitbesteden, en de CTO die een sparringpartner zoekt over cloudarchitectuur. Eén site die beide bedient, bedient uiteindelijk niemand goed.
Twee keer een andere eerste vraag
De een wil weten wie er opneemt als de mail eruit ligt. De ander wil weten of je verstand hebt van Kubernetes en platform engineering. Die twee vragen verdragen elkaar niet op dezelfde homepage.
Vaktaal schrikt de een af, de ander mist hem
Termen als CI/CD en Infrastructure as Code overtuigen de technisch beslisser en jagen de mkb-ondernemer weg. Ze weglaten draait dat precies om.
Twee sites betekent meestal twee keer onderhoud
De voor de hand liggende oplossing, twee losse websites, verdubbelt het werk: twee ontwerpen, twee bouwstromen en twee plekken waar de huisstijl uit elkaar kan lopen.
De consultancytak kijkt over de grens
Consultancyopdrachten komen ook uit het buitenland, dus die site moest tweetalig kunnen. De beheertak bedient de eigen regio en heeft dat niet nodig.
Zo hebben we het aangepakt
Splitsen zonder het merk te verdubbelen
Eén ontwerpsysteem, twee uitwerkingen. Alles wat het merk bepaalt is gedeeld, alles wat de doelgroep bepaalt staat los.
- 01
Het aanbod uit elkaar getrokken
HZ IT Services kreeg beheer, support en implementatie: van werkplek tot datacenter. HZ IT Consultancy kreeg strategie, architectuur en engineering. Elke bezoeker landt daardoor op de site die zijn taal spreekt, en de navigatie hoeft niet meer twee werelden tegelijk te dekken.
- 02
Eén palet en één typografie vastgelegd
Beide thema's delen exact dezelfde theme.json: hetzelfde diepe navy, hetzelfde elektrische blauw, dezelfde Poppins en JetBrains Mono. Wie de twee sites naast elkaar zet ziet één bedrijf, ook al staat er ander werk op.
- 03
Per site een eigen blokkenbibliotheek
De consultancysite kreeg blokken voor expertisegebieden, certificeringen en technologiekeuzes. De servicessite kreeg blokken voor beloftes, teamintroductie en dienstenkaarten. Samen zevenenveertig blokken, elk gebouwd voor het verhaal waar hij bij hoort.
- 04
Diensten en expertises als eigen contenttypes
Op de consultancysite zijn diensten en expertises aparte contenttypes. Ze worden één keer ingevoerd en verschijnen automatisch in de overzichten, in het menu en bij de gerelateerde onderwerpen onderaan een pagina.
- 05
Tweetalig waar het nodig is
De consultancysite draait op Polylang Pro en staat live in het Nederlands en het Engels, met een eigen URL per taal. De servicessite bleef eentalig, omdat de doelgroep daar in de regio zit. Niet elk onderdeel hoeft alles te kunnen.
Onder de motorkap
Twee sites, één technische basis
Twee sites onderhouden kost alleen minder als ze technisch familie van elkaar zijn.
- Twee blokthema's, één theme.json
- Identiek kleurpalet en dezelfde lettertypes, per site een eigen blokkenset.
- 47 eigen blokken
- Drieëntwintig voor consultancy, vierentwintig voor services.
- Diensten en expertises als contenttype
- Eén keer invoeren, automatisch overal in de site terug te vinden.
- Offerteaanvraag zonder plug-in
- Een eigen endpoint in WordPress verwerkt de aanvragen op beide sites.
- Tweetalig met Polylang Pro
- Nederlands en Engels op de consultancysite, met hreflang per taal.
- Structured data per dienst
- Organisatie- en dienstgegevens gaan als schema mee naar zoekmachines.
Het merk
Navy met één elektrisch blauw
HZ IT wilde weg van het grijze IT-cliché zonder speels te worden. Diep navy als basis, één elektrisch blauw als accent, en een monospace voor de technische details.
Kleuren
- Navy#0A1328
- Inkt#001E3F
- Elektrisch#1055FF
- Azuur#3B8AFF
- Papier#F5F7FB
- Wolk#E8EDF7
Typografie
- Poppins
- Koppen en tekst
- JetBrains Mono
- Labels en techniek
Vragen
Vragen over twee sites naast elkaar
Vragen die bij dit project vaak terugkwamen, over twee sites naast elkaar en wat dat kost aan onderhoud. Staat je vraag er niet tussen? Bel of app ons gerust.
ProjectmanagerOp werkdagen binnen 4 uur antwoord
Staat je vraag er niet tussen? Stuur gerust een appje of een mail, dan zoeken we het voor je uit.
01Waarom twee websites in plaats van één met twee ingangen?
Omdat een homepage maar één belofte kan doen. Een bezoeker beslist in seconden of een site over hem gaat. Met twee ingangen op één homepage laat je die beslissing over aan de bezoeker, en haakt een deel af voordat het zover komt. Twee sites betekent twee keer een scherpe belofte.
02Is twee websites onderhouden niet dubbel werk?
Niet als ze hetzelfde ontwerpsysteem delen. Kleuren, typografie en de opbouw van de blokken zitten in één gedeelde basis. Een aanpassing aan de huisstijl werkt op beide sites door; alleen de inhoud is per site anders.
03Kan het team beide sites zelf beheren?
Ja. Beide sites zijn opgebouwd uit blokken in de blokeditor, en diensten en expertises voert het team in als eigen contenttype. Nieuwe pagina's stellen ze zelf samen uit bestaande blokken, zonder dat de vormgeving kan sneuvelen.
04Wat kost een tweede website naast de eerste?
Fors minder dan de eerste, omdat het ontwerpsysteem er al ligt. Wat overblijft is de blokkenset voor het nieuwe verhaal en de inhoud zelf. Op onze prijzen staat wat de vaste pakketten kosten; voor een opzet als deze maken we vooraf een vaste prijs.
05Werkt deze aanpak ook bij meer dan twee doelgroepen?
Ja, met een kanttekening. Het ontwerpsysteem schaalt prima, maar elke extra site vraagt ook een eigen verhaal en eigen onderhoud van de inhoud. Vanaf drie doelgroepen is de vraag meestal niet of het technisch kan, maar of er genoeg te vertellen is om ze uit elkaar te houden.
06Waarom is alleen de consultancysite tweetalig?
Omdat consultancyopdrachten ook uit het buitenland komen, terwijl de beheertak de eigen regio bedient. De consultancysite draait daarom op Polylang Pro, in het Nederlands en het Engels, met een eigen URL en hreflang per taal. De servicessite bleef eentalig: niet elk onderdeel hoeft alles te kunnen.
07Hoe ga je om met vaktaal als CI/CD en Kubernetes?
Door die vaktaal alleen te gebruiken op de site waar hij overtuigt. Op HZ IT Consultancy helpen termen als CI/CD en Infrastructure as Code de technisch beslisser, terwijl ze de mkb-ondernemer wegjagen. Op HZ IT Services ziet de ondernemer die ontzorgd wil worden daarom geen Kubernetes-termen meer.
08Welke blokken heeft elke site?
Elke site heeft een eigen blokkenset, samen zevenenveertig blokken. De consultancysite kreeg er drieëntwintig, voor expertisegebieden, certificeringen en technologiekeuzes. De servicessite kreeg er vierentwintig, voor beloftes, teamintroductie en dienstenkaarten, elk gebouwd voor het verhaal waar hij bij hoort.
09Hoe komen offerteaanvragen binnen?
Via een offertefunnel op beide sites, zonder formulierplug-in. Een eigen endpoint in WordPress verwerkt de aanvragen van zowel HZ IT Services als HZ IT Consultancy. Daardoor werkt aanvragen op beide sites op dezelfde manier, terwijl elke site zijn eigen doelgroep aanspreekt.
10Waarom navy met elektrisch blauw?
HZ IT wilde weg van het grijze IT-cliché zonder speels te worden. Diep navy vormt de basis, één elektrisch blauw is het accent en Poppins draagt koppen en tekst. Voor labels en technische details is JetBrains Mono gekozen, een monospace die bij het vak past.
Eerst zien, dan beslissen
Wil je ook zo'n website?
Vraag het gratis proefontwerp aan: je ziet hoe jouw nieuwe website eruit kan zien én je krijgt er een vaste prijs bij, voordat je beslist.
Het bureau achter HZ IT: één vast aanspreekpunt, op werkdagen binnen vier uur reactie.
“Perfect gedaan. Ik stuurde een schets met uitleg en het eerste ontwerp zat er al voor 95 procent op. Na één kleine feedbackronde was alles precies zoals ik het wilde.”