200+ keer beoordeeld, gemiddeld starstarstarstarstar sterren

Een vlotte digitale leerervaring voor ambitieuze professionals

Industrie:

Professionele coaching en online onderwijs

Tijdlijn:

3 weken

Impact:

+34% meer gestarte cursusinschrijvingen

Overzicht van online cursusplatform van CPC Academy op desktop en mobiel

Van interessant naar inschrijven, zonder omwegen

Een goed online cursusplatform trekt toekomstige deelnemers in een paar tellen van “hmm, interessant” naar “schrijf me in”, niet pas na vijf verdwaalde klikken. Toen KUBE Studio ons vroeg CPC Academy opnieuw te ontwerpen, was de briefing opvallend eerlijk: de bestaande site oogde nogal vlak en saai en verstopte de inschrijfknop in een zee van tekst. Elke extra stap kostte de academie echte boekingen en liet coaches en consultants achter met dezelfde vraag: hoe kan sterke inhoud toch zo stroef verkopen?

Budget en opdracht

CPC Academy wilde drie dingen, snel: een scherper merkbeeld, een afrekenstap die vanzelf spreekt en paginatemplates die ze konden opschalen zonder weer een nieuw ontwerprondje, en dat alles met hun geliefde lettertype Lato en een nette eerste ontwerpbegroting van € 2.500.

Onze taak? De ruis eruit halen, een rechte route tekenen van cursuskaart naar betaling en pixelnette Adobe XD-bestanden opleveren waar hun ontwikkelaars direct mee verder konden. Hieronder zie je hoe we dat hebben aangepakt, en vooral waar je zelf dezelfde lekken in je inschrijfpad kunt herkennen.

Homepagina van online cursusplatform van CPC Academy met hero en introductie
Mobiele contactpagina en footer van website voor trainingsbureau CPC Academy

Achtergrond en doel

CPC Academy leidt coaches en consultants op die praktische handvatten zoeken, geen glimmende managementpraat. Toen KUBE Studio ons inschakelde, kwam de briefing met drie harde randvoorwaarden:

  1. Drie kernlay-outs plus een megamenu, home, categorie en cursusdetail, eerst ontworpen op desktop in 1920 px en daarna vertaald naar mobiel op 390 px breed.
  2. Pixelnette oplevering in Adobe XD; geen Figma, Zeplin of andere overdrachtstools waar hun ontwikkelaars toch niet mee werken.
  3. Een vaste ontwerpbegroting van € 2.233 in gespreide betalingen, met twee feedbackrondes om het tempo erin te houden.


Die begroting werd na wat toekomstmuziek en onderhandeling nog iets strakker getrokken, maar de scope hield stand doordat we één mobiele template schrapten en het aantal feedbackrondes begrensden.

Cursusoverzicht van online cursusplatform van CPC Academy met filters en trainingskaarten
Contactformulier en adviesblok op website voor trainingsbureau CPC Academy

Waar het wrikte

CPC noemde de oude site zelf nogal vlak en saai. Lange tekstblokken, kleine knoppen en een afrekenstap die pas na een halve speurtocht opdook, joegen drukke coaches weg die gewoon snel een training wilden kiezen. De academie wilde ook vasthouden aan Lato, licentievriendelijk en prima, en de tekstblokken compact houden. Geen digitale roman dus.

Jouw pijnpunten kunnen verdacht bekend klinken:

  • Weglopende inschrijvingen. Bezoekers haken halverwege af omdat de kooproute slingert alsof iemand zonder kaart is gaan wandelen.
  • Ontwerpbottlenecks. Elke kleine wijziging betekent weer een offerte, weer wachten en weer nodeloze vertraging.
  • Opschalen op stel en sprong. Vandaag alleen Duits, morgen wil het bestuur Engels, Spaans en misschien videomodules.

De opgave

CPC had een online cursusplatform nodig dat de route van nieuwsgierigheid naar inschrijving korter maakt, de merkuitstraling scherper neerzet en ruimte laat voor functies van morgen, zonder opnieuw een platform te hoeven kiezen of extra software aan te schaffen. Dat is precies de knoop die je ook ziet bij een website voor trainingsbureau of een nieuw cursusportaal.

Hieronder zie je onze nuchtere aanpak, elke klik uittekenen, wireframes schetsen in Excalidraw en XD-bestanden opleveren waar ontwikkelaars bijna blind op kunnen bouwen. Bijna, we willen ook weer niet dat ze tegen een muur aanlopen.

Mobiele schermen van online cursusplatform met leerwerelden en menu van CPC Academy
Cursusdetailpagina en klantreacties op online cursusplatform van CPC Academy

Onze aanpak

Als budgetten krap zijn en elke klik telt, wint een strak online cursusplatform het van losse fratsen. Dit is de vierstappenoefening die we voor CPC Academy hebben uitgevoerd.

  1. Volg de route naar betaling We liepen door de oude afrekenstap en zagen de meeste uitval op de categoriepagina. Dat inzicht bepaalde een kortere route van menu naar “Nu inschrijven”.
  2. Eerst schetsen, dan pas pixels Met snelle wireframes in Excalidraw konden KUBE en CPC in minuten schuiven met tekstblokken, nog voordat vormgeving kostbaar werd.
  3. Eén keer goed in Adobe XD Desktop eerst op 1920 px, daarna de budgetvriendelijke mobiele variant, homepagina plus vast megamenu. Twee feedbackrondes, reacties binnen 48 uur, alles gewoon in XD-opmerkingen, geen extra systemen.
  4. Overdragen met context We zetten specificaties, lettertypetokens en notities voor breekpunten direct in het XD-bestand, zodat ontwikkelaars zonder extra inlog verder konden.


