Ontwikkeling

Aanleiding

Het doel is dat de productentool uiteindelijk gebruikt kan worden door Buro 3. Om dit doel te bereiken is het dus van belang dat het clickable prototype omgezet gaat worden naar een bruikbare tool. Dit proces is beschreven aan de hand van de tussenproducten en de onderzoeksresultaten van de gebruikerstesten.

Aanpak & resultaten

Allereerst heb ik verschillende tussenproducten van de tool over een aantal weken (sprints) verdeeld. Deze tussenproducten zijn kleine stapjes die uiteindelijk bijdragen aan het grotere geheel. Daarnaast zijn dit producten die individueel toegevoegd kunnen worden zonder dat de tool hierdoor stuk gaat.

Hieronder een overzicht van eerste tussenproducten verdeeld over de verschillende sprints. Elke sprint is hierbij één week.

Tijdens de ontwikkeling zijn er nog wel tussenproducten bijgekomen, veranderd, weggehaald of ze zijn verplaatst naar een andere sprint. Zo heeft het uitlezen van documenten en deze omzetten naar leesbare JSON langer geduurd dan verwacht, waardoor andere tussenproducten op zijn geschoven of kleinere tussenproducten eerder zijn gemaakt.

Bij Buro 3 wordt er elke ochtend een korte stand-up gedaan, waarin de taken worden gedeeld die iedereen gaat doen die dag. Daarnaast wordt er op maandag kort gereflecteerd op de belangrijkste taken van de week ervoor. Tijdens deze stand-ups heb ik mijn collega's op de hoogte gehouden van de vorderingen van de tool en de stappen die ik heb gezet. Ook heb ik in het productentool team veel updates gedeeld over interessante onderzoeksresultaten of het proces dat ik heb doorlopen.

Naast Scrum heb ik ook gebruik gemaakt van Git (Bitbucket) waarop alle ontwikkelingen van de productentool zijn bijgehouden. Iedere keer als er een tussenproducten of andere feature/aanpassing klaar was, is deze naar de Git gepusht. Hieronder is een deel van het overzicht te zien met alle ontwikkelingen.

Nadat alle punten uit de backlog verwerkt waren in de productentool, ben ik verder gegaan met alle punten die uit de gebruikerstesten zijn gekomen. Ik heb ervoor gekozen om deze direct in de tool te verwerken i.p.v. in een nieuwe versie van het clickable prototype, omdat ik hierdoor meer tijd had voor de ontwikkeling van de tool. 

Techniek

Voor de ontwikkeling van de productentool heb ik gebruik gemaakt van verschillende technieken. Allereerst wordt er gebruik gemaakt van WordPress als CMS. Er is voor WordPress gekozen, omdat Buro 3 altijd gebruik maakt van WordPress als CMS. Ook de marketeers binnen het team van Buro 3 weten hoe ze met dit CMS om moeten gaan. Daarnaast kwam er op die manier een extra uitdaging bij om Vue te integreren in WordPress zonder gebruik te maken van een headless CMS.

Er wordt gebruik gemaakt van eigengemaakte paginablokken die op meerdere pagina's terug kunnen komen en waarin content snel en gemakkelijk aangepast kan worden door een werknemer. Hierdoor scheelt het veel herhaaldelijke code en kunnen nieuwe pagina's makkelijk en snel worden aangemaakt.

Naast WordPress heb ik gebruik gemaakt van VueJS om bepaalde onderdelen van de tool dynamisch en interactief te maken. Omdat Vue niet op de normale manier in WordPress gebruikt kan worden, heb ik een omweg verzonnen waardoor ik wel gebruik kan maken van componenten. Enkelen componenten die herhaaldelijk terugkomen in de tool zijn bijvoorbeeld: de productkaart, de categorie label en de veelgestelde vragen. Hieronder is een code snippet te zien van het product component.

Je ziet in de bovenstaande snippet dat er voor de administrators extra buttons zijn toegevoegd om de productlink te kopiëren wanneer deze toegevoegd moet worden aan een offerte of factuur. Daarnaast is er een button om direct naar het Docs bestand te gaan waar het product gewijzigd kan worden én er is een button toegevoegd om de link van het product direct te mailen via Gmail. Het toevoegen van deze buttons moet het gebruik van de tool sneller en makkelijker maken voor de werknemers van Buro 3 en hen ook aansporen om meer gebruik te maken van de tool. 

Wanneer een gebruiker op de ‘Onze producten’ pagina zit, kan er gefilterd worden in categorieën en subcategorieën Ook krijgt de gebruiker directe feedback in de vorm van producten wanneer hij/zij gebruik maakt van de zoekbalk. Dit is allemaal ontwikkeld d.m.v. Vue en moet ervoor zorgen dat de gebruiker langer gebruik blijft maken van de tool. Doordat er directe feedback op acties van de gebruiker zit, blijven zij altijd bezig en is de nijging om de tool te verlaten minder.

