De metamorfose van Cumela’s online platform

Cumela is dé brancheorganisatie voor ondernemers in de cumelasector. Meer dan 2.000 bedrijven zijn aangesloten bij Cumela.

Via de website richt Cumela zich op een brede doelgroep: (potentiële) leden, beleidsmakers, journalisten, interne medewerkers, sponsors en partners. Al deze doelgroepen bezoeken de site met hun eigen specifieke vragen en behoeften.

De uitdaging was om deze uiteenlopende wensen overzichtelijk te ordenen en de informatievoorziening beter aan te laten sluiten op de verschillende gebruikers. Een gebruiksvriendelijke herstructurering. 

Daarbij stonden de volgende doelstellingen centraal:

• De content beter afstemmen op de informatiebehoefte van iedere doelgroep;
• De standpunten van Cumela over actuele dossiers beter zichtbaar maken;
• Ondernemers praktisch ondersteunen bij het voeren van hun bedrijfsvoering;
• En bijdragen aan de commerciële doelstellingen van de vereniging.

De website werd in 2020 gelanceerd en bracht destijds al het nieuws, de kennisbank, de opleidingen en de vereniging samen op één domein. Door de jaren heen bleken zowel het werkveld als de verwachtingen van leden, beleidsmakers en journalisten veranderd. Leden misten een heldere navigatie, een betere zoekfunctie en filteropties voor kennisartikelen, terwijl potentiële leden het voordeel van een Cumela‑lidmaatschap niet vonden. 

Uit een enquête kwam daarnaast naar voren dat de homepage overvol aanvoelde, dat tools (zoals de rekentool) snel in de vergetelheid raakten en dat ondernemers behoefte hadden aan duidelijke quick‑links naar informatie. Kortom: het was tijd voor een midlife‑refresh.

Finalist stelde voor om het project niet te benaderen als een groot redesign, maar als een midlife‑refresh: een vernieuwing waarin techniek, UX en visuele identiteit worden aangescherpt, maar waarin bestaande content en functionaliteit zo veel mogelijk worden hergebruikt. 

De opdracht werd in drie focuspunten onderverdeeld, gebaseerd op input vanuit Cumela.

1. Navigatie & informatiestructuur
2. Zichtbaarheid van het aanbod
3. Homepage‑inhoud

Voor elk focuspunt organiseerden we een interactieve werksessie met een kleine, multidisciplinaire groep (marketing, redactie, teamleiding). Tijdens deze sessies werden alle wensen en ideeën uit de briefing besproken, voorbeelden verzameld en opdrachten voorbereid. Na de sessies werkte Finalist de ideeën uit tot wireframes, waarna deze werden gevalideerd in een grotere groep (waaronder eindgebruikers) en aangescherpt. 

Uit de gezamenlijke werksessies kwam helder naar voren welke uitgangspunten belangrijk waren voor het opstellen van het concept.

• Herstructurering van navigatie en menu’s: de site kende veel verschillende navigaties: hoofdmenu, dienstenmenu, banners en links in teksten. In de werksessies onderzochten we de beste klikpaden voor de belangrijkste taken van de doelgroepen.
• Verbeteren van de vindbaarheid van standpunten en dossiers: actuele thema’s kregen een prominente plek, zodat beleidsmakers en leden snel weten waar Cumela voor staat.
• Balans tussen dynamisch en statisch: nieuws was leidend op de oude site, terwijl dienstverlening, opleidingen en lidmaatschap onderbelicht bleven. Er zijn duidelijke CTA’s nodig om eenvoudig lid te kunnen worden en opleidingen te zoeken.
• Technische optimalisaties zoals het tonen van álle data van opleidingen en agenda’s, het implementeren van 301‑redirects zodat bestaande bookmarks blijven werken en een efficiëntere zoekfunctie.

Cumela heeft tijdens het traject een nieuwe huisstijl laten ontwikkelen met een sterke merkstrategie. Het merk staat voor betrouwbaarheid, helderheid, een menselijke benadering en oplossingsgerichtheid. Het voelt als “een stevige handdruk: betrouwbaar, eerlijk en betrokken”. 

Finalist vertaalde deze waarden naar het vernieuwde UX‑ en webdesign. De dialoogvlakken en gelaagde horizonten uit het brandbook – geïnspireerd op grondlagen – geven de site een dynamische gelaagdheid. Gezamenlijk vertaalden we deze richtlijnen naar componenten en pagina‑sjablonen in Figma. Hierdoor sluit het UX‑design naadloos aan bij de branding zonder een compleet nieuw ontwerp te hoeven maken.

