UZ Leuven kiest voor nog meer gebruiksvriendelijkheid en toegankelijkheid

Operatie website: UZ Leuven is het eerste universitaire ziekenhuis in Vlaanderen met een website die strikt voldoet aan EU Richtlijn 2016/2102, de nieuwe Europese maatstaf voor Digitale Toegankelijkheid.

Heeft UZ Leuven nog een introductie nodig? Het grootste universitaire ziekenhuis van België heeft jaarlijks honderdduizenden opnames en consultaties. De website is dan ook haar heilige graal. Zowel patiënt als bezoeker moet snel de juiste informatie kunnen terugvinden. Dat betekent: nog meer eenvoud, toegankelijkheid én veiligheid. Aan de hand van onze accessibility checklist wilden we de meest vooraanstaande ziekenhuiswebsite van België bouwen. Excellente SEO-scores inbegrepen! Benieuwd hoe we dit aanpakten? Ontdek onze aanpak van a tot z. 

Van uitdagingen naar voortraject

Een goede voorbereiding is het halve werk, en van zo’n cliché maken wij graag werkelijkheid. Daarom namen we eerst de uitdagingen van het UZ Leuven project onder de loep, die verder in deze case ook terugkomen: 

  • Het ziekenhuis heeft een waaier van informatie en content over ziektes, behandelingen, diensten en afdelingen. En wij zouden alles op samenhangende wijze structureren en openstellen voor eindgebruikers. 

  • De huisstijl was te beperkt en flink verouderd. Wieni zou die nieuw leven inblazen met een design systeem en een digitale stijlgids. 

  • Van invulformulieren op de website tot persoonlijke patiëntendossiers en afspraken: privacy en security staan centraal. Ook daar wilden we gaan voor een compromisloze aanpak. 

  • Alle webpagina’s vereisen flexibiliteit over de volledige lijn. Wieni zou dat vertalen naar een wendbaar content management systeem. Meer specifiek: gemakkelijk beheerbare landingspagina’s. 

  • UZ Leuven zou het eerste Vlaamse ziekenhuis worden met een website die naadloos voldoet aan de nieuwe Europese maatstaf voor Digitale Toegankelijkheid. Aan ons om die accessibility standaarden voor de volle 100% te respecteren! 

  • De website moest twee aspecten belichten: het wetenschappelijk innovatieve karakter én extreme klantvriendelijkheid. Daar gaan we prat op. 

Samen met de communicatie- en technische teams van UZ Leuven schoten we begin 2019 uit de startblokken van het voortraject. De opzet? Alle bestaande web content en structuren op de huidige website grondig analyseren. Ook brachten we alle uitgevoerde oefeningen rond user research in kaart. 

Klaar voor kick-off?

Korte sprints, tweewekelijkse demo’s met UZ Leuven en dagelijkse interne stand-ups: dat waren de drie grote fundamenten voor een succesvolle samenwerking. Tijdens een uitgebreide analysefase zetten we, op basis van de huidige website, alle verwachtingen van UZ Leuven op een rij. Nadien ontwikkelden we een hele rits wireframes, die we meermaals aftoetsten met het ziekenhuis. Logisch, deze voorstellen zouden dé basis vormen voor het design en de technische analyse (de grootste die we ooit deden!). Dit referentiedocument bevatte alle informatie waarmee onze front-end en back-end ontwikkelaars de website konden bouwen. Ook dat overlegden we uitvoerig met onze klant. Zo wisten alle betrokken partijen wat we precies gingen ontwikkelen. 

"Wieni was transparant over de timings en volgde ze consistent op, zonder in te boeten aan flexibiliteit wanneer onze prioriteiten waren verschoven."

Ive Pauwels, digital product owner uzleuven.be
Onze technische kick-off meeting

Wireframing workshop met Wieni designteam & communicatieteam UZ Leuven

En toen was het tijd voor de kick-off! Samen met alle developers deelden we het project in volgens meerdere sprints. UZ Leuven volgde ons ontwikkelingsproces op de voet, en elke twee weken stelden we onze geboekte vooruitgang voor tijdens een demo. Uiterst efficiënt: zo kon het telkens verder met het invoeren van de desbetreffende content.   

