BLOG 2

Programma’s: Figma, Slack

Duur: Onbekend

Na een tijd struggelen heb ik het toch voor elkaar gekregen een blog in elkaar te zetten over KoPi. Ik moet zeggen, het is makkelijker uit te leggen in het gesproken woord, dan in het geschreven woord. Maar ik heb mijn best gedaan om het zo makkelijk mogelijk uit te leggen, ondanks dat het zo’n verschrikkelijk ingewikkeld project is.

KoPi (Kostprijsinstrument) is een tool gemaakt als onderdeel van het grote Create Care. Create Care maakt innovatie IT-oplossingen. Binnen Create Care vallen een aantal cases:

· KoPi

· Proforma

· IPvB

Daarnaast zijn er nog een aantal tools van externe partijen die onderdeel uitmaken van Create Care.

KoPi is een tool voor financiële controllers (doelgroep) die inzicht willen in de kostprijs van zorg, toegewezen op de Wlz functies. Een Wlz staat voor Wet langdurige zorg. Dat omvat onder andere persoonlijke verzorging, begeleiding en verpleging als vormen van zorg.

B1-K1-W1: Bespreekt de opdracht

B1-K1-W3: Oriënteert zich op de opdrachtgever/doelgroep/onderwerp

Ik kreeg voor het eerst te horen dat ik aan KoPi mocht werken toen ik nog bij SiW (Specialist in Websites) stage liep. Boven in de intro leg ik uit wat KoPi is. Menno Commandeur (de Product Owner) heeft mij dat uitgelegd tijdens het eerste gesprek op 10 maart over wat KoPi moest gaan worden. Want KoPi bestond al, het moest alleen verbeterd en vernieuwd worden. Makkelijker gezegd, dan gedaan met zo’n ingewikkelde tool natuurlijk. Hieronder een foto van mijn aantekeningen van het gesprek.

Grote kans dat je geen idee hebt wat er allemaal staat en wat het allemaal betekend. Dat is niet erg, het maakte voor mij wel dingen duidelijk door het op te schrijven. We kwamen er over uit dat de tool die er nu stond te onoverzichtelijk en moeilijk was voor de financiële controllers om de gegevens zelf in te vullen.

Het nieuwe redesign moest gemaakt worden op basis van feedback die Menno vanuit de doelgroep had ontvangen. Toen er een eerste werkende versie van KoPi live stond is hij met meerdere personen uit de doelgroep om tafel gaan zitten om samen met hun KoPi in te vullen. Dit vond plaats eind 2019 waarna Menno wat tijd had genomen om de verzamelde feedback te verwerken, te interpreteren en te documenteren. Dankzij deze gebruikerstest hebben wij veel data kunnen verzamelen voor verbeteringen. Hiermee ben ik aan de slag gegaan om KoPi 2.0 te ontwerpen.

Hieronder een aantal screenshots van hoe KoPi er eerst uitzag.

In deze zelfde meeting hebben we het gehad over hoe we een rode draad konden laten lopen door de tool, zodat het duidelijk is voor de controllers wat ze moesten invullen en doen. Daarnaast hebben we gekeken of er dingen waren die volledig weg mochten of aangepast terug moesten komen. Na deze bespreking gingen Melissa en ik gelijk zitten om wat stijlideeën te sparren. Omdat zij al bezig was met ProForma (een andere CC tool) bedachten we dat we de stijl het beste hetzelfde zouden kunnen doen om alles één geheel te houden. Daarna gingen we bij Melissa’s bureau zitten zodat ze mij alles kon laten zien over het designen in componenten. Wat anders is dan ontwerpen per pagina. Het designen in componenten laat je nadenken over alle onderdelen in een pagina. Zo is bijvoorbeeld een menu balk een component, waarbij een tabel een ander component kan zijn. Je kijkt dus eerst naar alle losse onderdelen tot in detail voor je naar het hele plaatje gaat kijken. Ik vond het een interessante manier van ontwerpen en heb ontdekt dat als je het op de juiste manier doet, dat een pagina sneller en makkelijker in elkaar te zetten is.

