De ultieme B2B SaaS homepagina: zo bouw je er een

De website speelt een centrale rol in de B2B klantreis. Interactie met je doelgroep vindt steeds vaker plaats op social media en via communities. Uiteindelijk leidt die interactie tot een bezoek aan je website. 

Je website is het visitekaartje van jouw bedrijf. De homepagina is doorgaans zowel de eerst bezochte als de meest bezochte en daarmee een van de belangrijkste pagina’s op jouw domein.

We zien nog te vaak nietszeggende homepagina’s voorbij komen. Dat zorgt voor gemiste kansen. Hieronder daarom vier praktische tips voor het bouwen van de perfecte B2B SaaS homepagina.

Het doel van een homepagina

Bij de meeste start-ups en scale-ups bemoeien zich te veel partijen en stakeholders met de homepagina. Ieder met hun eigen kennis en achtergrond. Hierdoor focust de homepagina zich nog te vaak op irrelevante zaken.

Een homepagina kan alleen succesvol zijn als deze één doel nastreeft, namelijk het sturen van je bezoeker op het ondernemen van een actie. 

Drie key acties die een homepagina moet triggeren

Zeker voor verticale start-ups in B2B SaaS zou het hoofddoel van een homepagina moeten zijn om bezoekers een van de volgende acties te laten uitvoeren:

• De rest van de website ontdekken
• Je product uitproberen 
• Een demo boeken

Om een van deze acties te triggeren, dient je homepagina goed in elkaar te zitten.

Vragen die je homepagina dient te beantwoorden

Als een basale checklist om te achterhalen of jouw huidige homepagina goed ingericht is, kun je jezelf de volgende vragen stellen na het bezoeken van de pagina:

• Welk probleem los je op? 
• Met welk product?
• Voor wie is dit product bedoeld?
• Is het product gegrond? 
• Voldoet het product aan mijn behoeften? 
• Hoeveel kost het? 
• Hoe kan ik starten? 

Geeft jouw homepagina duidelijk antwoord op alle vragen hierboven, dan zit je waarschijnlijk al in de juiste richting. In het geval van veel homepagina’s gaat het echter bij het beantwoorden van de eerste vraag al mis.

Een goede homepagina begint bij een messaging fundament

Een messaging fundament is de kernboodschap die jij als bedrijf hanteert om je product te presenteren. 

De waardepropositie, voordelen en USP's zijn allemaal elementen van je messaging fundament. Een goed fundament is aansprekend, begrijpelijk en relevant en wekt daarmee interesse op bij je doelgroep. 

Die interesse is nodig om de websitebezoeker te motiveren om een actie te ondernemen. Daar is goede copywriting voor nodig. Daarom is het messaging fundament de basis van een sterke homepagina. 

Meer weten over het messaging fundament? Lees hier hoe we voor Wonderkind een strategisch messaging fundament opzette voor een succesvolle uitrol naar het Verenigd Koninkrijk.

De belangrijkste onderdelen van een B2B homepagina

Naast een messaging fundament is een goede opbouw van je pagina nodig. Een homepagina bestaat daarom uit secties. 

Het doel van deze secties is om interesse op te wekken, bezwaren weg te nemen en aanvullende voordelen en argumenten te tonen. Laten we, voordat wij bij de 4 praktische tips aankomen, deze secties kort behandelen.

Homepagina sectie 1 - De hero sectie

De hero sectie is het allerbelangrijkste onderdeel van je homepage. Grijp je de aandacht van je potentiële klant niet? Dan is de exit snel bereikt. Het duurt namelijk slechts 50 miliseconde voor er een oordeel is geveld over jouw website. 

Specifiek voor B2B SaaS oplossingen is het essentieel om het daadwerkelijke product en je waardepropositie te tonen. 

Elementen van de hero sectie

• Tag: definieer je productcategorie
• Titel: Leg je toegevoegde waarde uit
• Subtitel: Toelichting van de titel, voor wie en hoe
• CTA: Minimaal één CTA of liever een call-to-value 
• Bullets: Toon unieke features en hun voordelen
• Afbeelding: Geef een realistisch beeld van je product
• Social proof: Zorg dat er een review van je ICP beschikbaar is

De key elementen van de homepage bevinden zich “above the fold”. Dit betekent dat de hero sectie zonder te scrollen zichtbaar is.

Sectie 2 - Social proof sectie