Resultaat: een rechte inschrijfroute die bezoekers zonder gedoe kunnen volgen, en waar de financiële afdeling verrassend weinig bezwaar tegen zal hebben.

Gereedschap, meer niet

  • Adobe XD voor wireframes, ontwerpsysteem en ontwikkelspecificaties
  • Excalidraw voor snelle schetsen en plaatsing van tekst
  • Slack & e-mail voor korte vragen en akkoordmomenten
  • Dropbox als enige verzamelplek voor beelden, tekst en verzoeken als “kun je deze hero nog even wisselen?”


Geen opgeblazen gereedschapskist, geen onverwachte licentiekosten, alleen wat nodig was voor een schone UX/UI-sprint voor online onderwijs.

Planning in het kort

  • Week 1: Aftrap Doelen aanscherpen, KPI’s vastleggen, route uittekenen
  • Week 2: Wireframes Excalidraw-schetsen met echte tekst
  • Week 3-4: Visueel ontwerp Adobe XD desktopontwerp, daarna mobiele vertaling
  • Week 5: Feedbackrondes Twee asynchrone rondes plus definitief XD-bestand
  • Week 6: Overdracht naar bouw Stijlgids met tokens, responsieve notities en downloadlink.

    Slank, helder en nog steeds op koers, ook nadat we door een scopesnoei één mobiele pagina inruilden voor extra scherpte op de rest.
Mobiele introductiepagina van website voor trainingsbureau CPC Academy
Termijnoverzicht van online cursusplatform van CPC Academy met trainingsdata en prijzen

Wat er echt verschoof

  • Meer startende inschrijvingen, minder frictie
    Dertig dagen na livegang zag CPC Academy 34% meer gestarte cursusinschrijvingen, de maatstaf die hier echt telt. Die stijging kwam doordat we twee klikken uit de route haalden en de knop “Nu inschrijven” boven de vouw zetten op elke template.
  • Laadtijd omlaag
    Zware hero-afbeeldingen verdwenen of werden vertraagd geladen, waardoor de eerste zichtbare weergave op 4G 1,2 seconde sneller werd. Mobiele bezoekers bleven dus hangen in plaats van direct weer te vertrekken.
  • Scrollgedrag met een verhaal
    De detailpagina’s van cursussen lieten 42% meer gemiddelde scrolldiepte zien. Bezoekers lazen de inhoud dus echt, in plaats van alleen even naar de titel te kijken en dan af te haken.
  • Sneller akkoord, minder heen en weer
    De projectleider van KUBE vatte het na de eerste presentatie droog samen: ontwerptechnisch werden vooral nog kleinere aanpassingen verwacht. Minder herstelwerk, sneller akkoord, lagere rekening. Altijd prettig, ook in deze economie.

Wat jij hiervan kunt meenemen

  • Je hebt geen tien templates nodig, drie scherpe lay-outs kunnen een complete academiesite dragen.
  • Een website voor trainingsbureau met duidelijke CTA’s wint het bijna altijd van een overdaad aan toeters en bellen.
  • Cijfers schuiven het snelst als je laadsnelheid en klikroute tegelijk aanpakt.

Snelle lessen die je zo kunt stelen<

  1. Zet je koopknop in het blikveld binnen de bovenste 600 px op desktop en binnen de eerste swipe op mobiel.
  2. Wireframe met echte woorden echte tekst in snelle schetsen dwingt al vroeg tot lastige maar juiste keuzes.
  3. Begroot één mobiele template als het budget knelt, kies dan de homepagina. De patroonbibliotheek draagt de rest.
  4. Zet breekpunten in XD bespaar ontwikkelaars een extra overdrachtstool en jezelf weer een sprint vol vragen.

Jouw volgende stap

Je afrekenpad kan op precies dezelfde plekken lekken als dat van CPC. Plan een korte videocall van 30 minuten, geen druk, wel eerlijk commentaar en scherm delen. We laten je zien waar je online cursusplatform stokt en hoe je dat repareert voordat de volgende bezoeker weer verdwijnt.

Hand met een keramische koffiemok op een houten bureau in een Zwols industrieel kantoor, zacht daglicht
Collega loopt door een gang met sterke bewegingsblur in een Zwols industrieel kantoor
Twee collega's staan even stil in een zwartomrande deuropening voor een kort gesprek in een industrieel kantoor Twee collega's lachen tijdens een koffiemoment in de keuken van het Zwolse industriële kantoor
Drie collega's in een gang van een industrieel kantoor, één loopt voorbij met sterke bewegingsblur Collega kijkt in zijprofiel uit een hoog industrieel raam, zacht daglicht op haar gezicht
Collega werkt aan een houten bureau met haar rug naar de camera, grote plant wazig in voorgrond
Schuin van bovenaf van twee paar handen op een houten bureau met koffiemok en MacBook in een Zwols industrieel kantoor

Laten we van je volgende
project een succesverhaal maken.

Vraag een voorstel aan

Vertel wat vastloopt, wat je wilt bouwen, of wat opgelost moet worden. We reageren binnen 24 uur.

    Dit formulier is voor mensen met een project. Niet voor bureaus die toevallig hetzelfde doen als wij.

    Plan een call

    //