B1-K1-W2: Maakt een planning

Na het bespreken van de gehele opdracht ging ik aan de slag met het plannen al werd dat al snel lastig aangezien we te horen hadden gekregen dat we thuis moesten gaan werken. Ik was blij om te horen dat ik de spullen zoals mijn beeldscherm en toetsenbord mee kon nemen zodat ik achter twee schermen kon werken. Eenmaal thuis ging ik met Melissa in overleg over hoe en wat nu. We kwamen er over uit dat de deadline voor de eerste ontwerpen niet verplaatst zou moeten worden, het was goed te doen vanuit huis door te bellen met elkaar en met de mensen die het zouden ontwikkelen. De eerste ontwerpen moesten klaar zijn op 15 april zodat de developers nog eens naar de architectuur konden kijken en ik eventuele aanpassingen kon maken.

B1-K1-W4: Maakt een concept

B1-K1-W4: Maakt een ontwerp

B1-K2-W3: Maakt de media-uiting

Omdat Melissa voor Proforma een bepaalde styleguide aanhield nam ik die over. Zie hieronder:

Daarna ben ik gelijk aan de slag gegaan met het ontwerpen van de Wlz-functies/scenario's omdat dat in bijna iedere pagina terug zou komen en de menubalk overgenomen kon worden van ProForma.

Deze balk is ten alle tijden onderaan de pagina in KoPi zichtbaar. Hierin wordt constant de kostprijs per Wlz-functie weergegeven op basis van de ingevulde gegevens. Hoe meer gegevens de gebruiker gaat invullen, hoe gedetailleerder de kostprijs weergegeven kan worden. Deze kostprijs berekening is het belangrijkste onderdeel van de applicatie. Dit is waar het om draait: de uiteindelijke kostprijs per WLz-functie.

Deze afkortingen voor de WLz-functies weten de controllers uit hun hoofd maar hieronder een lijstje met de betekenissen:

· HVF - Huishoudelijke Verzorging - Facilitair

· HVZ - Huishoudelijke Verzorging - Zorg

· PV - Persoonlijke Verzorging

· VP - Verpleging

· BGI - Begeleiding Individueel

· BGGR - Begeleiding Groep

· BH - Behandeling

· VB - Verblijf

Zo ging ik verder met alle andere onderdelen in de pagina. Maar het is niet gewoon een kleurtje en vormpje plakken, ik moest nadenken over ieder mogelijk onderdeel. Zo heb ik een tabel ontworpen, maar die tabel moet een “zero-state” hebben, ik moest nadenken over wat er zou gebeuren als je bijvoorbeeld met je muis over een bepaalde term heen zou gaan. Ik was gewend om vooral naar de voorkant van een design te kijken, maar heb met deze opdracht geleerd om ook te kijken naar de achterkant, naar de dingen waar je normaal op een website niet zo veel bij stil staat tot je ze nodig hebt.

Omdat de styleguide er natuurlijk al was van ProForma was het voor mij belangrijk om alles overzichtelijk in elkaar te zetten, wat goed was omdat technisch leren ontwerpen een van mijn leerdoelen was.

KoPi is grotendeels verdeeld in twee categorieën, namelijk Personeelskosten en Materiële kosten. Maar hieronder alle functionaliteiten van KoPi:

PERSONEELSKOSTEN

De formatie in FTE per functie of opleidingsniveau wordt gecombineerd met de CAO, voor inzicht in de salariskosten. Verfijn de personeelskosten van bruto naar netto, door factoren zoals werkoverleg, pauzes en ziekteverzuim mee te wegen.

MATERIËLE KOSTEN

Maak een begroting van materiële kosten zoals ambulante dienst, energiekosten en medische middelen.

VERDELING INTRAMURAAL/EXTRAMURAAL