De social proof sectie volgt meestal na de hero sectie en met een goede reden ook. Maar liefst 92% van B2B kopers leest reviews, voordat er een aankoop wordt gedaan. 

Social proof, ook wel bewijslast, zorgt voor bewijs dat je product goed is. Wanneer je duidelijk kunt laten zien dat anderen jouw product gebruiken, schept dat vertrouwen bij websitebezoekers.  

Elementen van de social proof sectie

• Logo’s, smal waarbij ze niet teveel hoogte innemen, maar goed zichtbaar
• Reviews 
• Korte quotes of tags van gebruikers

Sectie 3 - Product sectie

Deze sectie leent zich ervoor om de aandacht vast te houden. Scanbaarheid is cruciaal voor een goed converterende pagina. Overigens is het, zeker in B2B SaaS, essentieel dat je het daadwerkelijke product toont en zo de juiste verwachtingen schept. Vermijd dus generieke illustraties of stock afbeeldingen.

Elementen van de product sectie

• Voordelen
• USPs 
• Het wegnemen van bezwaren 
• Features en integraties
• CTA

De call-to-action wordt vaak in de buurt van een afbeelding van het product getoond, omdat daarbij de kans op een conversie het grootst is. 

Additionele secties

De eerste drie secties zijn het belangrijkst en kunnen daarom in juist die volgorde een aanzienlijk effect hebben op conversie. De volgorde van de aanvullende onderdelen is van minder groot belang. 

Met en zonder oplossing

Een voorbeeld geven van wat jouw bezoekers missen zonder jouw oplossing en krijgen met jouw oplossing zorgt voor extra bewijslast. 

Een tabel leent zich goed voor een “met/zonder” gedeelte op de homepagina. Hierin kunnen psychologische design aspecten het verschil maken. Donker en klein voor het “zonder” element en groot en lichter voor het “met” element. 

Extra CTA

Homepagina’s zijn vaak lang. Het is daarom slim om met extra call-to-action blokken te werken. Een ongeschreven regel is om blokken toe te voegen op het begin van de pagina, in het midden en als afsluiting van de pagina boven het footer-element.

Statistieken

Cijfers die imponeren en gefocust zijn op waar het product toe in staat is, zijn net als een met/zonder tabel, een goed voorbeeld van bewijslast. Denk bijvoorbeeld aan “52% meer omzet” of “3 keer zo snel”. 

Micro social proof

Wanneer social proof in sectie twee al is getackeld, kun je verder op de homepagina aanvullende social proof toevoegen. 

Denk daarbij aan langere recensies die op meerdere plekken terugkomen, foto’s van daadwerkelijke gebruikers met een quote of zelfs screenshots van daadwerkelijke complimenten op andere platforms. 

“Een website in zijn geheel, maar zeker ook de homepagina moet goed zijn voordat er wordt gefocust op een mooi design. Het komt nog te vaak voor dat de basis niet goed staat, maar er wel al aan tijdrovende design-elementen wordt gewerkt.” - Jesper Kollau - Designer & Webflow Expert bij Unmuted

4 praktische tips voor het bouwen van de perfecte SaaS homepagina 

Nu je weet hoe de perfecte homepagina is opgebouwd, is de vraag hoe je dit nu goed inricht. We geven je voor ieder onderdeel een handige tip en praktische voorbeelden. 

1. Perfectioneer je headline en overige copy 

We schreven aan het begin van dit artikel al over je messaging fundament. Dit is de basis voor copywriting die converteert. Zonder een sterke propositie in de vorm van een overtuigende headline en overige copy, geen sterke homepagina.

Er zijn verschillende copywriting frameworks die zich al jaren hebben bewezen en nog altijd succesvol worden toegepast.

Top copywriting frameworks voor je homepagina copy

• Problem - Agitate - Solution (PAS)
• Before - After - Bridge
• Attention - Interest - Desire - Action (AIDA)
• Features - Attention - Benefits (FAB)
• Clear - Concise - Compelling - Credible (4 C’s)
• Picture - Promise - Proof - Push (4 P’s)

Voorbeeld: Lumar.io 

Lumar is een technische SEO oplossing voor enterprise bedrijven. In het voorbeeld van Lumar is de 4P copywriting formule gebruikt. Picture, promise, prove, push is toegepast om de aandacht te trekken en de bezoeker aan te zetten tot actie. 

Er wordt een idee in het hoofd geprint van bezoekers, waarin een belofte wordt gedaan over wat er met Lumar mogelijk is. Er wordt bewijs geleverd door aan te geven dat honderden revenue-driven enterprise bedrijven er al gebruik van maken.

