![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g d="M 0 0 L 16 0 M 0 6 L 16 6 M 0 12 L 16 12" fill="transparent" height="12px" id="tOoTk1b7B" transform="translate(4 6)" width="16px"><path d="M 0 0 L 16 0 M 0 6 L 16 6 M 0 12 L 16 12" fill="transparent" height="12px" id="dx3OnzCPD" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="rgb(105, 78, 59)" width="16px"/></g></svg>)
webdesign
webapp
redesign
responsive
uxresearch
figma
collaboration
Plansync
Herontwerp van een CRM- en plansysteem voor web en mobile.
Plansync: initiële vorm
Plansync is het interne systeem dat door de planners van GJ van Leeuwen B.V. wordt gebruikt om chauffeurs in te plannen op routes en om het klantenbestand te beheren. De planningen worden wekelijks gemaakt op een specifieke widescreen op kantoor. Plansync is speciaal hiervoor gebouwd, waardoor de content niet responsive is en op elk ander schermformaat onbruikbaar wordt.
Omdat ik geen toegang meer heb tot het oude systeem van Plansync, heb ik schermafbeeldingen moeten maken van beeldmateriaal: hierdoor is de kwaliteit helaas niet optimaal, maar het geeft wel een beeld van de initiële situatie. Klantgegevens zijn hierin bedekt.
Plansync zoals deze door de planners wordt gebruikt op een widescreen.
Plansync zoals deze eruitziet op een regulier desktop-formaat. Doordat de content niet responsive is, ontstaat er veel visuele overlap, waardoor de webapp onbruikbaar wordt.
Onderzoek
Voordat ik kan beginnen met het ontwerpen van verbeteringen voor Plansync, moet ik de webapp eerst goed begrijpen. Ook hoe dit in relatie staat tot het dagelijks leven van de gebruiker. Daarvoor duik ik eerst de onderzoekfase in.
Contextual Inquiry
Om de context waarin Plansync in het dagelijks leven wordt gebruikt te begrijpen, doe ik een Contextual Inquiry: ruwweg een combinatie tussen een observatie en een interview.
Lees meer
Benchmark: CRM
Gezien de wens om het herontwerp responsive te maken en bruikbaar op mobiel, orienteer ik me op hoe planfuncties en Customer Relationship Management-systemen (CRM) er op mobile uit zien door het uitvoeren van een Benchmark.
Lees meer
Contextual Inquiry
Een Contextual Inquiry is ruwweg een combinatie tussen een observatie en een interview. Door te observeren, zie ik hoe de gebruiker binnen de context de applicatie gebruikt. Door tussendoor door te vragen op mijn observaties, kom ik achter doelen en beweegredenen van zowel de applicatie als de gebruiker. De sleutelwoorden zijn hier: Waarom?, Waarom?, Waarom?. Aansluitend houd ik een interview met vragen die ik vooraf heb opgesteld. Dit zijn vragen die mij helpen de applicatie beter te begrijpen, zoals:
Wat is jouw favoriete functionaliteit en waarom? (Om een inkijkje te krijgen in het mentale model van de gebruiker.)
Welke functionaliteit gebruik je eigenlijk helemaal niet, en waarom? (Om frictie in kaart te brengen.)
Welke functionaliteit(en) mis je? (Om behoeften te achterhalen.)
De werkzaamheden van de planners worden uitgevoerd op een widescreen.
Resultaat
De ruwe data van de Contextual Inquiry (bestaande uit een beeldschermopname, geluidsopname, en aantekeningen) heb ik gesynthetiseerd naar een Affinity Wall. Dit geeft een overzichtelijk beeld van de ruwe data en en maakt het mogelijk om patronen te herkennen, wat belangrijk is voor het prioriteren van de volgende stappen. Deze stappen zijn verkozen aan de hand van hun urgentie, de relevantie voor het UX-vakgebied, en wat past binnen het beperkte tijdsframe.
Belangrijkste take-aways
Context: het ‘kantoor’ bevindt zich op de hooizolder van een schuur
Plansync is speciaal ontworpen voor een widescreen en alleen geschikt voor dit specifieke scherm
Flexibiliteit, logica en gebruiksvriendelijkheid ontbreekt
Next steps
De planningstool zodanig verbeteren dat plannen makkelijk en flexibel gaat
Het mogelijk maken om up-to-date afspraken in te zien en te wijzigen
Informatie op de juiste momenten toegankelijk maken
Plansync moet efficiënte ondersteuning bieden tijdens het werk
Door de Affinity Wall-methode worden patronen en kernbehoeften zichtbaar.
Benchmark: CRM
Gezien de wens om het herontwerp responsive te maken en bruikbaar op mobiel, orienteer ik me op hoe planfuncties en Customer Relationship Management-systemen (CRM) er op mobile uit zien door het uitvoeren van een Benchmark. De onderzochte applicaties zijn specifiek uitgekozen op mobiel gebruik om inspiratie op te doen voor het ontwerp op mobile.
Resultaat
Gecombineerd met de resultaten van de Contextual Inquiry, moet een planner aan het volgende voldoen…
Wat moet een planner kunnen:
Eenvoudig complexe planningen (volgorde, totale volumes, efficiënte routes) maken voor een hele week voor verschillende voertuigen
Een planningsitem eenvoudig aanpassen, met of zonder effect op herhaalplanningen
Overzicht van de planning van deze dag
Disclaimer
Vanwege de specifieke complexiteit van deze opdracht, ga ik bij het volgende onderdeel alleen globaal in op het herontwerp. Hierbij ligt de focus niet zozeer op interactie, maar op de gebruiksvriendelijkheid van dit ontwerp en welke keuzes er daarin zijn gemaakt. Tijdens een gesprek kan ik eventueel dieper ingaan op de interactiemogelijkheden.
Herontwerp: planner
Doordat de content niet responsive is, ontstaat er veel visuele overlap, waardoor de webapp onbruikbaar wordt.
De volgorde van de afspraak-kaartjes weergeeft (impliciet) de volgorde waarop een route gereden wordt.
Alle afspraken in het donkergrijze gedeelte zijn nog in te plannen afspraken. Afspraken die bij een chauffeur staan, zijn ingepland.
De ruimte in elk celblok is minimaal, waardoor deze planner lastig te gebruiken is.
Er zijn veel ongeschreven 'regels' om het systeem te gebruiken, veel informatie zit allemaal 'in het hoofd' van de huidige gebruikers. Hierdoor wordt het begrijpen van dit systeem voor een nieuwe gebruiker een haast onmogelijke taak.
Initiële ontwerp planner.
De nummering van de afspraak-kaartjes weergeeft volgorde: dit communiceert dat deze afspraken op deze volgorde gereden worden.
De oningeplande weekafspraken staan in de linkerkolom. Hier is de mogelijkheid om te filteren op bijvoorbeeld regio, dag, of mestsoort. Dit maakt het vinden van het type afspraak en het inplannen van de geschikte volgorde van een route gemakkelijker.
De ruimte in elk celblok is vergroot, waardoor de elementen in elk blok meer zichtbaarheid krijgen. De hele week is niet in één oogopslag zichtbaar, zodat de weergeven content overzichtelijk blijft. De afgebroken dagen kunnen worden bereikt door horizontaal te scrollen.
Afspraken worden niet langer ingepland op chauffeur, maar op voertuig. Dit is omdat een voertuig een maximaal volume heeft en kan uitvallen vanwege pech of onderhoud. Welke chauffeur dit voertuig rijdt, is in het uitklapmenu onder het kenteken van het voertuig te kiezen.
Herontwerp planner.
Herontwerp: CRM-systeem
Dit ontwerp is opgesplitst in twee kolommen: links de persoonlijke gegevens van de contactpersoon, rechts 'extra informatie'. Deze tweedeling schept verwarring en het geheel oogt rommelig.
Sommige informatie is niet logisch of praktisch gegroepeerd of georganiseerd, zoals specifieke informatie die belangrijk is voor het inplannen van een route per adres.
Persoonsgegevens en bedrijfsgegevens zijn op een logische manier van elkaar gescheiden.
Het is nu mogelijk om per adres specifieke gegevens in te voeren, zoals of het een los- of laadadres is, om welke mestsoort het gaat, et cetera. Dit maakt de gegevens nauwkeuriger en daarmee het inplannen van afspraken makkelijker.
Usability Test
Om te testen of het herontwerp aansluiten bij de doelgroep, voer ik een Usability Test uit. Hiermee test ik de interactieflows op hun gebruiksvriendelijkheid en hoop ik verbeterpunten te ontrafelen. Voor deze test heb ik de 4 belangrijkste interacties met betrekking tot 'contactpersonen' uitgewerkt. Dit komt omdat de planningstool ten tijde van deze test nog geen nieuw ontwerp had.
1
Adres toevoegen
Wie: planners
Device: desktop
Taakscenario:
Yvonne Westen heeft een nieuwe plek doorgegeven waar voortaan gelost kan worden. Verwerk deze informatie in het systeem, zodat je de volgende keer meteen van deze plek gebruik kunt maken.
Interactie: nieuw adres toevoegen.
Interactie: nieuwe afspraak aanmaken.
Afspraak aanmaken
Wie: planners en chauffeurs
Device: mobile
2
Taakscenario:
Je hebt net geladen bij Jason. Jullie spreken af wanneer je de volgende keer weer langskomt. Voordat je verder rijdt, wil je deze informatie graag in het systeem zetten. Laat zien hoe je dat zou doen.
Afspraak verwijderen
Wie: planners
Device: desktop
Taakscenario:
Leslie Alexander belt net dat 19 november 2024 toch niet goed voor hem uitkomt. Laat zien wat je zou doen met deze afspraak.
3
Interactie: bestaande afspraak verwijderen.
Interactie: nieuwe afspraak aanmaken.
Notitie toevoegen
Wie: planners
Device: mobile
Taakscenario:
Je hebt een goed eerste gesprek gehad met Chantal Sluis en dit wil je graag ergens kwijt zodat je het niet vergeet. Laat zien hoe en waar je dat zou doen.
4
Onderzoek
Voor het uitvoeren van de test, onderzoek ik hoe ik de Usability Test goed kan voorbereiden en faciliteren.
Een goede Usability Test bestaat uit:
Een doordachte voorbereiding met realistische taakscenario's en een testscript
Facilitatie waarbij de gebruiker niet wordt gestuurd
Een technische opzet voor zowel desktop als mobiele tests, zodat opnamemateriaal (en daarmee testresultaten) niet verloren gaan
Tijdens het uitvoeren van een Usability Test houd ik rekening met:
Een goede introductie waarin wat de test inhoudt en wat er van de gebruiker wordt verwacht, duidelijk wordt gecommuniceerd
Geen antwoord geven op vragen die de gebruiker stelt over de interface, maar juist vragen wat hij verwacht te zien
Observeren van de gebruiker en notities maken
Het gevaar van één testparticipant
Wegens beperkte tijd en middelen ben ik enkel in staat om met één participant te testen. Volgens NNgroup (2018) is voor het ophalen van objectieve resultaten het aanbevolen aantal 5. Het gevaar van testen met één persoon is dat er geen gemiddelde kan worden vastgesteld voor zijn gedrag. Zolang hiermee rekening wordt gehouden in de resultaten, bijvoorbeeld door niet blind te vertrouwen op zijn gewoontes (die de huidige Plansync weerspiegelen) maar uit te gaan van conventies en patronen, kunnen we Plansync verbeteren. (What Is Idiosyncratic Behavior?, z.d.))
De test
Onderstaand de opstelling tijdens de Usability Test. De ruwe data die ik verzamel, bestaat uit aantekeningen, schermvideo’s en geluidsopnamen. Deze data zet ik om naar concrete actiepunten geprioriteerd middels de MoSCoW-methode, zodat we deze taken direct kunnen gaan afvinken.
De opstelling van de Usability Test.
De uitkomsten van de Usability Test geprioriteerd met de MoSCoW-methode, waardoor de data is georganiseerd op urgentie.
Belangrijkste take-aways
Het herontwerp is een flinke verbetering ten opzichte van het initiële ontwerp
Bepaalde details moeten nog worden geoptimaliseerd voor een gestroomlijnd dagelijks gebruik.
Voorbeeld: Het toevoegen van een adres moet ook mogelijk zijn via coördinaten: zo kunnen plekken die Google Maps niet kent, zoals een weiland, toch worden toegevoegd
Next steps
De MoSCoW-methode als Requirements List behandelen: eerst de Must Haves en dan de Should Haves uitwerken in het prototype
Wanneer tijd en ruimte over, de Could Haves uitwerken in het prototype
Conclusie
De opdracht
De opdrachtgever, GJ van Leeuwen B.V., wilde een verbeterd herontwerp van het plan- en CRM-systeem dat zij gebruiken in hun dagelijkse werk. De initiële Plansync had weinig hiërarchie en structuur, was niet responsive en alleen geschikt voor hun specifieke widescreen, en had weinig oog voor gebruiksvriendelijkheid. Daarnaast had de opdrachtgever de wens om Plansync bruikbaar te maken op mobiel, zodat planners flexibeler kunnen inplannen en chauffeurs Plansync onderweg kunnen gebruiken, zodat alle werkzaamheden binnen één platform plaatsvinden.
Mijn rol hierbinnen was om Plansync te herontwerpen naar een gebruiksvriendelijke applicatie die te gebruiken is op zowel web als mobile en beter aansluit op de gebruikersbehoeften van zowel planners als chauffeurs.
Het proces
Onderzoek
Als ontwerper heb ik onderzoek gedaan om Plansync beter te begrijpen: wat voor platform het is, hoe het wordt gebruikt, en waar de pijnpunten en gebruikersbehoeften liggen. Dit door onder andere een Contextual Inquiry en een Benchmark te doen.
Ontwerp
Naar aanleiding van dit onderzoek definieerde ik 4 kerntaken die passen bij het dagelijkse werk van planners en chauffeurs, en herontwierp ik de planningstool en het CRM-systeem. Het herontwerp is bruikbaar op zowel mobiel als desktop, zoals gewenst, heeft een logische structuur en is gebruiksvriendelijker dan de initiële omgeving.
Het vervolg
Beperkte tijdperiode
Omdat ik deze opdracht uitvoerde tijdens mijn stageperiode bij Lemone, had ik een beperkte tijdframe om hieraan te werken. Tijdens het ontwerpproces kwamen er (onder andere vanuit de opdrachtgever) steeds nieuwe punten naar boven die ook toegevoegd dienden te worden, waardoor het project bleef groeien. Daarom heb ik het project niet 'af' gezien, maar ik kan concluderen dat ik een goede basis (op zijn minst een Minimum Viable Product) heb gelegd voor het herontwerp.
De terugblik
Opgedane skills
Deze opdracht was, in zijn specifieke context, complex en uitdagend. Dat heeft mij de volgende skills laten inzetten.
Meer showcases
Geraadpleegde bronnen
NNgroup. (2018, 16 november). Usability Testing w. 5 Users: ROI Criteria (video 2 of 3) [Video]. YouTube. https://www.youtube.com/watch?v=U23Bz5_eHII
What is idiosyncratic behavior? (z.d.). Quora. https://www.quora.com/What-is-idiosyncratic-behavior#:~:text=The%20Idiosyncratic%20Personality%20Type%20applies,Being%20original