Van een oude site naar een nieuwe site: tips én valkuilen

Overweeg jij om voor jouw organisatie een grote, bestaande website met meer dan honderd pagina’s te vervangen door een nieuwe website? Wij deden het. Bijna alles ging op de schop. Onze lessen en valkuilen in elf tips.

Judith Damveld schreef dit artikel samen met Femke Nales

Voor Kroesewevers.nl gingen we aan de slag met een nieuw design, een nieuw cms en we (her)schreven bijna alle content. We voorzagen dat het een gigantische klus zou worden (en dat werd het). We namen ons voor het project niet nog groter te maken dan het al was (dat lukte aardig). En natuurlijk moest alles binnen het daarvoor gestelde tijdspad (dat bleek een uitdaging). Dit leerden we ervan.

Tip 1: Maak een projectplan (en houd je daar aan)

Wie kent ze niet, de gedoemde websiteprojecten waarin zo’n beetje alles mis gaat wat er maar mis kan gaan? Het project kost meer tijd dan je dacht en vooral meer geld dan je vooraf dacht. En de mensen die beloofden dat alles goed zou komen, hadden zelf ook niet verwacht dat het net even anders zou lopen. De vele anekdotes en slechte voorbeelden zetten ons op scherp voor we begonnen aan de nieuwe site.

We staken daarom veel tijd en energie in het maken van een solide projectplan. We hadden natuurlijk al een bestaande website, maar we vonden dat geen reden om te veronderstellen dat alles dan wel duidelijk is. We gingen weer terug naar de basis en stelden onszelf ook de voor de hand liggende vragen, zoals: wat zijn de doelen en doelgroepen van de site? Want door deze vragen op een ander moment te stellen (vijf jaar na het vorige redesign), krijg je ook andere antwoorden. Waar moet je aan denken bij het maken van zo’n projectplan? Wij namen de volgende zaken op:

• Een duidelijke beschrijving van de doelen van de nieuwe website.
• De doelgroepen die de nieuwe website moet bedienen.
• De uitgangspunten voor de ‘look and feel’ waaraan de nieuwe site moet voldoen.
• Een plan van aanpak voor het maken van content (tekst, beeld/video en fotografie).
• Het projectteam: maak duidelijk wie binnen het team welke verantwoordelijkheid heeft. Zorg dat één iemand eindverantwoordelijk is voor het gehele project.
• Overige betrokkenen. Breng in kaart welke andere mensen nodig zijn of betrokken moeten worden bij het project, zowel intern als extern.
• Een beschrijving van de werkwijze en processen én een planning voor het team. Zo weet iedereen wat er moet gebeuren, wanneer dat moet gebeuren en wie er verantwoordelijk is.
• Een beschrijving van de uitgangspunten, wensen en functionaliteiten die op de nieuwe site aanwezig moeten zijn.
• Een voorlopige planning.
• Een budget/begroting waarmee de doelen gerealiseerd kunnen worden.

Tip 2: Betrek verschillende collega’s en afdelingen

Bij het maken van een nieuwe site, presenteer je het werk van al je collega’s en alle afdelingen. Praat daarom niet alleen over techniek of over inhoud. Achter alle producten en diensten op je website zitten mensen, dat zijn gedreven en betrokken professionals die graag willen bijdragen aan een goed eindresultaat. Maak daar gebruik van. Wij deden dat bij KroeseWevers door een werkgroep samen te stellen van verschillende collega’s en afdelingen. Met deze werkgroep hebben we de inhoud van de website vormgegeven en nagedacht over belangrijke dingen op de site, zoals de menustructuur, teksten en fotografie. Om mensen betrokken te houden in zo’n groot project pakten we alles gefaseerd op in de werkgroep.

Tip 3: Je website wordt zo goed als je team

Het maken van een nieuwe website vraagt in verschillende stadia om verschillende vaardigheden en competenties. Een goed team is onmisbaar om te zorgen dat alles goed loopt, maar ook om snel te kunnen improviseren als er onverwachte uitdagingen zijn (en die zijn er altijd). In een goed team mogen de volgende mensen niet ontbreken:

• Een ervaren projectmanager: iemand die een brug kan slaan tussen verschillende disciplines en draagvlak en mandaat heeft binnen de organisatie, zodat hij of zij op alle niveaus kan zorgen dat de zaken rondom de nieuwe website geregeld worden.
• Een tekstschrijver die op strategisch en inhoudelijk niveau kan bijdragen en ervaring heeft met het maken van webteksten.
• Vertalers. Vanwege onze internationale dienstverlening moesten de nieuwe teksten ook vertaald worden in het Duits en Engels.
• Een fotograaf die professionele en kwalitatief hoogwaardige foto’s maakt, omdat de uiteindelijke look and feel van je nieuwe site staat of valt met de kwaliteit van de fotografie.
• 3D-designers, digital designers en conceptueel denkers. De ontwerpen moeten niet alleen mooi zijn, het moet passen bij je merk en vooral functioneel zijn voor de gebruikers van de website.
• Vullers, testers en reviewers. Als het gemaakt is, zijn er collega’s nodig die zorgen dat alles wat gemaakt is ook daadwerkelijk online komt te staan. We hebben ook heel bewust de testers en reviewers een rol gegeven. Klik rond, kijk, review, en geef je feedback, zodat we steeds snel en doorlopend konden bijsturen en verbeteren.

Tip 4: Maak werk van je contentmigratieplan

Wat goed is moet je behouden, dat is altijd ons uitgangspunt geweest. Maar het goede behouden, ook dat gaat niet vanzelf.

Het goede behouden gaat niet vanzelf

De bestaande website telde honderden pagina’s die (gedeeltelijk) gemigreerd moesten worden. En om het nog complexer te maken: we werkten met een verouderd, speciaal voor ons gebouwd, content-managementsysteem (cms). En uiteraard sloot dit maatwerk-cms niet aan op ons nieuwe systeem. Vergelijk het maar met een verhuizing: wat in je oude huis staat past niet in je nieuwe huis of je wilt het liever niet meer in (de huidige vorm) in je nieuwe huis hebben. En wellicht wil je nieuwe dingen in je huis. Om goed in kaart te brengen welke content er was, moest worden gemaakt, en wat automatisch gemigreerd en handmatig moest worden geplaatst, maakten we in Excel een contentoverzicht. Hierin hielden we hoofdzakelijk de volgende indeling aan:

• Te behouden content, te ontwikkelen content en te verwijderen content (tip 5)
• Titel van de pagina
• Huidige url
• De url die de pagina krijgt op de nieuwe website
• Als een pagina vervalt naar welke url geredirect moet worden
• Link naar de (nieuwe) content
• Contactpersonen die bij de pagina horen
• Of de pagina handmatig overgezet moest worden of geautomatiseerd en door wie

Op basis van deze lijst stemden we met de websitebouwer af om ook de automatisch te migreren content goed te coördineren. Nadat de bouwer deze content had overgezet, checkten we met een steekproef of de geautomatiseerde migratie geslaagd was. Gelukkig was de migratie goed voorbereid, waardoor deze ook goed verliep.

Tip 5: Goed moment voor een content clean-up

Websites hebben de neiging om in de loop der jaren flink uit te dijen. Nieuwe diensten en producten die binnen KroeseWevers het levenslicht zagen, kregen allemaal hun eigen (landings)pagina’s. En er was een wildgroei ontstaan aan diverse pagina’s zoals blogs, cases, whitepapers en nieuwsberichten. Bij de inventarisatie van de content op onze site concludeerden we dat we niet stil hebben gezeten: we hebben de afgelopen vijf jaar ontzettend veel nieuwe content gepubliceerd. Maar we zagen ook dat veel content niet of nauwelijks werd gelezen.

