Uitdaging

Een frontend thema bouwen in WordPress gebaseerd op alle data en koppelingen uit het Active Manager CMS. Een totale demo van alles wat het systeem biedt.

Het doel (In het kader van zelfredzaamheid als uitgangspunt van gemeenten en overheid)

Gebruikers die op basis van themas informatie willen vinden over een bepaald onderwerp
Daarbij passend aanbod van diensten en activiteiten vinden en filteren in hun omgeving
De aanbiedende organisaties bekijken en benaderen

Daarnaast moest het thema volledig aanpasbaar zijn qua kleuren en templates in een CHILD theme om andere frontends op te kunnen bouwen met afwijkende templates terwijl het hoofdthema aanpassingen doorgevoerd kreeg die dan ook in de childs geupdate konden worden.

Het probleem

De uitdaging is dat er heel veel data is en meerdere soorten eindgebruikers met verschillende doelen die we willen vatten in 1 allesomvattende frontend omgeving.

Mijn rol

Bedenker en product owner. UX/UI Design (lead)

Zie ook mijn Active Knowledge case study

Logo en naam

Dit project is ooit begonnen als DigiVerS een afkorting voor Digitaal Verwijs Systeem.

Ik heb een nieuwe passendere naam bedacht 'Verwijzer' en daarvoor de branding bepaald die aansluit bij de initiele branding van het grotere project 'Active Knowledge'. Het idee is een pijl die verwijst als beeldmerk en dat voor de 3 verschillende soorten content die we aanbieden:

Blauw = Aanbod van diensten
Paars = Informatie
Groen = Organisaties

Uiteindelijk hebben we gekozen om geen beeldmerk te gebruiken anders dan de pijlers en is het rood vervangen door Paars

Research voor werking

2 scenario's

In eerste instantie ben ik even uitgegaan van een burger die hulp zoekt via informatie. Bijvoorbeeld op een onderwerp 'overgewicht' en zo bij het aanbod in zijn buurt uitkomt. Bijvoorbeeld 'Fitness' > aangeboden door organisatie X
Het tweede scenario is een arts die de naam van een zorgverlener (organisatie) weet en een patient wil doorverwijzen. Via de organisaties komt hij bij het aanbod van deze organisaties uit en kan hij de patient doorverwijzen.

Touchpoints bepaald binnen de journey. Dit is uitgevoerd door een stagair die dit onder mijn begeleiding heeft gemaakt.

Het verder definieren van verschillende user journeys op basis van uitgangspunt van de zoektocht

De oplossing die we bedacht hebben is om naast een centrale zoekfunctie verschillende 'ingangen' te creëren met bijpassende 'landingspaginas' op basis van

Paars = informatie > aanbod > aanbieder
Blauw = aanbod > aanbieder
Groen = aanbieders > aanbod

Een eerste opzet waarbij het idee een carousel was. Hier de verschillende ingangen en variaties van de carousel.

Tests

Na enkele tests bleek dit toch te lastig te begrijpen en zijn we overgestapt op een andere variant waarmee we de eerste variant van het Thema hebben gebouwd.

Gebouwd in HTML5, Flexbox en Tailwind CSS in combinatie met Angular JS
Mobile first > Responsive
Aanpasbaar via Child themes
WCAG 2.0 gevalideerd

Enorm veel schermen in Adobe XD en natuurlijk een zeer uitgebreide style library

De high fidelity mockups zijn ook helemaal interactief gemaakt en ik denk dat als je hieronder ziet hoeveel koppelingen ik gelegd heb tussen de onderlinge schermen je begrijpt hoe complex dit was.

Een tweede versie

Afgestapt van de kleuren omdat dat moeilijk is om altijd 3 kleuren bij een huisstijl te verzinnen voor child thema's. Bovendien is dit een stuk rustiger. Thematische ingang voor informatie. Hieronder alle onderwerpen.

Hier een voorbeeld van aanbod bij een onderwerp

De landingspagina voor aanbod. Hier ook weer verschillende ingangen om bij het aanbod te komen. Op basis van diensten of evenementen en laatst toegevoegde. Zoekfunctie en directe filteroptie op bijvoorbeeld woongebied of positieve gezondheid pijler.

Iterate, Iterate, Iterate...

De detailpagina van een dienst of activiteit. Met koppeling naar de gekoppelde informatie, organisatie en professional en alle waarden uit het CMS indien ingevoerd. Niet zichtbaar indien niet ingevoerd. Op dit scherm zijn veel iteraties geweest en een hoop gebruikerstests om het rustig, overzichtelijk en goed en logisch responsive te krijgen.

De landingspagina voor aanbieders. Hier ook weer verschillende ingangen om bij de aanbieders te komen. Op basis van AZ index, werkzame specialisten en laatst toegevoegde. Zoekfunctie en directe filteroptie op bijvoorbeeld type organisatie.

Ik zou hier alle schermen kunnen laten zien maar ik kies ervoor dat niet te doen.

1 van de grootste uitdagen qua interactie en werking was de zoek/filterfunctie. We hebben ook hier veel variaties op gehad met AND en OR resultaten op basis van filteropties. Door veel te testen en te kijken naar sites als AIRBNB.nl en BOL.com hebben we de filter functie getweaked tot we tevreden waren met name ook over de snelheid en het 'altijd resultaat' vinden. Een lastige opgave.

Ook het weergeven op kaart was lastig, hoe geclusterd, welke zoom etc.

Voor een volledige online demo van dit thema:

https://demo.verwijzer.nl/

Variaties

Voorbeelden van uiteindelijke childthemas van bovenstaande variant in gebruik

Sociale kaart Den Haag

https://socialekaartdenhaag.nl/

Uiteindelijke versie

Sociale kaart Flevoland

https://socialekaartflevoland.nl/

Het logo creatie proces in de huisstijl van de gemeente Flevoland

Verschillende variaties homepage design

De uiteindelijke live versie

Thuis in wassenaar

Strategische sessie en verslag bij de gemeente Wassenaar

Impact

Het verwijzer thema is iets wat zich blijft doorontwikkelen terwijl ook de doorontwikkeling van functies en mogelijkheden van de backend Active Manager zich verder uitbreiden.

Active Knowledge richt zich op de meer dan 700 organisaties en 400.000 professionals bij gemeenten, GGD-en, ROS-en, medische-en beroepsverenigingen, ziekenhuizen en UMC’s in Nederland. Vanuit die basis richt Active Knowledge zich later ook op andere organisaties en sectoren in binnen-en buitenland.
Active Knowledge is ontwikkeld in samenwerking met gemeentes en kennisinstituten in de zorg. Niettemin is de software is domein en geografie agnostisch en gebouwd op robuuste en zeer schaalbare Microsoft technologie. Active Knowledge is in te zetten in alle kennisintensieve domeinen wereldwijd.
Active Knowledge is inmiddels bij vele organisaties geïmplementeerd en wordt door steeds meer professionals gebruikt. De gevalideerde informatie in Active Knowledge wordt dagelijks geraadpleegd door duizenden inwoners en professionals.

Case study: 'Verwijzer Demo' Wordpress theme