Hoe webdesign de conversie-versneller werd

oen de merkidentiteit van 50+ Mobiel eenmaal stond (zie case: merk-DNA), was het tijd voor de volgende stap: het merk digitaal tot leven brengen. Er wás nog geen website. Geen structuur, geen stijl, geen flow. Alleen een ambitieus plan om het merk online net zo duidelijk, vriendelijk en menselijk te maken als offline.

De opdracht was helder: bouw een website die niet alleen het merk uitdraagt, maar ook verkoopt, vertrouwen wekt en blijft meegroeien met de organisatie.

De uitdagingen:

• Het bestelproces moet snel en eenvoudig zijn.
  
  
• De website moet vertrouwen uitstralen voor een doelgroep die zekerheid belangrijk vindt.
  
  
• Het design moest future-proof zijn voor de groei naar 300.000+ klanten.

We begonnen letterlijk op een leeg canvas: van merkvertaling tot wireframes, UX-flow en visueel design.

Onze strategie rustte op drie principes:

1. Converteren
   Elke pagina heeft één doel. Geen afleiding, geen overbodige keuzes. Van bundelvergelijking tot bestelknop: alles is ontworpen om actie te stimuleren, onderbouwd met A/B-testen en gebruiksdata.
   
   
2. Vertrouwen wekken
   Voor een doelgroep die zekerheid zoekt, is vertrouwen de belangrijkste valuta. Daarom is Handige Harry (Harry Piekema) overal waar het telt aanwezig: op de homepage, bij het bestelproces en op informatieve pagina’s. Zijn vriendelijke, herkenbare uitstraling verlaagt drempels, legt uit en maakt elke stap menselijker.
   
   
3. Begrip creëren door radicale duidelijkheid
   Telecom is complex. Ons webdesign is dat niet. We vereenvoudigden keuzes, schreven begrijpelijke taal, gebruikten visualisatie om opties te verduidelijken en ontwierpen structuren die cognitieve belasting minimaliseren.

Om het merk karakter te geven, kozen we voor een main character: Handige Harry, vertolkt door Harry Piekema. Zijn vertrouwde imago als ‘de grappige supermarktmanager’ vormt de perfecte basis voor een merk dat service en humor wil combineren.

Als Handige Harry belichaamt hij alles wat 50+ Mobiel is: vriendelijk, benaderbaar en een beetje onhandig op een charmante manier. In elke campagne brengt hij luchtigheid en herkenning, precies wat de doelgroep aanspreekt. Zijn onhandigheid zorgt voor glimlachmomenten, maar ook voor vertrouwen — omdat het merk menselijk blijft, zelfs in telecomtaal.

De merkidentiteit vertaalden we naar een digitale ervaring die betrouwbaar en no-nonsense is.

Belangrijke ontwerpkeuzes:

• Visuele storytelling met Harry als gids.
  
  
• Heldere, toegankelijke typografie voor leescomfort.
  
  
• Warme, rustige kleuren die rust geven.
  
  
• Veel whitespace voor overzicht.
  
  
• Duidelijke iconen en voordeelpunten.
  
  
• Een menselijke tone of voice over de hele site.
  
  
• Veel inzet van ondersteunende video’s

Met tools als Hotjar, Google Tag Manager en HubSpot tracking brachten we het gedrag van bezoekers tot in detail in kaart. De inzichten gebruikten we om een structuur te ontwerpen waarbij elke stap logisch voelt.

1.   Navigatie & informatie

• Kortere menu’s en duidelijke categorieën.
  
  
• Transparante uitleg van kosten en voorwaarden.
  
  

2.   Productpagina

• Volledig herontworpen vergelijkingstabel.
  
  
• “Meest gekozen”-nudging voor vertrouwen.
  
  
• Direct inzicht in voordeel per maand.
  
  
• Veelgestelde vragen direct onder de bundels.
  
  

3.   De bestelflow: het commerciële hart

Van wireframe tot pixel-perfect UI ontwierpen we de bestelflow rond één principe: nul frictie.

Belangrijkste verbeteringen:

• UX-patterns voor snelheid en zekerheid.
  
  
• Persoonlijke uitleg van Harry bij cruciale keuzes.
  
  
• Duidelijke voortgangsindicatoren (“Je bent er bijna”).
  
  
• Eén taak per stap.
  
  
• Minimale hoeveelheid invulvelden, meer focus.
  
  
• Volledige prijs-transparantie.
  
  

Deze flow wordt continu gemonitord, getest en verbeterd. Het is een levend systeem in plaats van een statisch ontwerp.

Vanuit onze eerdere meetinfrastructuur implementeerden we volledige tracking over de hele site. Zo konden we elk gedrag meten: van klik tot checkout.

Op basis daarvan startten we een reeks A/B-testen op cruciale conversiepunten:

• CTA-tekst, kleur en formaat.
  
  
• Positie van call-to-actions per device.
  
  
• De combinatie van Harry’s gezicht met conversieknoppen.
  
  
• Volgorde van bundelkeuzes en prijscommunicatie.

De uitkomsten leidden tot meetbare groei in zowel CTR als afrondingspercentage. Micro-optimalisaties met macro-resultaten.

Om snelheid en consistentie te waarborgen ontwikkelden we een schaalbaar designsysteem dat de basis vormt voor alle digitale uitingen van 50+ Mobiel. Het systeem bevat een componentenbibliotheek, design tokens en UX-richtlijnen die zorgen voor herkenbaarheid en efficiëntie.

Dankzij deze structuur kan 50+ Mobiel snel nieuwe campagnes en pagina’s uitrollen zonder in te leveren op kwaliteit, toegankelijkheid of merkconsistentie. De technische structuur van de website is ingericht met oog voor performance, SEO en schaalbaarheid, zodat design en vindbaarheid hand in hand gaan. Toegankelijkheid is daarbij een vast ontwerpuitgangspunt: de WCAG-richtlijnen dienen als kompas om elk element begrijpelijk, zichtbaar en bruikbaar te maken voor iedereen.

Het nieuwe webdesign combineert merkversterking met meetbare verbetering in gebruiksgemak en conversie. Bezoekers navigeren sneller, het bestelproces voelt eenvoudiger en de merkbeleving sluit naadloos aan op de verwachtingen van de doelgroep.

De website is nu een schaalbaar platform dat zowel commerciële als merkdoelen ondersteunt: efficiënt in beheer, herkenbaar in uitstraling en krachtig in conversie.

✔️ Design, data en psychologie versterken elkaar.

✔️ Eén UX-framework waarin conversie centraal staat.

✔️ Vertrouwen als drijvende kracht, met Harry als digitale gids.

✔️ Een schaalbaar design-systeem voor doorontwikkeling.

✔️ Eén herkenbare stijl in web, e-mail, advertenties en flows.

✔️ Optimalisatie als continu proces, niet als project.

Deze case laat zien dat webdesign veel verder gaat dan vormgeving. De website van 50+ Mobiel bewijst dat goed design niet begint bij pixels, maar bij merkwaarden: duidelijkheid, menselijkheid en vertrouwen. Door die principes te combineren met data, UX en conversiepsychologie, werd het webdesign niet slechts een visitekaartje, maar een groeimotor voor het merk.