Rick van Gerwen

Semester 6

Papercut

Project 4: Futuris

Startfase:

In het vierde en tevens het laatste project van dit semester stond een samenwerking met Futuris op het programma. Tijdens deze opdracht luidde vanuit het bedrijf de volgende vraag:

“Hoe kunnen we met een digitaal hulpmiddel de begeleiding van de cliënten van Futuris ondersteunen, zodat de controle op en het uitvoeren van de alledaagse werkzaamheden wordt verbeterd?”

Samen met Ahmed, Nick, Ruben en Michelle ben ik met deze vraagstelling aan de slag gegaan om samen tot een concept te komen.

Lees hier de leeswijzer.

Oriëntatiefase:

Aangezien ik dit project ga werken voor de cliënten van Futuris dien ik rekening te houden met een speciale doelgroep, namelijk mensen met verschillende vormen van autisme. Om meer inzicht te krijgen in deze doelgroep koos ik ervoor om eerst onderzoek te gaan doen. Hierbij heb ik me vooral gefocust op autisme in het algemeen en daarnaast vooral de kenmerken van mensen met autisme. Dit heb ik bewust gedaan, doordat deze kenmerken nog wel eens belangrijk zouden kunnen zijn bij het bedenken van een concept. Uiteindelijke stuitte ik op het internet op de volgende lijst met kenmerken waarmee o.a. rekening mee gehouden dient te worden:

  • Moeilijke sociale interactie en communicatie.
  • Beperkte flexibiliteit in denken en handelen.
  • Moeite met het filteren en integreren van informatie.
Lees hier het gehele onderzoek. Plannr Logo Plannr

Conceptfase:

Cliënten bij Futuris stellen samen met de begeleiders om de zoveel weken doelen vast. De doelen kunnen variëren van alledaagse/ dagelijkse doelen zoals het leren van het inpakken van je tas. Maar een doel kan ook zijn dat een cliënt bijvoorbeeld opzoek moet naar een nieuwe woonruimte, wanneer hij aan het einde van zijn begeleiding is. Dit is dan weer een doel die eenmalig moet worden uitgevoerd over de lange termijn.

Middels onze applicatie (Plannr) kunnen deze doelen, zowel dagelijkse als lange termijn, worden toegevoegd en worden voorzien van een handige checklist (subdoelen). Naast dat deze checklist ervoor moet zorgen dat de cliënt vastigheid in zijn taken krijgt geeft het ook mooi een overzicht van wat er precies moet gebeuren voor zowel cliënt als begeleider.

De begeleiders hebben ten allen tijden inzage in de voortgang van de cliënt, daardoor kunnen problemen/ patronen bij een specifiek doel snel worden herkend. Hierdoor kan de begeleider in de één op één sessies meer aandacht aan besteden aan dat specifieke doel.

MoSCoW-analyse De MoSCow-analyse uitgewerkt

MoSCoW

Als groep hebben we samen een MoSCoW-analyse gemaakt voor ons concept. Tijdens het maken van deze analyse was het al bekend dat ik in dit project ging fungeren als back-end developer, daardoor keek ik ook met een totaal ander gezicht naar deze analyse. Mede door mijn ervaring kon ik ook plaatsen welke functies nog mogelijk konden zijn binnen de scope van het project.

Onderzoekfase:

Alhoewel ik zelf niet bezig ben geweest met het ontwerpen van de applicatie heb ik toch een behoorlijk aandeel gehad in de uiteindelijke designs. Ik heb namelijk van te voren een onderzoek gedaan over hoe een app het beste gedesigned kan worden. Dit klinkt nu natuurlijk als een behoorlijk grote vraag, maar dit onderzoek ging juist precies over een design voor mensen met autisme, oftewel onze doelgroep. Tijdens mijn zoektocht op het internet kwam ik uit bij een UI-onderzoek gedaan door MeetMaarten. Hierbij werd het design van een agenda app getest onder 13 verschillende testers met autisme. De meest opvallende resultaten waar rekening mee gehouden dient te worden waren:

  • Effen achtergrond, beperk de mogelijkheden tot afleiding.
  • Beperkt aantal kleurgebruik, hou het rustig!
  • Buttons duidelijk klikbaar maken (bijvoorbeeld: schaduw).
  • Verder kunnen icons helpen, maar kies bij voorkeur voor tekst om miscommunicatie te voorkomen.
Onderwerp incl. kernmerken Eindontwerp (Nick) incl. toepassingen na UI-onderzoek

Uiteindelijk heb ik deze conclusies doorgezet naar de ontwerpers (Nick, Ahmed en Michelle) en zijn deze conclusies ook toegepast in het uiteindelijke eindontwerp. Hierboven in de afbeelding kun je het ontwerp van Nick zien, waarin te zien is dat mijn resultaten van het onderzoek zijn meegenomen in het ontwerp.

Lees hier het gehele UI-onderzoek. Ontworpen pagina's in HTML Drie van mijn ontworpen/ gemaakte pagina's in de applicatie

Ontwikkelfase:

Tijdens de ontwikkeling van de applicatie was er vooraf een duidelijke takenindeling gemaakt over wie wat deed. Zo was Ruben benoemd als front-end developer en ik als back-end developer. Daardoor waren mijn taken beperkt gebleven tot vooral PHP en MYSQL (databases). Aan de hand van de eerder opgesteld MoSCoW en de informatie vanuit Futuris heb ik mijn databases-rijen opgesteld. Op het einde heb ik Ruben geholpen met een beetje Javascript en bijkomende pagina’s, zoals bij het toevoegen van een hoofddoel, ontworpen in HTML & CSS. Zo heb ik uiteindelijk in bijna alle bijkomende talen van dit project geprogrammeerd.

