Design Rationale - NathanNeelis/meesterproef-2021 GitHub Wiki
Debriefing
Design Challenge
Doelgroep
Motiveren tot bewegen
Job stories
Concept
Inloggen & registreren
Dag- en weekdoelen
Activiteit starten
Activiteiten plannen
Doel instellen
Contact opnemen
Installeren & offline
Progressive web app
Node applicatie
EJS templating
MongoDB database
Sessions
dotEnv variable
Actor diagram
Interaction diagram
Dataflow diagram
Hipper is een IOT device dat je de gebruiker helpt met revalideren. Van origine helpt het met het revalideren na een heupfractuur maar tegenwoordig wordt Hipper ook bij andere revalidaties ingezet, een voorbeeld is bijvoorbeeld Covid-19. Het apparaat heet de PAM. De PAM meet de beweging van de gebruiker en stuurt deze data via de server naar een dashboard. De hoeveelheid beweging wordt gemeten in een zo gehete PAM score. Deze bewegingsdata kan de revaliderende vervolgens weer met zijn therapeut bespreken en hier doelen bij maken.
De opdrachtgever is het Lectoraat Digital Life. Ze hebben meerdere projecten waarvan Hipper er één van is. Wat ze allemaal gemeen hebben is dat het projecten in de gezondheid zijn die gecombineerd worden met techniek. Binnen dit Lectoraat werken wij voor Margriet en Michel.
Momenteel hebben revalidanten moeite met het interpreteren van de informatie en onderzoek heeft aangetoond dat dit komt door de manier waarop het getoond wordt en welke informatie te zien is.
Mijn opdracht is om een nieuw concept te maken waarin de revalidant met zijn zorgverlener centraal staat. Ik ga onderzoeken welke informatie het belangrijkst is en wat de beste manier is om deze informatie te weergeven voor de doelgroep. Ook zoek ik uit hoe ik met deze data/informatie de revalidant zou kunnen motiveren om te bewegen. Na het onderzoek ga ik een prototype ontwikkelen dat het nieuwe Hipper dashboard zou kunnen worden. Dit is een digitale toepassing die responsive moet zijn met een main focus voor tablet. Ook moet de toepassing toegankelijk zijn voor de doelgroep.
Buiten het dashboard is er nog informatie over Hipper, het gebruik van het PAM apparaat en mogelijk ondersteunende informatie over het dashboard. Er is informatie voor de revalidant, de zorgverlener en eventueel ook voor innovatie managers van zorginstellingen. De opdracht is om deze informatie door middel van web-technologie overzichtelijk en interactief over te brengen aan de juiste doelgroep.
Als alles is gedaan en er toch nog tijd is om features toe te voegen zou ik kunnen gaan nadenken over het toevoegen van een (headless) CMS. Hiermee kan de webapplicatie beter onderhouden worden in te toekomst.
Buiten het dashboard heeft Hipper ook nog een website; https://www.hippertx.nl/
In dit project ga ik geen re-design van deze website in onze webapplicatie verwerken.
ROADMAP
Debriefing, dataoverzicht, jobstories, doelgroeponderzoek, conceptontwikkeling en schetsen.
Eventueel aanpassen van het concept op basis feedback week 1.
Doel van de week: Eerste uitwerking van het dashboard. Belangrijk hierin is dat ik bepaalde visualisaties test met de opdrachtgever om te kijken wat wel werkt en wat niet. In deze fase is het belangrijk om een besluit te nemen welke data/informatie ik wil tonen en op welke manier zodat deze in de komende weken getest kan worden met echte gebruikers.
Als het mogelijk is, is dit een testweek waarin ik mijn concept kan testen met echte gebruikers. Mijn prototype moet dan in grote lijnen staan. Dit betekent;
- Dashboard met data
- Een manier om de gebruiker te motiveren om te bewegen.
- Een plek waarin er meer informatie te vinden is over Hipper.
In deze week is ook de iteratie verwerkt van vorige week.
In dit prototype zal meer aandacht besteed zijn aan de techniek en de userflow. Maar het design zou nog wel een upgrade qua design kunnen gebruiken.
Een nieuw prototype met de verwerkte iteraties van voorgaande week. Het doel is om de techniek allemaal werkend te hebben en deze week zal er meer uitdacht gegeven zijn aan de look & feel van het design. Een goede vormgeving zal deze prototype naar een volgend niveau tillen. De webapplicatie is deze week zo goed als af, en kan voor een laatste keer getest worden. Zo hou ik nog wat rek over om de laatste iteraties door te voeren en eventuele problemen op te lossen.
Het prototype is afgerond, getest, gedocumenteerd en kan gepresenteerd worden.
Hipper biedt ondersteuning aan revaliderende door hun beweging te meten en deze data te visualiseren in een dashboard. Onderzoek van Hipper toont aan dat revalidanten moeite hebben met het interpreteren van de informatie. Ik ga voor Hipper een nieuw dashboard ontwerpen die informatie op een duidelijke en toegankelijke manier aan de revalidant toont. Daarbij is er behoefte om de revalidant te motiveren (meer) te gaan bewegen. Als toevoeging op het dashboard kom ik met een oplossing om de revalidanten te motiveren om te gaan bewegen.
In de briefing kreeg ik te horen dat onze doelgroep revaliderende mensen zijn met een gemiddelde leeftijd van 70 jaar. De reden van revalidatie kan verschillen, maar één ding hebben ze gemeen bij het gebruik van Hipper, en dat is dat ze revalideren door te bewegen. De leeftijd speelt de grootste rol in mijn zoektocht naar een passende applicatie voor ‘de revalidant’ en hier heb ik onderzoek naar gedaan.
Oudere mensen zijn digitale immigranten, dat houdt in dat ze zijn opgegroeid in een wereld waarin de computertechniek nog geen dagelijks gebruik was. Ook was het maken van onherstelbare fouten vroeger (vaker) mogelijk en konden deze grote gevolgen hebben. Tegenwoordig is dat wel anders, maar het ouderen zijn wel banger fouten te maken.
Daarbij is leesbaarheid een belangrijk aandachtspunt en is het van belang om teksten anders te formuleren als dat je dat zou doen voor een breder publiek om een voorbeeld te geven; ouderen kunnen moeite hebben met vakjargon als hashtags en cookies.
Met deze doelgroep kan ik ook rekening houden in de vormgeving, de interactie kan langzamer en minder precies zijn, om hier rekening mee te houden maak ik bijvoorbeeld grotere knoppen.
Tot slot is het belangrijk om onze doelgroep een handje te helpen. Zo kunnen we nadenken over de volgende stap en deze als call-to-actions gebruiken en vindt deze doelgroep het fijn als je persoonlijk contact kan opnemen als het niet helemaal lukt.
Toen ik moest gaan nadenken over het motiveren van gebruikers kwam ik al snel terecht bij de persuasion principles. Dit zijn technieken om de gebruiker te verleiden om iets te gaan doen. In mijn onderzoek heb ik meerdere technieken onderzocht, maar in de praktijk heb ik uiteindelijk twee principes gebruikt.
Als eerste is dat Authority. Ik heb dit principe gebruikt door oefeningen in de app te gebruiken waar de therapeuten ook mee werken. Margriet is één van mijn begeleiders in dit project en is ook een ergo-therapeut, zij heeft me geholpen met welke activiteiten deze revalidanten vaak doen. Doordat deze activiteiten van een therapeut komen respecteren de gebruikers deze autoriteit. Dit vergroot de kans dat de gebruikers sneller geneigd zijn om deze activiteiten ook te gaan uitvoeren.
Het tweede principe is commitment & consistency. In de applicatie kan je, samen met je therapeut, activiteiten plannen. Hierdoor geeft de gebruiker zijn ‘woord’ deze activiteiten te zullen uitvoeren. Omdat we graag trouw aan onszelf zijn, zullen we graag ons ‘woord’ willen houden. Zo zal de gebruiker sneller geneigd zijn om zijn geplande activiteiten netjes te blijven doen.
Ik heb een aantal job stories gemaakt om me meer in te leven in de gebruiker. Wat wil hij nou echt en in welke context? Uiteindelijk zijn deze job stories de richting waar mijn project heen gegaan is.
Wanneer ik terug kom van een activiteit bijvoorbeeld een stuk wandelen
Dan wil ik zien of ik mijn dagelijkse beweeg doel gehaald heb
Zodat ik weet of ik genoeg heb gedaan om vooruitgang te maken in mijn revalidatie proces.
Wanneer ik bij de therapeut ben
Dan wil ik een planning maken met welke activiteiten ik de komende week ga doen
Zodat ik niet vergeet mijn activiteiten te doen en een stok achter de deur heb.
Ik ga een progressive web app maken die op sommige devices ook te installeren is. Zo kan de gebruiker simpel de applicatie openen zonder de url te openen in een browser. De applicatie is een dashboard met een dag- en weekdoel. Door het bewegen met het PAM apparaatje zal het percentage van het dagelijks doel oplopen. Zo weet de gebruiker wanneer hij genoeg heeft bewogen om progressie te maken in zijn revalidatieproces. Het kan ook zijn dat de gebruiker op een dag bijvoorbeeld wel 200% van zijn dagelijks doel behaald, de kans is dan groot dat hij de dag erop niet zijn doel haalt. Hiervoor is er ook een wekelijks doel. Zo kan het zijn dat je niet altijd je dagelijkse doel haalt maar wel je week doel.
In de applicatie kan je ook een activiteit starten. Er is (op dit moment) keuze uit een zevental activiteiten om uit te voeren. Als je bijvoorbeeld gaat wandelen, selecteer je deze oefening en opent er een timer. Deze start je wanneer je begint met je activiteit en kan je stoppen en opslaan als je weer terugkomt. De activiteit zal in de lijst komen te staan van al je activiteiten van de dag en zal het aantal punten weergeven dat je ervoor hebt gekregen.
Bij de therapeut kan je wekelijks een planning maken van activiteiten die je gaat doen. Samen met de therapeut selecteer je een aantal oefeningen per dag die vervolgens in je planning komen te staan.
Tot slot kan je een overzicht zien van al je dagelijkse doelen en een overzicht van al je activiteiten. Zo kan je bij de therapeut laten zien hoeveel score je per dag gehaald heb en of er progressie in je revalidatieproces zit. De therapeut kan ook zien uit welke activiteiten je dagelijkse score bestaat en zo meer inzicht krijgen in je revalidatieproces. De therapeut kan je dagelijkse/wekelijkse doel ook handmatig bijstellen naar een hoger of lager doel op basis van je scores.
Deze applicatie is dus niet ter vervanging van je therapeut maar een ondersteuning tijdens je revalidatie. Je kan deze app zelf gebruiken om een planning te maken en activiteiten uit te voeren maar het beste resultaat zal behaald worden in samenwerking met een therapeut.
Hipper 2.0 is een applicatie die te installeren is op de meeste devices. In deze applicatie kan je activiteiten tracken en plannen om zo je doelen te halen. Deze activiteiten en doelen kan je vervolgens ook terugzien in een overzicht. Handig als je met je therapeut een nieuw doel wil instellen of activiteiten gaat plannen voor de komende week.
Om de gegevens van de gebruiker niet openbaar beschikbaar te maken, moet de gebruiker inloggen. Indien hij nog geen account heeft kan hij registreren.