Geeft de balans aan tussen intra- en extramurale kosten. De applicatie helpt mee in het bepalen aan welke kostenplaats de kosten toegewezen moeten worden.

VERDELING TUSSEN ZORGTEAMS EN OVERHEAD

Personeelskosten worden verdeeld tussen de Handen-Aan-het-Bed (HAB) teams, verblijf en overhead. Zo kun je gerichter kosten toewijzen.

KOSTPRIJS PER WLZ FUNCTIE

De kostprijs per Wlz functie is altijd in beeld. Zo weet je precies welk effect het toewijzen van kosten heeft op de kostprijs binnen de Wlz. Daarnaast is inzichtelijk welke Wlz functies rendabel zijn binnen een ZZP-budget, op basis van de kostprijs.

SCENARIO’S

Werk met meerdere kostprijsscenario’s, om toekomstige mutaties in bijvoorbeeld personeelskosten of materiële kosten te simuleren.

In de nieuwe versie van KoPi is de “Grote kostprijsbeïnvloeders” functie weg. Je begon namelijk met een aantal (waarvan wij dachten) simpele stappen om vervolgens je kostprijs te verfijnen. Maar dat was te verwarrend voor de doelgroep en er kwamen te veel vragen over. Dus de stappen zijn nu verdeeld onder Personeelskosten en Materiële Kosten. Dus alles in KoPi is over de gehele app beter gegroepeerd waardoor het duidelijker is waar je wat moet invullen en/of doen. Daarnaast zijn de onderdelen meer in stappen verdeeld waardoor we de gebruiker door de applicatie meenemen en de gebruiker niet in een keer wordt overspoeld door informatie.

Verder ben ik nu bezig met de overzichtspagina(‘s). Het project van KoPi is nog lang niet af maar ik wil een goede structuur neerzetten voor de volgende persoon die het gaat oppakken, wat waarschijnlijk Melissa zal zijn. Voor de overzicht pagina’s hebben we besloten ze in tweeën te verdelen. Zo krijg je dan een “Mijn Kostprijs overzicht” en een “Begrotings overzicht”. Wat het ook weer gemakkelijker maakt om conclusies te trekken als ‘controller’. Zo hebben zij een verdeling tussen overzichten in uren en in bedragen.

De grootste vraag die we ons moesten stellen was: “Hoe tonen we de juiste informatie op de juiste momenten in de journey van de gebruiker.

Hieronder een aantal foto’s van het nieuwe KoPi:

B1-K1-W6: Presenteert het concept en/of ontwerp van de media-uiting

Omdat dit project nog steeds loopt heb ik iedere week een bespreking met ontwikkelaars en de product owner over mijn ontwerpen. Omdat ik werk in Figma kunnen we online alles testen. Tijdens deze besprekingen gaan developers door mijn ontwerpen heen om te kijken en te testen of er een goede flow in zit. In de comments kunnen ze dan ook gelijk hun vragen en feedback kwijt zodat ik die na de bespreking terug kan vinden en eventueel de feedback kan toepassen. Omdat we nu vanwege COVID-19 thuis zitten is het lastig om volledig te leren testen, maar ik snap wel wat het inhoud om te kunnen testen. Ik heb geleerd te observeren en notities te maken. Die notities maak ik in hetzelfde bestand. Ik zet in het rood tekst onder mijn ontwerp zodat ik weet wat ik daar moet aanpassen als ik zie dat iemand vast loopt of vragen heeft. (Klik om uit te vergroten)

Figma lijkt op een combinatie van Sketch en Adobe XD. Qua lay-out lijkt het meer op Sketch, maar het heeft de vereenvoudigde functies van Adobe XD, waardoor het in mijn ogen de ideale web design tool is geworden. Hieronder een paar screenshots.

B1-K2-W1: Bereidt de realisatie voor

B1-K2-W4: Levert de media-uiting op

B1-K2-W5: Houdt het (digitaal) archief bij