Wij zouden zelf de belofte hier nog wat aandikken, maar verder een goed staaltje copywriting. 

De rest van de homepagina is daarnaast ontzettend sterk door een creatief design en een duidelijke positionering. 

De website is scanbaar en trekt tegelijkertijd de aandacht. Ook geven de visuals op de rest van de pagina een goed beeld van het daadwerkelijke product.

2. Adresseer pijnpunten en bied oplossingen

Wanneer je bezoeker zich nog in de oriënterende fase bevindt, is het van belang dat de interesse zo veel mogelijk wordt opgewekt, vastgehouden en omgezet in gewenste actie. 

Het adresseren van pijnpunten is daarbij cruciaal. Niemand zit te wachten op een volledige uitleg van alle features, wanneer er nog geen bewustzijn is over waarom je deze features überhaupt zou willen gebruiken.

‍

Zorg daarom dat je de uitdagingen van je ICP glashelder hebt en duidelijk communiceert op je website. Wanneer je daarbij de oplossingen voorschotelt, wordt je potentiële klant er op de juiste manier mee geconfronteerd en is de kans op conversie een stuk hoger.

Voorbeeld: Webflow

Webflow is een oplossing voor het hosten en bouwen van websites.

Webflow weet alle bezwaren om Webflow niet te gebruiken onmiddellijk weg te nemen. Vanaf de headline tot aan de footer wordt de interesse van de bezoeker opgewekt en vastgehouden. 

Voordelen krijgen voorrang boven features. En alle elementen waarnaar je op zoek bent in een websiteplatform worden aangehaald op de homepagina.

Voorbeeld: Finstack

Finstack is een oplossing om financiële rapportages en processen te visualiseren. 

De homepagina is gericht op het zichtbaar maken van de oude situatie versus de nieuwe door gebruik te maken van de oplossing van Finstack. Hierdoor wordt duidelijk dat huidige en oude processen pijnlijk en moeizaam zijn. 

Door aan te tonen hoe het anders kan, wordt er behoefte gecreëerd. Een overtuigende homepage als je het ons vraagt.

3. Maak slim gebruik van bewijslast 

Pijnpunten aanhalen met sterke copy is één ding, maar het daadwerkelijk kunnen aantonen dat jouw product deze pijnpunten ook echt oplost is een volgende uitdaging.

Er is geen krachtiger middel dan het leveren van bewijslast. Met bewijslast toon je aan waar je product toe in staat is. 

Er zijn verschillende vormen van bewijslast. Denk daarbij aan het tonen van concrete resultaten, klantreviews of testimonials en statistieken. Een bezoeker kan hiermee snel overtuigd raken van de waarde van je product.

Voorbeeld: Fourthline

Fourthline is een oplossing voor bedrijven om fraude tijdens onboardingtrajecten te detecteren. Wat Fourthline ontzettend goed doet is een menselijke insteek toevoegen aan een zeer technisch product. Social proof is direct zichtbaar above the fold. 

De rest van de homepagina laat heel duidelijk zien welke voordelen en features er worden geboden, maar er wordt voornamelijk slim ingezet op bewijslast.

Zo is er een heel blok gewijd aan een testimonial inclusief foto en worden er statistieken gedeeld over de resultaten van het gebruik van Fourthline.

Het enige verbeterpunt dat wij hebben voor Fourthline is om in de hero sectie het product te laten zien. Hoewel een persoonlijke touch goed werkt en belangrijk is, draait het hier nog altijd om software en dien je daar een goed beeld van te schetsen. 

4. Een goede SaaS website zet aan tot actie

We gaven het al eerder aan, maar de juiste CTA's toevoegen op de juiste plaats, inclusief overtuigende copy zorgt ervoor dat je homepagina converteert.

Met de juiste CTA's op de juiste plek kun jij de bezoeker leiden naar een volgende stap in hun klantreis. 

Plaats duidelijke en relevante CTA's en gebruik actiegerichte en krachtige woorden. “Probeer nu gratis” of “Plan je demo” moedigen bezoekers aan om direct actie te ondernemen. Visuele elementen ondersteunen deze tekst, wanneer ze goed opvallen. 

Dit kun je bijvoorbeeld doen door gebruik te maken van kleuren die contrasteren met de achtergrond. Uiteindelijk is het van belang dat je waarde geeft in je tekst en deze doorvertaald in je CTA buttons.