Als laatste is er gebruik gemaakt van zowel de Google Drive als de Google Docs API. De Google Drive API wordt gebruikt om producten en toepassingsafbeeldingen op te halen uit de aangegeven map. Deze producten worden d.m.v. een cronjob elke nacht bijgewerkt en eventueel toegevoegd/verwijderd uit de tool. De afbeeldingen worden opgehaald op het moment dat een productkaart geladen wordt. Met de Google Docs API wordt de content van de productkaart opgehaald en omgeschreven naar een leesbare JSON. Deze content kan vervolgens gebruikt worden op de productdetail pagina. Wanneer de content in Google Docs aangepast wordt, is dit direct zichtbaar in de tool.

Voor beide API's heb ik PHP classes geschreven die automatisch de API key vernieuwen en waarmee producten opgehaald kunnen worden en vervolgens omgeschreven worden naar JSON's. Hieronder is een code snippet te zien van (een deel van) de functie die de content omschrijft naar een leesbare JSON.

Omdat je met de Google Docs API niet zomaar de afbeeldingen meegestuurd krijgt met een document, moeten ook deze via een andere weg opgehaald worden. Hiervoor heb ik een functie geschreven, waarmee d.m.v. de code van het document en het object de afbeelding opgehaald kan worden. Op dit moment wordt er elke keer een API call gedaan wanneer een gebruiker een product bekijkt. De snelheid van de tool gaat nog niet achteruit, maar wanneer blijkt dat de tool erg traag wordt zullen bijvoorbeeld afbeeldingen of het complete product opgeslagen worden in een database / XML bestanden. 

Resultaten gebruikerstesten

Hieronder worden enkele punten uit de gebruikerstesten behandeld en hoe dit is verwerkt in de tool. Via deze link is meer te lezen over de gebruikerstesten en de resultaten.

Doorklikmogelijkheden

Om de doorklikmogelijkheden te verbeteren zijn er een aantal ontwikkelingen geweest. Allereerst zijn de categorie labels van de producten klikbaar geworden, zodat de gebruikers direct naar de gewenste categorie met alle producten kunnen navigeren. Daarnaast is de categorie boven de producttitel op de productdetail pagina ook klikbaar geworden om naar die categorie te navigeren. Zie hieronder.

Als laatste moesten gebruikers erg ver scrollen om bij de gerelateerde producten te komen. Hiervoor is bovenaan de pagina een mogelijkheid toegevoegd om direct naar de gerelateerde producten te navigeren. Hieronder het voor en na.

Voordelen niet opvallend genoeg

Er werd tijdens de gebruikerstesten aangegeven dat de voordelen te veel op de rest van de onderdelen leken. Dit heb ik opgelost door de voordelen een blauwe achtergrond te geven, waardoor ze er meer uitspringen.

Contactmogelijkheden

Het is belangrijk dat er voor de gebruiker genoeg mogelijkheden zijn om contact op te nemen met Buro 3. Om deze ervaring nog beter te maken, wordt er de specifieke producteigenaar van de klant getoond als deze staat ingesteld. Is dit niet het geval, dan wordt de producteigenaar getoond en als deze niet staat ingesteld wordt het contactblokje van Peter getoond. Hieronder het resultaat.

Visuele aanpassingen

Naast alle resultaten uit de gebruikerstesten zijn er ook nog wat visuele punten genoemd tijdens de demo's of andere gespreksmomenten op kantoor. Zo was het nog niet helemaal duidelijk dat de productkaarten klikbaar waren en moest er visueel nog veel veranderd worden, zodat het aansloot bij de stijl van de huidige Buro 3 website. Hieronder zijn enkele visuele aanpassingen te vinden.

Eindresultaat

Het eindresultaat is te vinden via de onderstaande link. De tool is voor iedereen toegankelijk, om de drempel om de tool te gebruiken zo laag mogelijk te maken. Daarnaast kan een klant van Buro 3 wel inloggen om haar huidige producten te zien en later kan dit eventueel uitgebreid worden met een compleet kostenoverzicht of takenlijst. Inloggegevens voor de klantomgeving zijn op te vragen via mail of Teams.
 

Link naar de tool:
www.b3toolkit.nl

Hieronder nog een voorbeeld van de ‘Mijn producten’ pagina. Onderaan de pagina zijn ook nog aanbevolen producten zichtbaar, dit zijn producten die door de klanteigenaar worden aanbevolen aan de specifieke klant:

What's next

De eerste versie van de productentool is nu klaar en kan direct door Buro 3 gebruikt worden. De volgende stap is om alle testresultaten die niet in de productentool verwerkt zijn, te verwerken in het adviesdocument. Dit document kan vervolgens aan Buro 3 overhandigd worden, zodat zij deze punten kunnen verwerken in een volgende versie van de tool.