Ecosysteembenadering dankzij component-based design

De website van UZ Leuven telt duizenden pagina’s over de verschillende diensten, behandelende artsen, behandelingen en ga zo maar door. Die konden we niet stuk voor stuk in wireframes gieten. Bovendien heeft elke afdeling haar eigen karakter en content, waar bezoekers vanuit allerlei bronnen belanden. Die willen haast in een oogopslag weten hoe en waar ze terechtkunnen. Daarbuiten moesten de webbeheerders van UZ Leuven de nodige flexibiliteit genieten om in de toekomst nieuwe pagina’s aan te maken. Dé oplossing? Component-based design! Daarbij vormen de verschillende componenten samen een groter geheel, zonder dat het een gedoe is om ze afzonderlijk aan te passen.

"Het Wieni team gaf ons perspectieven waar we zelf nog nooit aan hadden gedacht, en dat was een verademing."

Stijn Knapen, digital product owner uzleuven.be
Een helikopterbeeld van de uitgewerkte schermen in Sketch

Een helikopterbeeld van de uitgewerkte schermen in Sketch

Als ontwikkelaar van gebruiksvriendelijke websites en applicaties zijn we absoluut fan van deze flexibele ecosysteembenadering. Intern hebben we het wel vaker over onze voorliefde voor Sketch en zijn werking, en hoe die bijdraagt tot een consistent design. En zo ook de website. Kortom: component-based platformen bieden meer wendbaarheid, schaalbaarheid én duurzaamheid.    

Design van de herbruikbare componenten

De digitale stijlgids als basis van het design system

Volgens het credo ‘practice what you preach’ boksten we quasi alle pagina’s in elkaar met herbruikbare blokken. Zowel bij de wireframes als het design. De complexiteit en de hoeveelheid pagina’s waren dan wel een uitdaging, toch hebben we relatief snel veel schermen bij elkaar gepuzzeld. Mission (partially) accomplished!   

Accessibility voor een geïntegreerde aanpak

Het hele traject lang stonden de Web Content Accessibility Guidelines centraal. De website van UZ Leuven zou integraal voldoen aan de Europese verplichtingen voor Digitale Toegankelijkheid. Dus voerden we een WCAG Compliance Audit uit, met bijbehorende toegankelijkheidsverklaring. Patiënten met een beperking kunnen die raadplegen op de website. Elk stukje ontwikkeling stond in het teken van toegankelijkheid. Daarvoor genoten we extra ondersteuning van Roel Van Gils, gecertificeerd accessibility-expert. Resultaat? Ons team van UX-designers en front-end ontwikkelaars zag geen enkel detail over het hoofd. Dankzij deze geïntegreerde aanpak beantwoordden we aan alle wensen van de gebruikers, ongeacht hun eventuele beperkingen. 

Enkele opmerkingen tijdens de wireframes en designs in beeld

Enkele opmerkingen tijdens de wireframes en designs in beeld

Autofocus op het zoekveld?

Intern evalueerden we of we het invoerveld op de zoekpagina zouden voorzien van autofocus. Gebruikers die in het navigatiemenu klikken op ‘zoeken’, worden in dat geval naar de zoekpagina gebracht, met een focus op het zoekveld. In theorie is het gebruik van autofocus op een webpagina geen aanrader. Zeker omdat ze schermlezergebruikers meteen naar het met autofocus voorziene pagina-element zuigt. Toch pasten we de autofocus wél toe op de zoekfunctionaliteit. Waarom? Heel eenvoudig: het ‘zoeken’ naar informatie is het enige doel van deze pagina.   

"uzleuven.be blinkt niet alleen uit in gebruiksgemak, ook is ze vlot navigeerbaar voor bezoekers met een visuele of motorische beperking. Daarmee is UZ Leuven het eerste universitaire ziekenhuis in Vlaanderen met een website die strikt voldoet aan EU Richtlijn 2016/2102, de nieuwe Europese maatstaf voor Digitale Toegankelijkheid."