Voorbeeld: Navvatic

De homepagina van Navvatic is sterk door de eenvoud. De pagina en messaging zijn kort maar krachtig waarin het product een leidende rol heeft.

De pagina heeft een duidelijke focus op het aanzetten tot actie. Call-to-action buttons vallen op, worden geïntroduceerd door sterke copy en passen goed bij de secties van de homepagina waar zij in voor komen.

De enige gemiste kans above the fold is het ontbreken van een product visual.

Voorbeeld: Elastic

De homepagina van Elastic mag niet ontbreken als we het over goede B2B SaaS websites hebben. Elastic is een data analytics en visualisatie platform. 

Elastic toont direct in de hero sectie een call-to-value door de copy “Drive results with AI” in de hoofdknop te tonen. Ook de secundaire knop bevat zo’n call-to-value en geeft mensen de keuze op basis van waar ze zijn in hun koopreis een toepasselijke actie te kiezen.

De pagina combineert creatieve elementen met functionele aspecten. Dit is een goed voorbeeld van hoe het merk wordt uitgedragen, terwijl de copy en content van de pagina gericht is op conversie.

Neem de tijd voor je B2B SaaS website

De homepagina is slechts één pagina van je volledige website. Er zijn dieperliggende pagina’s nodig om naar door te kunnen linken voor aanvullende informatie en bewijs.

Wanneer er interesse is gewekt, dien je die ook te beantwoorden. Ontbreekt er informatie of wordt deze niet goed ingelicht, dan resulteert dat in gemiste conversies.

Hoe bouw je nu een succesvolle homepagina of zelfs volledige website? Neem de tijd en volg onderstaande stappen. 

Zo bouw je de juiste fundering van je SaaS website

• Stem copywriting af op je ICP en hun specifieke problemen
• Bepaal de vier meest belangrijke pagina’s (veelal home, prijzen, over ons en de demo-pagina)
• Design de website met focus op social proof en scanbaarheid
• Ontwikkel de website met een focus op responsiveness en SEO 
• Lanceer, analyseer en bepaal wat er aangepast of aanvullend gebouwd moet worden

Gebruik de juiste tools

De juiste toolstack kan het makkelijker maken een goed converterende website te bouwen. We lichten een aantal van onze favoriete tools toe, die je kunnen helpen de tips uit dit artikel toe te passen.

Wynter of UsabilityHub

Haal het giswerk uit je website en gebruik een tool zoals Wynter of UsabilityHub. 

Met Wynter krijg je van jouw B2B doelgroep feedback op de copywriting en uitingen op jouw website. Zo kan je nog voordat je overgaat tot publicatie je copywriting optimaliseren.

UsabilityHub is een soortgelijke oplossing gefocust op het verkrijgen van feedback op je website design.

Het grote verschil tussen de twee zit hem in het feit dat UsabilityHub gefocust is op een grotere range aan tests waarbij ook apps en andere visuele uitingen getest kunnen worden. 

Daarnaast kun je aanvullend onderzoek doen met Wynter om meer over je doelgroep te weten te komen. 

Beide platformen zijn ontzettend sterk om je copy en design te valideren en verder te verbeteren. Dit kan enorme impact hebben op de conversie van je website en andere marketingmaterialen. 

Webflow

Weet je nog niet zeker op welk platform je jouw website gaat bouwen of wil je een betere website lanceren? 

Overweeg dan eens een oplossing zoals Webflow. Bij Unmuted zijn we groot fan met als voornaamste reden dat het een van de beste no-code oplossingen is voor start- en scale-ups. 

Het Content Management Systeem (CMS) maakt het ontzettend makkelijk om professionele en op maat gemaakte websites te bouwen, die voldoen aan al je wensen en eisen. 

Een belangrijk voordeel van Webflow is dat websites direct mobiel responsive zijn. Dit wordt als eerste principe toegepast en dat bespaart je ontzettend veel tijd.

De ultieme B2B SaaS Homepagina

Een effectieve B2B SaaS-homepagina vereist een duidelijke boodschap, overtuigende copywriting, maakt slim gebruik van bewijslast en bevat call-to-action knoppen om conversie te stimuleren. Een zorgvuldige planning en optimalisatie zijn cruciaal voor succes.

Neem dus de tijd en richt je op de juiste content. Vervolgens helpen tools om de homepagina en de rest van je website verder te optimaliseren.