Voor de realisatie hebben we eerst gekeken welke onderdelen van de bestaande Drupal website hergebruikt konden worden. Denk hierbij aan paragrafen, contenttypen en trefwoorden. Vervolgens hebben we binnen het design bepaald welke elementen we opnieuw konden inzetten met een aangepaste vormgeving, en welke onderdelen we volledig nieuw moesten ontwikkelen.

Omdat veel overeenkwam met de bestaande site, hoefden we aan de Drupal-kant nauwelijks aanpassingen te doen. Het meeste werk zat in het themadeel van Drupal. Hiervoor hebben we een nieuw thema ontwikkeld op basis van ons 'Finalist-basisthema'. Dit thema bevat een stevig raamwerk en de nieuwste technologieën, waardoor we snel en efficiënt konden doorontwikkelen.

Met Single Directory Components (SDC) introduceert Drupal 10 een nieuwe, overzichtelijke manier van theming. Alle bestanden die nodig zijn om een webcomponent – zoals een knop, carousel of menu – te renderen, worden in één map samengebracht. Zo’n SDC-component bevat onder andere YAML-metadata, Twig-templates, CSS-stylesheets en JavaScript-scripts. Indien gewenst kunnen er ook extra bestanden in opgenomen worden, zoals een screenshot, een PHP-bestand of mediabestanden die bij de component horen.

Daarnaast hebben we gebruikgemaakt van Atomic Design, een methodiek waarbij paginaonderdelen worden opgedeeld in kleine elementen en groepen. Dit zorgt voor een solide basis bij het ontwerpen en ontwikkelen van een website. Vanuit dit uitgangspunt is ons nieuwe thema opgebouwd.

Veel Twig-templates uit het vorige thema zijn hergebruikt. Met slechts minimale aanpassingen konden we deze omzetten naar het nieuwe design – volledig in lijn met de nieuwste technieken en Drupal-standaarden.

De communicatie met de klant verliep soepel. We hielden de lijnen kort en schakelden direct via MS Teams. Die informele en snelle manier van werken zorgde ervoor dat we snel keuzes konden maken.

Doordat we nauw samenwerkten met de klant, konden we eenvoudig bijsturen. Werkt iets niet goed? Dan pasten we het direct aan. Zagen we kansen om iets te verbeteren? Dan voegden we dat toe.

Dankzij deze efficiënte werkwijze haalden we het maximale uit het team en het budget. We hebben zelfs extra werk kunnen oppakken. Dat bevestigde onze aanpak. Een klein team werkt in een midlife-refresh project beter dan een traditioneel, groot projectteam. Waar je normaal veel schakelmomenten, formeel overleg en meerdere stakeholders hebt, gaf deze aanpak ons juist snelheid en wendbaarheid.

De midlife‑refresh van Cumela.nl resulteerde in een duidelijke, gebruiksvriendelijke website die het uitgebreide dienstenpakket van Cumela beter ontsluit: www.cumela.nl

De website is op meerdere fronten verbeterd om leden en beleidsmakers beter van dienst te zijn. 

• Zo is de navigatie opnieuw ingericht op basis van hun belangrijkste taken, wat zorgt voor duidelijkere menu’s en klikpaden.
• Nieuws, dossiers en services zijn logisch gescheiden en beter vindbaar, terwijl blogs en artikelen overzichtelijker zijn gepresenteerd.
• De voordelen van het lidmaatschap worden nu helder uitgelegd, met directe aanmoedigingen om lid te worden.
• Ook is de zoek- en filterfunctie verbeterd, waardoor kennis en opleidingsinformatie makkelijker te vinden zijn.
• Technisch is de site geoptimaliseerd met onder andere 301-redirects voor bestaande bladwijzers, snellere laadtijden en voorbereiding op een headless CMS.
• Tot slot zorgen een frisse visuele identiteit met herkenbare kleuren en gelaagde ontwerpen voor een eigentijdse, vertrouwde uitstraling.

Dankzij de co-creatieve aanpak, waarin techniek, interactie en de vernieuwde visuele identiteit samenkomen, is cumela.nl weer helemaal klaar voor de toekomst. 

Leden vinden nu sneller de informatie die zij nodig hebben, potentiële leden worden op een aantrekkelijke manier uitgenodigd om zich aan te sluiten en beleidsmakers en journalisten krijgen een duidelijk beeld van de standpunten van Cumela.

Wil je hier meer over weten? Neem dan contact met ons op voor een vrijblijvende kennismaking.