Om de realisatie voor te bereiden heb ik alles gewoon overzichtelijk in het bestand gezet. Alle widgets en iconen in een bestand zodat ze die snel kunnen vinden. Omdat zij in hetzelfde bestand kunnen kijken hoefde ik niks te exporteren of te versturen, wat enorm veel tijd scheelt. Daarnaast zet ik boven een groep schermen de titel van het onderdeel. Zo is in een oogopslag voor developers te zien wat ze waar kunnen vinden.

Omdat alles in Figma staat hoef ik nergens een archief bij te houden. Figma slaat automatisch alles op en je kan alles heel gestructureerd neerzetten waardoor alles in het bestand kan blijven je niet meer van alles overal op je computer hebt staan.

Het project loopt nog steeds maar ik heb al enorm veel geleerd. Ondanks dat het veel druk geeft omdat ik naast dit project ook andere opdrachten op mijn bord krijg, vind ik het super leuk om aan te werken. Vooral wetende dat mijn ontwerpen straks onderdeel zijn van een groter project die grote maatschappelijke invloed maakt op het gebied van zorg. Wie had gedacht dat design zo belangrijk kon zijn in iets zoals de zorg? Ik in ieder geval niet. Maar daar denk ik nu wel anders over. Door mijn designs maak ik het werk van anderen makkelijker en sneller, wat ervoor zorgt dat die mensen sneller meer mensen kunnen helpen.

Over mijn leerdoelen, een aantal leerdoelen waren wat lastiger te voltooien omdat ik mijn volledige tweede stage thuis doe. Ondanks die tegenslagen is het me toch gelukt alle leerdoelen te voltooien doormiddel van KoPi.

Bij mijn eerste leerdoel (K1) had ik geschreven dat ik graag technischer wilde leren ontwerpen. Dat is helemaal goed gekomen met KoPi. Door eerst te kijken naar functies en dan naar vormgeving heb ik geleerd dat het belangrijk is een balans te vinden tussen de twee. Het is leuk om dingen mooi en fleurig te maken maar het moet wel een doel hebben en niet mensen afleiden van de daadwerkelijke functies.

Voor mijn tweede leerdoel (K2) werd het iets lastiger. Collega’s hebben mijn ontwerpen getest en ik heb geobserveerd, maar ik kon helaas niet meer onderzoek doen in verschillende testlabs vanwege COVID-19. Ondanks dat denk ik dat ik veel geleerd heb op het gebied van testen maken en uitvoeren.

Er werden wel dingen getest met scripts maar dat was meer voor de developers om te kijken of er iets fout gaat in de code. Dat was wel enorm interessant om bij mee te kijken.

Als persoonlijk leerdoel wilde ik leren om feedback met beide handen aan te nemen en niet gelijk in de verdediging te gaan. Dat is wel gelukt. Zoals in de screenshots te zien is heb ik heel wat feedback elke keer en ik heb geleerd dat het belangrijk is alles langs te gaan. Tuurlijk is het goed als je staat voor je ontwerpen en vertrouwen hebt in je skills maar als iemand je corrigeert hoeft dat niet gelijk slecht te zijn. Die mensen willen vaak gewoon dat je leert van de fouten die jij maakt, maar ook van de fouten die zij vroeger gemaakt hebben.

Als laatste leerdoel had Melissa bedacht dat het goed zou zijn om te leren ontwerpen in componenten. Dit was in het begin wel even wennen. Maar ik denk dat ik dat nu duidelijk onder de knie heb. Daarbij moet ik zeggen dat nu ik dat kan, ik waarschijnlijk niet meer anders zou ontwerpen. Het ontwerpen in componenten maakt alles zo veel duidelijker en gemakkelijker.

Verder als er vragen zijn over KoPi, kan ik deze beter mondeling uitleggen. KoPi is een heel ingewikkeld project en daar moet je in groeien. Ik heb mijn best gedaan alles zo gemakkelijk mogelijk uit te leggen maar hoor het graag als er nog onduidelijkheden zijn.