Digitaal vlaggenschip voor maritieme wereldspeler

Jan De Nul Group is één van de grootste baggeraars ter wereld. De internationale familieonderneming heeft haar focus door de jaren heen verder uitgebreid met gerelateerde ingenieursuitdagingen, zoals de bouw van windmolenparken op zee. Maatschappelijke relevantie en duurzame ontwikkeling staan daarbij centraal. Die robuuste langetermijnvisie verdiende een net zo stevige digitale component.

Uitdaging

Een recente rebrandingoefening binnen het hele bedrijf vormde voor het online team een uitgelezen kans om ook de digitale omgeving grondig aan te pakken. De nieuwe website moest volledig aansluiten bij de gecreëerde huisstijl en tegelijkertijd doelgroepgericht en activerend werken. Twee doelstellingen stonden daarbij centraal:

• De bedrijfsidentiteit en uitgevoerde projecten op een belevingsgerichte manier overbrengen naar investeerders, partners en potentiële werknemers.
• De brede waaier aan doelgroepen - inclusief klanten, journalisten en ngo’s - zo efficiënt en duidelijk mogelijk bedienen.

Oplossing

We gingen aan de slag met een strategisch en designtraject dat geënt was op nauwe samenwerking tussen de eigen ontwerpers van Jan De Nul Group en het designteam van Dropsolid. Tijdens de reeks initiële workshops brachten we samen de bestaande website in kaart en analyseerden we de concrete noden op het gebied van ontwerp, user journeys, informatiearchitectuur en functionaliteit. Ook praktische elementen kwamen aan bod. Zo vormden uitbreidbaarheid in latere fases en onderhoud twee cruciale vereisten voor ROI en succes op lange termijn. Vervolgens brachten we de vereisten samen in de uitgewerkte wireframes en in het design.

De uitwerking van de wireframes en het daaruit voortkomende visuele ontwerp wordt altijd gebouwd op een combinatie van esthetische overwegingen en praktische gebruiksvriendelijkheid. Twee concrete voorbeelden van de belangrijke zoektocht naar dit evenwicht:

• Hamburgermenu
  Het eerste ontwerp voorzag in een hamburgermenu voor navigatie. Dat menu bestaat uit een eenvoudig icoontje met drie horizontaal op elkaar gestapelde lijnen en neemt weinig plaats in. Het is dan ook terecht populair op mobiele websites. Voor desktopwebsites is een hamburgermenu daarentegen minder zinvol en zijn zichtbare tekstmenu’s overzichtelijker. Uiteindelijk besloten we om een slim menu te ontwerpen dat zich automatisch aanpast aan de schermgrootte van de gebruiker.  
   
• Gebruik van animaties op de website
  Hoewel animaties een zekere visuele flair toevoegen aan een digitale beleving, leren de statistieken dat ze niet altijd even goed zijn voor verdere conversie. Een overvloed aan animaties leidt de aandacht af van de inhoud. Daarnaast hebben animaties ook een negatief effect op de toegankelijkheid van websites. Die bezorgdheden pakten we aan door animaties slimmer toe te passen. Zo starten bepaalde animaties enkel wanneer een surfer de muisaanwijzer over een bepaald visueel element beweegt. Een subtiel en delicaat evenwicht dat stijl en effectiviteit combineert.

Na afloop van het workshoptraject en de verdere uitwerking gingen de Dropsolid-developers aan de slag met Rocketship, het Drupalgebaseerde Dropsolid-platform voor de bouw van digitale ervaringen. Daarbij ontwikkelden we zogeheten Paragraphs op maat. Dat zijn flexibele contentblokken waarmee webmasters en content editors eenvoudig zelf de structuur van een pagina kunnen bepalen, volledig in lijn met de huisstijl en technische vereisten van hun digitale omgeving. Met behulp van Paragraphs ontwikkelden we heel wat features die het eigen team eenvoudig zelf kan aanpassen.

Enkele voorbeelden:

• Interactieve kaart met een overzicht van alle realisaties en projecten. De kaart is zo opgebouwd dat ze eenvoudig op andere plekken in de website weergegeven kan worden. Ze is ook schaalbaar, waardoor ze ook op telefoons en tablets wordt weergegeven zoals het hoort.
• Flexibele weergavemogelijkheden voor de casepagina’s. Het contentteam kan eenvoudig nieuwe realisaties toevoegen en die naar eigen smaak illustreren met citaten, afbeeldingen en video’s, zonder technische hulp.
• Grafisch uitgewerkte tijdlijn met overzichtelijke weergave van de bedrijfshistoriek. Opnieuw kunnen items eenvoudig worden aangepast door de eigen contenteditors.
• Geanimeerde weergave van een reeks uitgelichte bedrijfscijfers.
• Documenten uploaden bij nieuwe persberichten. Als het snel moet gaan, telt elke minuut. Communicatiemedewerkers voegen zonder problemen externe pdf-berichten of afbeeldingen toe aan hun nieuwsitems. Achter de schermen worden de downloadlink en overige technische informatie automatisch bijgewerkt voor elke upload, zoals bij de financiële rapportage onderaan deze pagina.

Resultaat

De nieuwe corporate website van Jan De Nul Group versterkt de nieuwe branding en sluit helemaal aan bij de waarden die het bedrijf wil uitstralen. Het innovatieve design gaat hand in hand met gebruiksvriendelijkheid en toegankelijkheid - en dat op elk toestel.

Het online team van Jan De Nul Group heeft vandaag zelf controle over de website. Ze kunnen pagina’s en content blokken toevoegen, die gegarandeerd mooi en volledig responsive zijn. Zo kunnen ze in alle vrijheid en binnen de design guidelines de website verder laten evolueren.

Tot slot stelden we ook een digitaal huisstijlhandboek op, dat als richtlijn kan dienen voor toekomstige uitbreidingen en nieuwe websites. Zo is de organisatie helemaal klaar voor de toekomst.

Lees de volleidge case of bekijk meer cases op dropsolid.com.