Bekijk mijn database-structuur. Push-actie GIT Push-proces in de Futuris GIT via CMD (versneld)

Werken met GIT

Aangezien dat we met een team i.p.v. één persoon aan de applicatie gingen werken besloten we om GIT te gaan gebruiken. Hierdoor konden beide personen tegelijk aanpassingen doen en ten allen tijden de nieuwe code opvragen. In project één (Greenhouse) hadden Ruben en ik ook samen met zijn tweeën de code voor ons genomen en nu kijkende achteraf heeft GIT onze samenwerking een flinke boost gegeven. Op het begin was het even wennen aangezien het nieuw voor mij was, alleen na een snelle cursus van Ruben had ik het eigenlijk vrijwel direct onder de knie.

Bekijk onze GIT-folder.

Functies binnen de app:

Binnen de applicatie zijn er verschillende functies beschikbaar waar ik de belangrijkste er even tussen uitlicht:

Één loginpagina voor zowel cliënt (Andre) als begeleider (Willeke)

Login

Middels het toevoegen van een 'ROLE' rij in de database wordt er gecheckt of de gebruiker die inlogt een cliënt of een begeleider is. Aan de hand van de uitkomst uit de database-rij 'ROLE' wordt de gebruiker naar de juiste pagina doorgestuurd. Hierdoor kunnen zowel de cliënten als begeleiders op dezelfde inlogpagina inloggen.

Een hoofddoel aanmaken in de applicatie

Hoofddoel aanmaken

Wanneer een gebruiker is ingelogd kan deze hoofddoelen aanmaken. Doordat de 'ID' van de ingelogde gebruiker wordt meegenomen wordt het hoofddoel gekoppeld aan de desbetreffende ingelogde gebruiker. Dit betekend dat wanneer een andere gebruiker inlogd dit hoofddoel niet zal worden weergegeven.

Subdoel(en) koppelen aan een hoofddoel

Suboel(en) aanmaken

Wanneer een hoofddoel is aangemaakt kan aan dat hoofddoel verschillende subdoelen gekoppeld worden. Deze subdoelen worden middels het 'ID' van het hoofddoel aan elkaar gekoppeld. Voor de UI wordt bij het toevoegen van een subdoel de naam van het hoofddoel als reminder weergeven.

Applicatie onthoudt welke subdoelen zijn aangevinkt

Onthouden van de interactie

Middels de database-rij 'CHECKED' krijgt de applicatie inzicht of een subdoel eerder is aangevinkt. Doordat de bolletjes geen oorspronkelijk checkboxen zijn kon dit niet makkelijk worden doorgestuurd naar de database. Middels een hidden inputfield en een javascript functie heb ik dit probleem kunnen oplossen.

Hoofddoelen die volledig zijn afgevinkt komen onder het kopje 'doelen behaald vandaag' te staan

Extra's

Naast deze hoofdfuncties zitter er ook bepaalde extra functies in de applicatie. Degene waar ik het meeste trots op ben ik dat voltooide doelen worden herkend. Middels de functie count() in PHP heb ik de totale subdoelen laten vergelijken met de subdoelen met database-rij 'CHECKED'. Bijvoorbeeld wanneer er maar 3 van de 7 subdoelen bij hoofddoel 'De was doen' in de database staan met 'ja' in de database-rij 'CHECKED' is dit hoofddoel nog niet voltooid.

Plannr (Eindproduct)

Benieuwd om zelf eens aan de slag te gaan met de applicatie? Klik dan op de link hieronder en probeer zelf een hoofddoel toe te voegen en te experimenteren met het aan- en uitvinken van de subdoelen. Hiervoor heb ik een speciaal account aangemaakt in de applicatie waarin je zelf de volledige vrijheid hebt om te experimenteren. Log in op de applicatie met de gebruikersnaam Testaccount en het wachtwoord 123.

Bekijk de applicatie.

Testfase:

Aangezien de applicatie pas aan de eind van de middag van de dag voor de oplevering volledig was afgerond was het niet meer mogelijk om te gaan testen met de doelgroep. Echter weet ik uit ervaring dat PHP een verraderlijke taal kan zijn en vooral de desbetreffende programmeur dingen over het hoofd kan zien. Hierdoor heb ik een testaccount in de applicatie opgesteld voor mijn groepsgenoten met opdracht om te gaan 'spelen' met de applicatie. De groepsgenoten konden echter geen fouten vinden in de applicatie op enkele spelfouten en een kleine bug (die te maken had met het overzetten van localhost naar een server) na. Deze kleine fouten heb ik na deze test nog opgelost ter verbetering van het eindproduct.

Ontworpen element voor de presentatie Ontworpen mock-up van de applicatie voor de eindpresentatie

Eindfase:

Op vrijdag 7 juni stond de afsluiting van het project op het programma. De dagen hiervoor heb ik samen met Ahmed de eindpresentatie ontworpen. Hierin was ik vooral verantwoordelijk voor het visuele effect en Ahmed voor de indeling van de presentatie. Mijn taken varieerde van het ontwerpen van iconen en visuele elementen zoals de afbeelding hierboven. Op de dag zelf hebben Michelle en Ahmed onze groep vertegenwoordigd met de presentatie, waarin ik als cameraman heb gefungeerd.

Bekijk hier de ontworpen eindpresentatie.
Papercut

Contact?

Neem gerust contact op via +31 6 31531060 of contact@rickvg.nl.

Meer weten?

Neem een kijkje op een van mijn sociale media.

Copyright © 2024 Rickvg.nl