A UX Design Studio

Rijkswaterstaat

De eerste mobile-first,
responsive overheidssite

Een overheidswebsite gevuld met kilometers tekst en schitterende foto's die verstopt waren in een doolhof van saai vormgegeven pagina's. De opdracht aan ons was om de huidige rijkswaterstaat.nl alleen responsive te maken…, maar van oude wijn in nieuwe zakken stoppen worden wij natuurlijk niet echt blij.

Rijkswaterstaat op een tablet Rijkswaterstaat op een smartphone

Onze strategie

Waar begin je bij een website van zo’n formaat? Waar ga je de nadruk op leggen, wat is belangrijke informatie en waar liggen de behoefte van de bezoekers? Beginnen bij de kern: de content verbeteren en van daaruit naar buiten werken. De navigatie verbeteren zodat de bezoekers niet de weg kwijt raken in de zee van informatie. Veelvuldig testen met de gebruikers en uiteraard een vette presentatie neerzetten.

Teksten voor mensen

Onze ’Content First’ aanpak betekende eerst met de redactie zitten om het ontwikkelproces van teksten, fotografie en workflow te analyseren. Samen met customer journeys, onderzoek en nieuwe persona’s creëerden we een nieuw user centered concept voor de projecten en content van Rijkswaterstaat.

De vier persona's voor Rijkswaterstaat; weggebruiker, watergebruiker, omwonende en zakelijk.

Om deze informatie te achterhalen zijn er meerdere interviews gehouden met de verschillende soorten bezoekers. Samen met de customer journeys, het onderzoek en de nieuwe persona’s creëerden wij een nieuw user centered concept voor de projecten en content. Hierin wordt de nadruk gelegd op de basisvragen: wat is het en waarom, wanneer en hoe beïnvloedt dit mij?

Een nieuwe webstijl voor Rijksoverheid

Als één van de eerste overheidswebsites die responsive zou worden, hebben we afscheid genomen van de ‘vierkante-doos’ websitevormgeving die we allemaal kennen van de Nederlandse overheid. De huisstijl van de Rijksoverheid hebben we vertaald naar een digitale webstijl: modern, sober, doch gebalanceerd, met optimale presentaties voor kleine en grote schermen of je nu je vingers of je muis gebruikt.

Kleuren, typografie en elementen

Op rijkswaterstaat.nl wordt het lettertype Rijksoverheid Sans gebruikt. Een makkelijk te lezen lettertype met een grote x-hoogte, gemaakt door Peter Verheul in opdracht van Studio Dumbar. De Rijksoverheid Sans en Serif worden gebruikt voor alle overheidscommunicatie.

Geel, de Rijkswaterstaat huisstijlkleur, is gebruikt voor de navigatie en de belangrijkste actie knoppen. Koppen in de teksten maken gebruik van 'Royal Blue', de huisstijlkleur van de Rijksoverheid. Voor rijkswaterstaat.nl hebben wij een derde kleur geïntroduceerd: ‘Sky blue’. Een lekker felle blauw die tekstlinks en andere elementen er uit laat springen. De ideale tegenhanger voor het Rijkswaterstaat geel.

Code it, make it open source

Naast de informatie architectuur en het design was Eight Media ook verantwoordelijk voor de HTML, CSS en Javascript (de frontend code) van de Rijkswaterstaat website. Om de stijl van de website bij doorontwikkeling te waarborgen hebben wij een app gemaakt die op basis van onze code een styleguide creëert. De styleguide bevat alle elementen in code en de visuele output daarvan. Zo kunnen andere programmeurs en vormgevers makkelijk elementen hergebruiken. Deze styleguide generator hebben we open source gemaakt op GitHub.

Eight Media op GitHub

Validatie door de eindgebruiker

Om een gebruiksvriendelijke website neer te zetten zijn er gedurende het hele proces verschillende interacties en lay-outs getest. We zijn begonnen met grove, onuitgewerkte prototypes die we hebben getest in informele hallway-tests.

Vanuit deze tests zijn we omhoog gaan werken naar gedetailleerde HTML prototypes met echte data. Samen met usabilitybureau Valsplat hebben we scenario's geschreven en deze getest met de gebruikers van rijkswaterstaat.nl.

Het resultaat: een dijk van een presentatie

Inspiratie

De pagina opent met groot beeld en geeft context aan de vaak indrukwekkende projecten van Rijkswaterstaat.

Innovatieve navigatie

De structuur en aantal lagen van een grote website als rijkswaterstaat.nl zorgt voor een uitdaging. Door het combineren van het kruimelpad en submenu blijft de content primair en raak je de weg niet kwijt.

Toegankelijk

De code van de pagina is met toegankelijkheid als uitgangspunt gebouwd.

Performance

Op basis van de kwaliteit van je scherm wordt de juiste resolutie afbeelding binnen geladen. Daarnaast zijn er in de code optimalisaties uitgevoerd zodat de presentatiecode vliegensvlug is.

Hoofdnavigatie

We zetten 'mega dropdowns' in die 80% van de website (en de toptaken) snel toegankelijk maken.

Mini-infographics

Bovenin elke pagina wordt met een mini-infographic de kern van de pagina duidelijk.

Concept

Elk project volgt een simpel stramien: wat, waarom, hoe en wanneer?

Content presentatie

De redactie kan elk stukje content goed aanbieden. Lijsten met documenten, een call-to-action, een lijst met nieuwsberichten... elk stukje content verdient een goede presentatie.

menu-close

1. Hoofdnavigatie

We zetten 'mega dropdowns' in die 80% van de website (en de toptaken) snel toegankelijk maken.

2. Inspiratie

De pagina opent met groot beeld en geeft context aan de vaak indrukwekkende projecten van Rijkswaterstaat.

3. Mini-infographics

Bovenin elke pagina wordt met een mini-infographic de kern van de pagina duidelijk.

4. Innovatieve navigatie

De structuur en aantal lagen van een grote website als rijkswaterstaat.nl zorgt voor een uitdaging. Door het combineren van het kruimelpad en submenu blijft de content primair en raak je de weg niet kwijt.

5. Concept

Elk project volgt een simpel stramien: wat, waarom, hoe en wanneer?

6. Toegankelijk

De code van de pagina is met toegankelijkheid als uitgangspunt gebouwd.

7. Content presentatie

De redactie kan elk stukje content goed aanbieden. Lijsten met documenten, een call-to-action, een lijst met nieuwsberichten... elk stukje content verdient een goede presentatie.

8. Performance

Op basis van de kwaliteit van je scherm wordt de juiste resolutie afbeelding binnen geladen. Daarnaast zijn er in de code optimalisaties uitgevoerd zodat de presentatiecode vliegensvlug is.

Bekijk het resultaat nu live

Bezoek Rijkswaterstaat.nl