UX-UI Design Waternet Amsterdam
Mr. Upside x
Waternet Amsterdam
Waternet had behoefte aan expertise aan ervaren UX-UI Design expertise binnen haar Online team, voor diverse projecten. Als Freelance (Senior) UX-UI Designer werkte ik eerder voor oa. KPN, Odido, O’Neill en Robeco en ben bekend met Agile/SCRUM, Design Systems, WCAG richtlijnen en werken in een ‘developer led’-team. Ik ben erg dankbaar om, uiteindelijk twee jaar lang, Waternet geholpen te hebben. Het opzetten van een Design System en een verdere verdieping van kennis van WCAG accessibility richtlijnen waren waardevolle ervaringen.
Communicatieadvies en -strategie
Art Direction
Webdesign - UX-UI Design
Grafisch ontwerp
Drie projecten
Naast allerlei kleinere projecten, zoals het redesign van de footer, is er vooral gewerkt aan drie grotere, langere en interne projecten:
Een vernieuwde website voor de Amsterdamse Waterleidingduinen (AWD)
Een verbeterd Werken Bij-gedeelte voor Waternet
Factuur-uitleg voor Waternet
Belangrijke componenten
Stakeholdermanagement
Bij alle projecten was intern stakeholdermanagement een belangrijk onderdeel, naast het werken met een Online team dat naast een Manager, Product Owner en Business Analyst bestond uit Front- en Backend Developers.
UI Visual Design
Naast de vomgeving van de interactie / UX Design (Flowcharts en Wireframes) was het doorvertalen van de Waternet huisstijl naar een passend UI (Visual) Design van de webpagina’s belangrijk. Om de merkherkenning niet teveel geweld aan te doen, is gekozen deze huisstijl strict te volgen.
Communicatieadvies
Design van een online toepassingen kan niet los worden gezien van communicatie. Er is een wens om een boodschap over te brengen die de doelgroep moet snappen. En van waaruit actie door de gebruiker moet worden ondernomen. Vanuit deze passie voor communicatie was communicatieadvies ook een belangrijk onderdeel.
Project 1 - 'Werken bij'-gedeelte
Behoefte en doel
De huidige arbeidsmarkt is uitdagend voor werkgevers. Waternet heeft daarom een sterke behoefte om meer en beter bij potentiële kandidaten onder de aandacht te komen. Daarnaast was het een wens dat geïnteresseerden makkelijker hun gegevens konden achterlaten.
Uitdagingen
Er waren drie belangrijke uitdagingen bij de start van het project:
Er werd vooral met een zendergerichte, in plaats van ontvangergerichte benadering gecommuniceerd; ‘Wij doen dit’ in plaats van ‘Hoe kunnen we jou helpen?’. Verder bleek de maatschappelijke component van een waterbedrijf onderbelicht.
De visuele uitstraling van Waternet in haar online toepassingen was uiterst functioneel. Er werd met weinig emotie, weinig inspiratie en weinig menselijk beeld gecommuniceerd. Employer Branding werd niet of nauwelijks ontwikkeld.
De oude ‘Werken bij’-pagina’s toonden vooral heel veel tegels en cards. Er werden veel verschillende keuzes geboden maar geen verhaal verteld.
Oplossingen
De oplossingen zijn goed samen te vatten in de volgende vier punten:
Ik bracht meer menselijkheid, emotie en inspiratie in met name meer beeldgebruik van mensen. Daarnaast liet ik Waternet collega’s beter en meer vertellen wat het voor hun betekent om bij Waternet te werken. Ook werd één contactpersoon per vakgebied geadviseerd.
Door beter inspirerende, meer ontspannen copy kregen we meer aandacht voor de visie van Waternet op werken in plaats van een functionele vacature omschrijving.
Door meer kleur, grafische elementen zoals iconen en meer creativiteit in het grid te gebruiken ontstond een minder zakelijke, meer empathische uitstraling die beter past bij een ‘Werken bij’-gedeelte waarbij mensen centraal staan.
Door meer ruimte voor arbeidsmarkt campagnes te reserveren kon een vacature in de nieuwe situatie meer ‘verkocht’ worden, in plaats van gedeeld.
Aanpak
Er werden door mij zes stappen geadviseerd, om van de ‘oude’ naar de nieuwe situatie te komen.
Stap 1 - Onderzoek naar wat er al is
Het wiel opnieuw uitvinden is niet handig. Daarom is onderzoek naar andere aanbieders van vacatures op online vacaturebanken en ‘Werken bij’-onderdelen van andere grotere organisaties gedaan. Met extra aandacht voor andere Nederlandse waterbedrijven omdat die met vergelijkbare uitdagingen in de arbeidsmarkt kampen.
Stap 2 - Mogelijke oplossingsrichtingen
Ik geloof in eerst denken, dan doen. Eén of meerdere oplossingsrichtingen dienden eerst te worden uitgedacht, voordat tijd zou worden verspild aan een ontwerp of zelfs development werd gestart.
Stap 3 - Uitwerken keuzes in UX Design
Na een keuze voor één of meerdere oplossingsrichtingen kon deze in een UX/UI ontwerp worden uitgewerkt en kon feedback bij een kleine groep beslissers en betrokkenen worden opgehaald. We hebben bewust ervoor gekozen om developers al in een vroeg stadium bij het project te betrekken, zodat hun feedback direct kon worden meegenomen.
Stap 4 - Definitief Visual Design
Wanneer de interactie en globale inhoud van de webpagina’s in Flowcharts, Sitemaps en Wireframes was vastgelegd werd dit UX Design in een UI (Visual) Design gecombineerd met de Waternet huisstijl.
Stap 5 - Development
Door de designs in Figma gestructureerd op te bouwen (Library en Design System) konden developers er snel mee aan de slag.
Stap 6 - Testen en live-gang
Tijdens het development proces is nauw contact gehouden met de developers en heb ik mijn bereikbaarheid maximaal gehouden, zodat kleine uitdagingen meteen konden worden opgelost. Dit ‘dicht op het vuur’-zitten helpt enorm om als team iets te ontwikkelen.
Resultaten van het onderzoek
Er kwamen drie belangrijke conclusies uit het onderzoek naar andere aanbieders van vergelijkbare content.
Waternet mocht meer inspireren
Andere aanbieders inspireerden meer. Aanpassing van de uiterst functionele uitstraling van de algemene Waternet-huisstijl konden we met dit project niet veranderen. Wél konden we op het Werkenbij-gedeelte onszelf iets meer vrijheid geven in vormgeving en copy, om meer een menselijke kant van Waternet naar voren te laten komen.
Van categorie-overzicht naar inspirerende cultuurhomepage
Wat opviel: andere waterbedrijven zien de Werkenbij-homepage veel meer dan slechts een categorie-overzicht van vacatures. De Waternet ‘Werken bij’-homepage mocht meer worden gebruikt om een kijkje in de keuken, in de specifieke en unieke Waternet cultuur te bieden.
Eigentijdse thema’s als duurzaamheid en ‘groen’ komen nauwelijks naar voren
Andere waterbedrijven geven, vanuit hun focus op natuur en duurzaamheid, ook meer aandacht aan dit onderwerp op hun Werken-bij gedeelte. Bij Waternet mocht dat veel duidelijker terugkomen.
Kan ik jou helpen?
Heb je vragen of wil je gewoon even van gedachten wisselen? Ik help je graag.
Laat mij, geheel vrijblijvend, met je meedenken. Ik ben sterk in analyseren, structureren, het scheiden van hoofd- en bijzaken en het verhelderen, vereenvoudigen van complexe zaken.
Neem contact op
Project 2 - Website Amsterdamse Waterleidingduinen (AWD)
Behoefte en doel
De website van het Amsterdamse Natuurgebied 'Amsterdamse Waterleidingduinen' viel organisatorisch onder de vlag van Waternet maar technisch was de website niet een volledig onderdeel van hun systemen. Toen er was besloten de website naar de systemen van Waternet over te zetten, werd ook een UX-redesign en een beter voldoen aan WCAG richtlijnen voorgesteld.
Het technisch nieuw bouwen van de website (vooral een webshop voor het verkopen van toegangsabonnementen, -kaarten en routebeschrijvingen) werd aangegrepen om ook op UX-UI Design vlak verbeteringen door te voeren. Waternet.nl kende nog geen shopfunctionaliteit dus heeft Team Online de shop van de grond af aan opnieuw opgebouwd.
Uitdagingen
Er waren een aantal uitdagingen met dit deelproject:
De verwachtingen vanuit de Waternet organisatie gingen uit van een 'as-is'-portering; de website zou qua UX en UI (Visual Design) niet of nauwelijks hoeven worden aangepast. Maar onderzoek bracht ook allerlei UX-UI Design verbeterpunten aan het licht. Dit botste met de strakke deadline die werd gesteld.
De UI moest passen binnen de uiterst functionele online huisstijl van Waternet.
Technisch en op WCAG vlak kwamen we onverwachte knelpunten tegen. De verschillende routekaarten bijvoorbeeld, bleken lastig binnen WCAG richtlijnen te brengen.
Oplossingen
De volgende oplossingen zijn gevonden:
Door goed met de stakeholders te blijven communiceren over de designkeuzes, konden verwachtingen goed worden bijgesteld en werd er bijvoorbeeld voldoende draagvlak gecreëerd voor verlenging van de deadline.
De uitstraling van de webpagina's konden we niet al teveel verbeteren. Maar door ook meteen interne design processen te verbeteren, zoals het opschonen en verbeteren van de Figma Library en bijvoorbeeld een Design System op te zetten, is er veel waarde toegevoegd voor toekomstige projecten.
Door wat vaker van de 'as-is'-strategie af te wijken en creatieve oplossingen te bedenken, hebben we grote stappen gemaakt op WCAG-vlak.
Resultaat
Het resultaat is bekijken op: https://awd.waternet.nl/.
Technisch
'Onder de moterkap' heeft de website flinke aanpassingen meegekregen en zijn oa. het CMS nu in lijn met wat Waternet zelf voor haar websites ook gebruikt. Binnen de mogelijkheden zijn er goede stappen gemaakt om beter te voldoen aan de WCAG richtlijnen.
Design
De vormgeving van de website wijkt nu minder af van de functionele Waternet huisstijl en er is beter nagedacht over User Journeys, flows en de algemene gebruikerservaring. Belangrijk onderdeel voor gebruikers blijft de webshop. Die is, binnen de huisstijl van Waternet, drastisch verbeterd qua UX en Visual Design.
Deelproject 3 - Factuuruitleg water
Uitdaging
Nieuwe klanten van Waternet krijgen soms bij hun allereerste factuur nog een fysieke flyer met uitleg over de informatie op de factuur. Een fysieke flyer lijkt achterhaald maar Waternet bedient een grote regio met klanten in alle leeftijden, ervaring met digitale middelen en met diverse achtergronden. Een fysieke flyer blijft daarom een geschikt communicatiemiddel om digitale communicatie aan te vullen.
Bestaande klanten, en vooral degenen die al wat langer klant zijn van Waternet, krijgen deze flyer en uitleg helemaal niet. Toch zijn er veel situaties denkbaar waar ze uitleg van hun factuur goed kunnen gebruiken.
Oplossing
Eén centrale plek voor de factuuruitleg is handig. Handig voor de gebruiker want er is maar één plek en handig voor Waternet omdat beheer van de informatie dan efficiënter kan. Daarom werd besloten de uitleg vooral op een centrale, digitale plek te plaatsen.
Aanpak
Net als bij de andere twee deelprojecten werd ook hiervoor een gefaseerde aanpak geadviseerd:
Stap 1 - Onderzoek naar wat er al is
Er is gekeken naar hoe 17 andere, grotere Nederlandse bedrijven zoals energieleveranciers, KPN en NS hun facturen uitleggen aan gebruikers en klanten.
Stap 2 - Mogelijke oplossingsrichtingen
Uit het onderzoek zijn in totaal 5 aanbevelingen gekomen:
Informatie is beter verdeeld in ‘hapklare brokken’, over meerdere pagina’s. Niet alles op één pagina maar hoofd- en bijzaken beter verdeeld.
Gebruikers moeten de informatie tekstueel en visueel tot zich kunnen nemen. Door meer en vaker beeld op te nemen, voorzien we een aanzienlijk deel van de doelgroep in hun specifieke behoefte.
Hoewel de informatie in lagen gestructureerd moet worden, dient het aantal lagen zo beperkt mogelijk te blijven. Dat kan bijvoorbeeld door vaker directe links naar informatie op te nemen.
De complexiteit van de factuuruitleg neemt toe naarmate er veel uitzonderingen en unieke scenario’s zijn. Meerdere soorten facturen bijvoorbeeld. Door de informatie allereerst voor de grootste groep gebruikers geschikt te maken, kunnen we de complexiteit beperken. Voor unieke situaties verwijzen we gebruikers naar een zo menselijk mogelijke klantenservice.
De factuuruitleg moet gemakkelijk beheerbaar zijn door Waternet. Als er wijzigingen komen moet dat op een goede manier gecommuniceerd kunnen worden naar gebruikers.
Stap 3 - Uitwerken keuzes in UX Design
De conclusies uit het onderzoek en de daaruit voortkomende oplossingsrichtingen zijn verwerkt in UX Aanbevelingen.
Zo is eerst gekeken naar de bredere context; de klantreis. Hoe komen gebruikers bij de Factuuruitleg? Daarna is ingezoomd op de Factuuruitleg zelf.
Zo was één van de aanbevelingen een gedeelde paginaopmaak; links een afbeelding en rechts toelichtingen van onderdelen. De afbeelding zou ook interactief gemaakt kunnen worden, waardoor alleen de door de gebruiker opgevraagde en daarmee relevante informatie hoeft te worden getoond.
Stap 4 - Definitief Visual Design
Na het UX-Design zijn er meerdere voorstellen gedaan voor het Visual Design. Waarbij goed rekening is gehouden met de functionele huisstijl van Waternet.
Stap 5 - Development
Door de designs in Figma gestructureerd op te bouwen (Library en Design System) konden developers er snel mee aan de slag.
Stap 6 - Testen en live-gang
Tijdens het development proces is nauw contact gehouden met de developers en heb ik mijn bereikbaarheid maximaal gehouden, zodat kleine uitdagingen meteen konden worden opgelost. Dit ‘dicht op het vuur’-zitten helpt enorm om als team iets te ontwikkelen.