Door te bewegen met het PAM apparaatje gaat je score van je dag- en weekdoel omhoog. Je kan hiervoor activiteiten doen die je zijn aangeraden door je therapeut. Het 100% doel is momenteel een gemiddelde van alle dagelijkse scores + 1. Van plan een lange activiteit te doen? Wees niet bang, je kan een hogere score dan 100% halen.

Ga je een activiteit doen? Start een activiteit in de vernieuwde Hipper app. Hierdoor ga je bewust op pad en registreer je uit welke activiteiten je beweging heeft bestaan. Dit is handig als je weer bij je therapeut bent, zo kan je aantonen wat je die week (bewust) gedaan hebt aan activiteiten. Daarbij zie je de behaalde score van je activiteit.

Samen met je therapeut kan je een planning maken over welke activiteiten je op welke dag gaat doen. Hierdoor heb je een stok achter de deur om te gaan bewegen en vergeet je niet wat je vandaag zou gaan doen.

Is je dag- en weekdoel niet haalbaar? Of haal je het doel te makkelijk? Pas samen met je therapeut een realistisch doel in die je helpt met je revalidatieproces.

Heb je een probleem met de applicatie, je account of je PAM apparaatje? Dan kan je nu ook makkelijk contact opnemen met het Hipper team.

Op sommige devices kan je de app ook installeren. Makkelijk, want dan hoef je niet elke keer je browser te openen en het dashboard te zoeken. Daarbij komt ook dat je het dashboard offline kan gebruiken. Stel je voor dat je naar de therapeut gaat voor je wekelijkse bezoek, hoe makkelijk is het dan om even je tablet mee te nemen om je progressie te laten zien. Dit kan ook zonder internet, alleen de nieuwste data is dan nog niet verwerkt in het dashboard.