Daarom grepen we de nieuwe site ook aan als hét moment voor een grote schoonmaak. Bij deze content clean-up schoonden we alles op door hoofdzakelijk de volgende regel toe te passen: alle content die in de afgelopen drie maanden door minder dan drie bezoekers is bezocht werd bekeken en beoordeeld. De content die we niet meer relevant vonden, haalden we vervolgens offline. Sommige content herschreven we. Je begrijpt dat dit voor de honderden pagina’s die de site telt, een enorme klus is. En we zijn er nog niet. De clean-up blijft onze aandacht vragen en het blijft een uitdaging om alle content nu en de komende jaren up to date en relevant te houden.

Tip 6: Behoud je SEO-waarden met goede redirects

Om het goede te behouden van onze bestaande website, keken we ook naar de SEO-waarden van onze site/webpagina`s. Om die SEO-waarden te behouden, maakten we op basis van het contentmigratieplan een redirect-plan. In dit redirect-plan zijn alle url’s gebundeld in één overzicht waardoor er een duidelijk beeld ontstaat van de redirects en de pagina’s waarvan de url veranderd is of veranderd moet worden. Door de juiste redirect in te stellen, belanden bezoekers op de juiste pagina’s met behoud van SEO-waarden. Nu de site live is, houden we goed in de gaten of de juiste url’s geïndexeerd zijn en posities behouden worden.

Tip 7: Geen tijd en energie verliezen met feedback

Voor de nieuwe site reviewden we niet alleen de designs. Ook de nieuwe of herschreven webteksten moesten worden voorgelegd aan de betrokken collega’s en teams. Het vragen van feedback op tekst kan een moeizaam en tijdrovend proces zijn.

Het vragen van feedback op tekst kan een moeizaam en tijdrovend proces zijn

Om te voorkomen dat we in deze valkuil zouden belanden, dachten we na over een manier om het reviewen van de teksten snel en gestroomlijnd te laten verlopen. We deden dat door heldere reviewkaders vast te stellen en iedereen dezelfde feedbackvragen voor te leggen. Daarvoor gebruikten we onderstaande mail:

Beste [naam],

Bedankt voor je medewerking aan de realisatie van de websiteteksten voor dienst x. Bijgevoegd de conceptteksten ten behoeve van de nieuwe website. Zoals besproken hebben we bij het schrijven van de teksten de volgende uitgangspunten genomen:

1) We hebben geprobeerd om op hoofdlijnen voor ‘de ondernemer’ te schrijven met weinig tijd, waarbij we een minimaal aantal woorden van 500 en een maximaal aantal woorden van 750 per pagina hebben gehanteerd

2) Daarbij hebben we gefocust op ‘what’s in it for me (de klant)?’

3) We hebben naar de klant toegeschreven en zijn heel bewust bij vakjargon weggebleven

4) We hebben rekening gehouden met de doelen van de website (gebruiksvriendelijk, doelgericht en ‘verder helpend’)

5) We hebben behouden wat behouden kon worden en het overige herschreven, geschrapt of aangevuld

Willen jullie deze teksten op inhoud reviewen?

Ik ontvang graag je feedback verwerkt in de documenten. Eventueel kunnen we telefonisch afstemming hebben over de teksten en je feedback hierop, mocht dit handig zijn.

Na ontvangst van je feedback verwerken wij deze, waarna je de definitieve versies ontvangt.

Met vriendelijke groet,

[Naam collega]

Tip 8: Ga ontwerpen in design sprints

We wilden dat onze nieuwe site weer ‘van deze tijd’ zou zijn, zowel in functionaliteit, gebruiksvriendelijkheid als in uitstraling. Als look and feel gaven we in de eerste briefings het volgende mee: “Clean en zakelijk, met een persoonlijke touch. In lijn met de huisstijl en merkidentiteit van KroeseWevers, zoals vastgelegd in het huisstijlhandboek.”

De slag maken van drie woorden in een briefing op papier naar definitieve ontwerpen is niet iets wat je in een middag klaarspeelt. Een design sprint is dan een hele prettige en effectieve manier om tot (nieuwe) designs te komen. Het vraagt focus, het brengt vaart in het proces en alle betrokkenen werken met elkaar samen. Dat maakt het een stuk efficiënter en je geeft direct feedback op elkaars werk en ideeën. Wij waren ontzettend blij met onze designers en het resultaat dat ze neer hebben gezet. Uitdaging was wel om het beste van twee werelden samen te brengen, onze merkindeniteit en hun designs geoptimaliseerd voor onze doelgroepen, dat kostte wat tijd. Maar dat was het resultaat uiteindelijk meer dan waard.

Tip 10: Maak alles direct AVG-proof

Eén van de doelen voor onze nieuwe website is dat deze AVG-proof moet zijn. Daarvoor defineerden we onder andere de volgende uitgangspunten:

• Private hosting;
• Juiste werking/integratie van relevante cookies (check cookiebeleid);
• Een maand na de sluitingsdatum van een evenement willen we (marketing en automatisering) een melding krijgen dat alle gegevens verwijderd kunnen worden als dit nog niet gebeurd is;
• Gebruikersgegevens mogen niet langer dan noodzakelijk opgeslagen worden in het CMS;
• We willen een actief patchabonnement. Als er een update uitkomt voor Craft/plug-ins/modules die gebruikt worden voor de website, moet de patch binnen afzienbare tijd (bijvoorbeeld een maand) worden gerealiseerd. We willen graag van updates op de hoogte gesteld worden per mail.
• Installatie extended SSL-certificaat.
• Gebruik van veilige wachtwoorden en testdata.

Tip 9: Gebruik tools voor betere samenwerking

Designs heen en weer mailen? Liever niet. We gebruikten de online tool Invision. Deze tool doet wat-ie belooft: het vergemakkelijkte de samenwerking omdat wij de status van het designproces makkelijk konden volgen.

Designs heen en weer mailen? Liever niet

We konden hierin gericht feedback geven in de vorm van comments. Nadat de feedback is ingevoerd, kregen alle betrokkenen van een bepaald item een notificatie via een e-mail. Zo bleef iedereen op de hoogte indien er wijzigingen en feedback werden doorgevoerd. Alle documentatie was vervolgens op één locatie terug te vinden. Onze samenwerkingspartner BERT werkte tijdens de bouw van de website ook met een handige tool, genaamd BugHerd. Hierin konden we alle feedback op de juiste plek op paginaniveau (voor- en achterkant) invoeren. BugHerd is een visuele feedbacktool voor websites en werkt net als Invision voor het geven van feedback, het verwerken van feedback en het volgen van de reacties. Bij het reviewen is het overigens aan te raden om de designs naast het opgeleverde werk te leggen, zodat je kunt checken of de designs goed doorgevoerd zijn.

Tip 10: Maak het project niet groter

Als je aan de slag gaat met een website van onze omvang, kom je altijd dingen tegen die je ook wel graag zou willen aanpakken en verbeteren in het kader van ‘nu we toch bezig zijn’. Maar al deze verbeterpunten en soms geweldige ideeën vallen buiten de scope van het project. We lieten ze daarom ook buiten het huidige project, omdat we ons realiseerden dat dit een valkuil is van grote websiteprojecten. En de reden dat sites vaak veel duurder worden dan vooraf begroot en ook nog eens veel later worden opgeleverd dan gepland.

Tip 11: Wees flexibel in je planning

De planning bleek, ondanks dat we hier scherp op waren, ook in ons project niet haalbaar.

De planning bleek ook in ons project niet haalbaar

De eerste gesprekken intern over de nieuwe website voerden we in mei 2019. De livegang stond in de eerste versie van het projectplan gepland voor eind 2019. We besloten uiteindelijk om de livegang drie maanden later te laten plaatsvinden. Zeker in dit proces waar veel tijd en geld mee gemoeid is, wilden we niet per se snel zijn, we wilden vooral dat het eindresultaat goed was. Door flexibel te zijn in de planning hebben we geen onnodige druk hoeven leggen op de collega’s en samenwerkingspartners. De extra tijd hebben we gebruikt om ook de laatste puntjes op de i te zetten en alles goed te testen voor de livegang.