Jan De Nul: design meets UX

Maakbedrijf
Build
Digitaal vlaggenschip voor maritieme wereldspeler
Jan de nul dropsolid

Uitdaging

Een volledige rebranding ligt aan de basis voor de nieuwe website. Die moest volledig aansluiten bij de gecreëerde huisstijl en tegelijkertijd doelgroepgericht en activerend werken.

Oplossing

Een strategisch designtraject connecteerde de ontwerpers van Jan De Nul Group en Dropsolid.

De Drupal website stelt het marketing team in staat om zelf mooie landingspagina's op te zetten met een aantal componenten op maat.

Resultaat

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. 

Jan de nul case - 2 schermen

Rebranding met 2 centrale doelstellingen

De voormalige bedrijfswebsite had het einde van z’n levenscyclus al een tijdlang geleden bereikt. De website was niet responsive en opgeleverde projecten en cases kwamen onvoldoende uit de verf. Bezoekers konden evenmin op een intuïtieve manier navigeren doorheen de website.

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:

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

Balans tussen design en UX

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 een hamburgermenu voor de 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.

Jan de nul case - 4 schermen

Interactieve kaart en grafische tijdlijn

De interactieve kaart geeft 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.

De grafisch uitgewerkte tijdlijn geeft een overzichtelijke weergave van de bedrijfshistoriek. Opnieuw kunnen items eenvoudig worden aangepast door de eigen contenteditors.

Jan de nul kaart

Drupal website met flexibele content blokken op maat

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:

Jan de nul case - mobiele telefoon

Flexibele weergave mogelijkheden

Het contentteam kan eenvoudig nieuwe realisaties toevoegen en die naar eigen smaak illustreren met citaten, afbeeldingen en video’s, zonder technische hulp.

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.

De paragraphs werden in verschillende variaties uitgewerkt volgens de bestaande huisstijl, waardoor de medewerkers van Jan De Nul Group over de vrijheid beschikken om zelf een geschikte lay-out te kiezen die tegelijkertijd gegarandeerd responsive is en in lijn met het overkoepelende huisstijlhandboek van het bedrijf.

Het 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.

Jan de nul sfeerbeeld
Jan de nul sfeerbeeld
Jan de nul sfeerbeeld
Jan de nul logo vierkant

Over Jan De Nul

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.

Ook interessant voor jou