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.
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 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.
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
Meer informatie volgt z.s.m.
Informatie over het derde deelproject volgt z.s.m.