Roel Van Gils, accessibility expert bij Eleven Ways

Het ABC van CMS: flexibel, krachtig & onderhoudsvriendelijk

Toegegeven, het is een hele operatie om alle informatie rond een ziekenhuis en zijn stakeholders te vervatten in één platform. Om je een idee te geven: in totaal telt de UZ Leuven website maar liefst 8.000 actieve pagina’s! Er zijn afzonderlijke content types voor artsen, diensten en afdelingen, brochures, raadplegingen en evenementen. Ieder heeft zijn eigen functionaliteiten en klemtonen.   

Video: in slechts enkele kliks stel je in het Drupal CMS een dynamisch content overzicht samen

Daarom bouwden we een webplatform waarbij elke dienst zijn individuele landingspagina kan creëren. Telkens met een eigen navigatiemenu, vormgeving en URL-structuur. Handig: door het uitgebreide rollensysteem kan een beperkte groep alles aanmaken in het CMS en pagina's toekennen aan andere CMS-gebruikers. Deze laatste groep kan enkel pagina's aanpassen.  

Video: elke dienst kan in het CMS een eigen een A-Z lijst samenstellen van ziektes, behandelingen, artsen, etc...

De echte grote win? Die zit in ons modulaire en flexibele content management systeem. Pagina’s worden inhoudelijk gevuld dankzij content blokken. In één klik creëert UZ Leuven een webpagina die automatisch een alfabetische lijst van pakweg behandelingen genereert. Door middel van de extra opties in dit CMS kan de klant ook behandelingen tonen die gelinkt zijn aan een bepaalde ziekte of arts. Secties geven hem dan weer een overzicht van alle soorten content die in de website zijn verweven. Manueel of volledig automatisch met verschillende filtermogelijkheden. Structuur en onderhoudsvriendelijkheid: meer moet dat niet zijn. Maar minder evenzeer.   

Onze technische kick-off meeting

De kick-off meeting voor development: technische analyse en wireframes als basis

Integraties met bestaande infrastructuur & interactieve applicaties

Minstens zo belangrijk was de compatibiliteit van de website met de bestaande infrastructuur. Eerst en vooral omvat de site een reeks formulieren, welke UZ Leuven zelf kan aanmaken en beheren. Wordt er eentje verstuurd? Dan speelt het CMS ze automatisch door naar integratiepunten van het ziekenhuis. Zo hoeven we zelf geen persoonlijke data te bewaren, overeenstemmend met de GDPR. Voor zulke integraties hanteert Wieni dan ook het principe ‘separation of concerns’. Eenvoudiger gezegd: de koppelingen tussen onze eigen servers en die van UZ Leuven zijn niet van elkaar afhankelijk. Zo plaatsen we via Amazon SQS versleutelde inzendingen in een aparte queue. De systemen van UZ Leuven kunnen die op eigen tempo verwerken. 

"Wat een toffe samenwerking! We zijn zeer tevreden over het resultaat, en kunnen nu een nog betere online dienstverlening bieden."

Suzy Van Hoof, diensthoofd communicatie UZ Leuven

Een andere integratie is die met Mynexuzhealth. Vanuit dat platform kan UZ Leuven directe koppelingen maken naar de website. Die werken niet alleen voor een unieke bezoeker, ook hebben ze een tijdelijk karakter.

Tot slot besloten we met React enkele kleine applicaties in een nieuw jasje te steken. Denk aan een mini app om het BMI te berekenen, waarbij gebruikers met een slider ook het ideale gewicht voor hun lengte en leeftijd achterhalen. Ook is er de risicotest voor diabetes, die aangeeft in welke mate gebruikers risico lopen. Smaakt dat naar meer? Neem gerust een kijkje naar alle UZ Leuven applicaties: 

Of je kan ons natuurlijk gewoon een berichtje sturen als je ook nood hebt aan een gebruiksvriendelijke website op maat. Laat van je horen!