Dit is een progressive web app met een geïnstalleerde service worker en een manifest. Op deze manier kan de app geïnstalleerd worden op sommige devices en ook offline geopend worden. De service-worker staat zo ingesteld dat indien mogelijk altijd de pagina via internet wordt geopend, en deze pagina dan in de cache opslaat. Als er dan geen internetverbinding is wordt de laatst opgeslagen pagina uit de cache geopend.
De applicatie is geschreven met een Node.js backend. Met Node zorg ik ervoor dat alle data op de juiste plekken komt, dit kan zijn in de HTML pagina of juist in de database. Ook compress ik alle pagina’s voor een snellere laadtijd.
Om de html pagina’s te renderen gebruik ik EJS templating. Hiermee kan ik eenvoudig dynamische data rendere in mijn HTML.
Als database heb ik gekozen om de nosql database MongoDB te gebruiken. Mijn keuze hiervoor is vooral berust op het feit dat ik hier de meeste ervaring mee heb en altijd fijn mee heb kunnen werken. In de database registreer ik de nieuwe gebruikers en hun voltooide activiteiten zowel als geplande activiteiten. Om mijn MongoDB skills toch een extra boost te geven heb ik ervoor gekozen om me te verdiepen in Mongoose om zo minder dubbele code te hoeven schrijven en meer beveiliging aan de gebruikers toe te voegen. Bijvoorbeeld door hun wachtwoorden te beveiligen met b-crypt.
De ingelogde gebruiker sla ik op via een session cookie. Zo weet de applicatie dat iemand is ingelogd en hoeft hij niet bij elke pagina refresh opnieuw in te loggen.
Voor het gebruik van de database en de session cookie gebruik ik een aantal dotenv variabelen. Een voorbeeld van mijn .env file is hieronder te zien.
DB_HOST=’host url’
DB_PORT=’port van database’
DB_NAME=’database naam’
SESSION_SECRET=’uniek wachtwoord als session secret’
In de actor diagram hieronder is te zien welke routes gebruik maken van welke actoren. Dit geeft een indruk hoe mijn code is opgebouwd.
Actor diagram
Hieronder is een interaction diagram te zien. Hieruit is de interactie tussen features, pagina’s en de database op te maken.
Interaction diagram
In de dataflow zie je hoe de data is opgebouwd en wanneer deze in de database gezet wordt of juist gelezen wordt.
Dataflow diagram
De hipper 2.0 applicatie is een oplossing voor de vraagstukken van het Lectoraat Digital Life. De applicatie geeft op een alternatieve manier de data weer en motiveert de revalidant om te gaan bewegen. De applicatie is alleen nog niet helemaal afgerond, en met wat puntjes op de i zou het snel al een eerste testfase in kunnen gaan om te zien of de applicatie aan de eisen voldoet.
De volgende stap is om nog wat kleine dingen aan te passen en dan zo snel mogelijk testfase in te gaan met echte gebruikers. Hierdoor onderzoek je of de applicatie net zo goed werkt als ik had bedacht. Maar voor de testfase zal het volgende nog afgerond moeten worden:
To do lijst
- Buiten het percentage, ook de PAM score inzichtelijk maken door bijvoorbeeld op de visualisatie te klikken.
- In het weekdoel nog het totale aantal licht, medium en zware activiteit minuten berekenen.
- Het weekdoel wordt momenteel gelinkt aan de afgelopen zeven dagen. Dit moet worden het aantal dagen tot bijvoorbeeld afgelopen maandag? Zodat de data echt voor de huidige week is, en niet de afgelopen zeven dagen.
- Leuke animatie als het doel bijvoorbeeld 120% behaald is?
- alle activiteiten hebben nu nog het wandel icoon. Hier moeten nog verschillende iconen voor komen.
- (KEUZE) Misschien is het beter om de 5-10 meest recente activiteiten te tonen in plaats van die van de huidige dag.
- Zero state vormgeven. Nu alleen een zin dat er geen activiteiten zijn gedaan vandaag.
- De berekening updaten over de behaalde PAM score. Momenteel laat hij het aantal actieve minuten zien. Maar dit moet nog worden omgerekend naar een PAM score / percentage? En er is in mijn berekening nog geen rekening met letters in de datastring zoals ‘a, c etc..’.
- Start/stop knop groter maken.
- Duration is nog in seconden. Deze nog transformeren naar: uren : minuten : seconden?
- Testen welke informatie op deze pagina belangrijk is
- Duration is nog in seconden. Deze nog transformeren naar: uren : minuten : seconden?
- Testen welke informatie op deze pagina belangrijk is
- Dagdoel instellen is nog niet geconnect met database.
- Contact formulier nog een verzendscript koppelen. Er wordt nu niks verstuurd.
- Kleine update op vormgeving -> Informatie architecture, wat is belangrijk? Wat eerst etc..
- Deze moet nog in zijn geheel gemaakt worden.
- Deze moet nog in zijn geheel gemaakt worden.