8 OKTOBER 2021
MODULE OPDRACHT
USER EXPERIENCE DESIGN
NCOI – HBO BACHELOR COMMUNICATIE
,Voorwoord
Mijn naam is Daniek Overbeek, 26 jaar, woonachtig in Haaksbergen en volg de opleiding HBO
Bachelor Communicatie (deeltijd) bij NCOI opleidingen.
Met deze opleiding ben ik april 2020 gestart. Na een aantal jaren werkzaam te zijn geweest in de
fitnessbranche, heb ik besloten totaal wat anders te gaan doen. Na een lange tijd zoeken naar de
juiste opleiding heb ik voor de opleiding HBO Bachelor communicatie gekozen. Begin dit jaar heb ik
gekozen voor de specialisatie Multimedia-design, omdat het creatieve aspect hierin me erg aansprak.
Ik zou mijn creativiteit graag verder willen ontwikkelen en hoop met deze specialisatie meer kennis op
te doen als het gaat om het creatieve aspect binnen communicatie.
Ik werk momenteel in een supermarkt, op de broodafdeling. Ik heb er voor gekozen om eerst
informatie op te doen en de theorie goed te beheersen, voor ik een baan in het werkveld ga zoeken.
Mijn doel is wel om over één jaar of twee een baan te zoeken in het werkveld. Ondanks dat ik weinig
ervaring heb hoop ik dat iemand mij de kans wil geven zodat ik mezelf kan ontwikkelen, in de praktijk
maar ook theoretisch. Theoretisch heb ik het afgelopen jaar al veel bijgeleerd en hoop dit over een
aantal jaren in de praktijk te kunnen toepassen.
Op dit moment volgt ik de module user experience design, deze sluit ik af met een moduleopdracht.
De moduleopdracht is een adviesdocument waarin een uitgewerkt plan staat voor een aanpassing van
een bestaande website van een organisatie in mijn directe omgeving, namelijk CareFit4All. Waarbij
alle gemaakte keuzes onderbouwd zijn vanuit het perspectief van de gebruiker.
Mijn dank gaat uit naar mijn docent van de module de heer Blijlevens, voor het overbrengen van de
theoretische en praktische informatie betreffende de module user experience design. Daarnaast wil ik
mijn medestudenten bedanken voor de gezellige online lessen en de scherpe vragen tijdens de les.
I
,Samenvatting
CareFit4All is een kleinschalig sportcentrum, het sportcentrum is zes dagen per week open en kent
een uitgebreid pakket aan bewegings- en fitnessprogramma’s en buitensportactiviteiten. Er wordt
weinig aandacht geschonken aan de website van de organisatie. Vanuit de organisatie is de vraag
gekomen om te kijken naar de mogelijkheden om de website meer te benutten. Vanuit hier is dit
adviesdocument ter verbetering van de bestaande website ontstaan.
In dit adviesdocument aan CareFit4All zal ik de alle lagen uit het model van Garret systematisch
uitwerken. Het model bestaat uit vijf lagen: The Surface Plane, The Skeleton Plane, The Structure
Plan, The Scope Plane en The Strategy Plane.
In The Strategy Plane worden de doelen, doelgroepen en concurrentie verder toegelicht.
Businessgoals: doelgroep overtuigen om te komen sporten, nieuwe instructeurs werven, gemoedelijke
sfeerbeleving creëren.
Usergoals: informatie inwinnen (locatie, kosten lidmaatschap, rooster, enzovoort), reviews van klanten
kunnen lezen, sfeerimpressie krijgen van de sportschool.
Om de belangrijkste concurrentie in kaart te brengen is gekeken naar de website van KeiFit, hier zijn
de Do’s en Dont’s van in kaart gebracht. En om de doelgroep in kaart te brengen zijn twee
onderzoeksmethoden gebruikt: een interview en het maken van de daaruit volgende persona.
In The Scope Plane worden de requirements van de website verder toegelicht, de volgende
requirements komen aan bod: functionele, business, inhoudelijke (content) en technische. Uiteindelijk
zijn uit deze laag de user- en business doelen te realiseren.
In The Structure Plane vallen de interaction design oftewel UX-validatie en de information architecture.
Deze laag zorgt voor structuur in alle losse elementen. Hierbij is gebruik gemaakt van een
userstorymap om inzicht te krijgen in de gedachten van potentiële klanten. En zijn verschillende
aanpassingen getest in een paperprototypingtest, waarin de bevindingen zijn opgenomen in dit
adviesdocument en de daaruit volgende resultaten meegenomen.
In The Skeleton Plane komt de informatiestructuur terug, hierin wordt een overzichtelijk en
gestructureerd beeld gegeven van de informatie die vindbaar is op de website van CareFit4All met
daarin een verantwoording van de gemaakte keuzes. De volgende pagina’s worden verder toegelicht:
de home page, nieuws, aanbod, abonnementen, huisregels & contactinformatie.
Naast dat de informatiestructuur onder The Skeleton Plane valt, hoort hier ook de navigatie- en
interactiedesign bij. Hierbij is gebruik gemaakt van de persona Jaqueline en zijn verschillende
userscenario’s benoemd en enkele uitgewerkt in wireframes.
In de bovenste laag van het model The Surface Plane valt de sensory design doormiddel van een
moodboard met aandacht voor typografie, kleurenpalet en fotosfeer en toepassing hiervan op een
wireframe is het visual design van de website zichtbaar geworden. Om te testen is er een klikbare
demo gemaakt via Adobe XD en is de daaruit volgende conclusie opgenomen in dit adviesdocument.
In de uiteindelijke conclusie van de klikbare demo’s gaf de eigenaresse aan dat ze de resultaten mee
gaat nemen in haar overweging om de updates door te voeren in de website. Binnen nu en twee
maanden volgt een gesprek om verder te kijken naar de website en de optimalisatie van de user
experience design.
II
, Inhoudsopgave
Voorwoord ............................................................................................................................................... I
Samenvatting ......................................................................................................................................... II
Inhoudsopgave ..................................................................................................................................... III
1 Inleiding ............................................................................................................................................... 1
1.1 De organisatie ............................................................................................................................... 1
1.2 Belang en opzet ............................................................................................................................. 1
1.2.1 De specifieke klantvraag: ....................................................................................................... 1
1.3 Leeswijzer ...................................................................................................................................... 1
2 Doelen, doelgroepen en concurrentie .............................................................................................. 2
2.1 De businessgoals en usergoals .................................................................................................... 2
2.2 De concurrentie ............................................................................................................................. 2
2.3 Stakeholdersanalyse ..................................................................................................................... 2
2.4 Doelgroep (persona of empathymapafbeelding (bijlage)) ............................................................ 2
2.4.1 Het interview ........................................................................................................................... 3
2.4.2 Persona .................................................................................................................................. 3
3 Functionele-, business-, inhoudelijke en technische requirements ............................................. 3
3.1 Functionele requirements .............................................................................................................. 3
3.2 Business requirements .................................................................................................................. 4
3.3 Technische requirements .............................................................................................................. 4
3.4 Userdoelen .................................................................................................................................... 4
3.5 Businessdoelen ............................................................................................................................. 4
3.6 Content requirements .................................................................................................................... 4
4 UX-validatie en informatiearchitectuur ............................................................................................ 4
4.1 Userstorymap ................................................................................................................................ 5
4.2 paperprototypingtest ...................................................................................................................... 5
4.3 Samenvatting ................................................................................................................................. 5
5 Informatiestructuur ............................................................................................................................ 5
5.1 Informatiestructuur ......................................................................................................................... 5
5.2 Verantwoording gemaakte keuzes ................................................................................................ 5
5.2.1 Home page ............................................................................................................................. 5
5.2.2 Nieuws .................................................................................................................................... 5
5.2.3 Aanbod ................................................................................................................................... 5
5.2.4 Abonnementen ....................................................................................................................... 6
5.2.5 Huisregels & contactinformatie ............................................................................................... 6
6 Navigatie- en interactiedesign .......................................................................................................... 6
6.1 Userscenario’s ......................................................................................................................... 6
6.1.1 Wireframes ............................................................................................................................. 6
7 Sensorydesign .................................................................................................................................... 7
7.1 Resultaten klikbare demo’s ........................................................................................................... 7
7.2 Conclusies ..................................................................................................................................... 8
III
MODULE OPDRACHT
USER EXPERIENCE DESIGN
NCOI – HBO BACHELOR COMMUNICATIE
,Voorwoord
Mijn naam is Daniek Overbeek, 26 jaar, woonachtig in Haaksbergen en volg de opleiding HBO
Bachelor Communicatie (deeltijd) bij NCOI opleidingen.
Met deze opleiding ben ik april 2020 gestart. Na een aantal jaren werkzaam te zijn geweest in de
fitnessbranche, heb ik besloten totaal wat anders te gaan doen. Na een lange tijd zoeken naar de
juiste opleiding heb ik voor de opleiding HBO Bachelor communicatie gekozen. Begin dit jaar heb ik
gekozen voor de specialisatie Multimedia-design, omdat het creatieve aspect hierin me erg aansprak.
Ik zou mijn creativiteit graag verder willen ontwikkelen en hoop met deze specialisatie meer kennis op
te doen als het gaat om het creatieve aspect binnen communicatie.
Ik werk momenteel in een supermarkt, op de broodafdeling. Ik heb er voor gekozen om eerst
informatie op te doen en de theorie goed te beheersen, voor ik een baan in het werkveld ga zoeken.
Mijn doel is wel om over één jaar of twee een baan te zoeken in het werkveld. Ondanks dat ik weinig
ervaring heb hoop ik dat iemand mij de kans wil geven zodat ik mezelf kan ontwikkelen, in de praktijk
maar ook theoretisch. Theoretisch heb ik het afgelopen jaar al veel bijgeleerd en hoop dit over een
aantal jaren in de praktijk te kunnen toepassen.
Op dit moment volgt ik de module user experience design, deze sluit ik af met een moduleopdracht.
De moduleopdracht is een adviesdocument waarin een uitgewerkt plan staat voor een aanpassing van
een bestaande website van een organisatie in mijn directe omgeving, namelijk CareFit4All. Waarbij
alle gemaakte keuzes onderbouwd zijn vanuit het perspectief van de gebruiker.
Mijn dank gaat uit naar mijn docent van de module de heer Blijlevens, voor het overbrengen van de
theoretische en praktische informatie betreffende de module user experience design. Daarnaast wil ik
mijn medestudenten bedanken voor de gezellige online lessen en de scherpe vragen tijdens de les.
I
,Samenvatting
CareFit4All is een kleinschalig sportcentrum, het sportcentrum is zes dagen per week open en kent
een uitgebreid pakket aan bewegings- en fitnessprogramma’s en buitensportactiviteiten. Er wordt
weinig aandacht geschonken aan de website van de organisatie. Vanuit de organisatie is de vraag
gekomen om te kijken naar de mogelijkheden om de website meer te benutten. Vanuit hier is dit
adviesdocument ter verbetering van de bestaande website ontstaan.
In dit adviesdocument aan CareFit4All zal ik de alle lagen uit het model van Garret systematisch
uitwerken. Het model bestaat uit vijf lagen: The Surface Plane, The Skeleton Plane, The Structure
Plan, The Scope Plane en The Strategy Plane.
In The Strategy Plane worden de doelen, doelgroepen en concurrentie verder toegelicht.
Businessgoals: doelgroep overtuigen om te komen sporten, nieuwe instructeurs werven, gemoedelijke
sfeerbeleving creëren.
Usergoals: informatie inwinnen (locatie, kosten lidmaatschap, rooster, enzovoort), reviews van klanten
kunnen lezen, sfeerimpressie krijgen van de sportschool.
Om de belangrijkste concurrentie in kaart te brengen is gekeken naar de website van KeiFit, hier zijn
de Do’s en Dont’s van in kaart gebracht. En om de doelgroep in kaart te brengen zijn twee
onderzoeksmethoden gebruikt: een interview en het maken van de daaruit volgende persona.
In The Scope Plane worden de requirements van de website verder toegelicht, de volgende
requirements komen aan bod: functionele, business, inhoudelijke (content) en technische. Uiteindelijk
zijn uit deze laag de user- en business doelen te realiseren.
In The Structure Plane vallen de interaction design oftewel UX-validatie en de information architecture.
Deze laag zorgt voor structuur in alle losse elementen. Hierbij is gebruik gemaakt van een
userstorymap om inzicht te krijgen in de gedachten van potentiële klanten. En zijn verschillende
aanpassingen getest in een paperprototypingtest, waarin de bevindingen zijn opgenomen in dit
adviesdocument en de daaruit volgende resultaten meegenomen.
In The Skeleton Plane komt de informatiestructuur terug, hierin wordt een overzichtelijk en
gestructureerd beeld gegeven van de informatie die vindbaar is op de website van CareFit4All met
daarin een verantwoording van de gemaakte keuzes. De volgende pagina’s worden verder toegelicht:
de home page, nieuws, aanbod, abonnementen, huisregels & contactinformatie.
Naast dat de informatiestructuur onder The Skeleton Plane valt, hoort hier ook de navigatie- en
interactiedesign bij. Hierbij is gebruik gemaakt van de persona Jaqueline en zijn verschillende
userscenario’s benoemd en enkele uitgewerkt in wireframes.
In de bovenste laag van het model The Surface Plane valt de sensory design doormiddel van een
moodboard met aandacht voor typografie, kleurenpalet en fotosfeer en toepassing hiervan op een
wireframe is het visual design van de website zichtbaar geworden. Om te testen is er een klikbare
demo gemaakt via Adobe XD en is de daaruit volgende conclusie opgenomen in dit adviesdocument.
In de uiteindelijke conclusie van de klikbare demo’s gaf de eigenaresse aan dat ze de resultaten mee
gaat nemen in haar overweging om de updates door te voeren in de website. Binnen nu en twee
maanden volgt een gesprek om verder te kijken naar de website en de optimalisatie van de user
experience design.
II
, Inhoudsopgave
Voorwoord ............................................................................................................................................... I
Samenvatting ......................................................................................................................................... II
Inhoudsopgave ..................................................................................................................................... III
1 Inleiding ............................................................................................................................................... 1
1.1 De organisatie ............................................................................................................................... 1
1.2 Belang en opzet ............................................................................................................................. 1
1.2.1 De specifieke klantvraag: ....................................................................................................... 1
1.3 Leeswijzer ...................................................................................................................................... 1
2 Doelen, doelgroepen en concurrentie .............................................................................................. 2
2.1 De businessgoals en usergoals .................................................................................................... 2
2.2 De concurrentie ............................................................................................................................. 2
2.3 Stakeholdersanalyse ..................................................................................................................... 2
2.4 Doelgroep (persona of empathymapafbeelding (bijlage)) ............................................................ 2
2.4.1 Het interview ........................................................................................................................... 3
2.4.2 Persona .................................................................................................................................. 3
3 Functionele-, business-, inhoudelijke en technische requirements ............................................. 3
3.1 Functionele requirements .............................................................................................................. 3
3.2 Business requirements .................................................................................................................. 4
3.3 Technische requirements .............................................................................................................. 4
3.4 Userdoelen .................................................................................................................................... 4
3.5 Businessdoelen ............................................................................................................................. 4
3.6 Content requirements .................................................................................................................... 4
4 UX-validatie en informatiearchitectuur ............................................................................................ 4
4.1 Userstorymap ................................................................................................................................ 5
4.2 paperprototypingtest ...................................................................................................................... 5
4.3 Samenvatting ................................................................................................................................. 5
5 Informatiestructuur ............................................................................................................................ 5
5.1 Informatiestructuur ......................................................................................................................... 5
5.2 Verantwoording gemaakte keuzes ................................................................................................ 5
5.2.1 Home page ............................................................................................................................. 5
5.2.2 Nieuws .................................................................................................................................... 5
5.2.3 Aanbod ................................................................................................................................... 5
5.2.4 Abonnementen ....................................................................................................................... 6
5.2.5 Huisregels & contactinformatie ............................................................................................... 6
6 Navigatie- en interactiedesign .......................................................................................................... 6
6.1 Userscenario’s ......................................................................................................................... 6
6.1.1 Wireframes ............................................................................................................................. 6
7 Sensorydesign .................................................................................................................................... 7
7.1 Resultaten klikbare demo’s ........................................................................................................... 7
7.2 Conclusies ..................................................................................................................................... 8
III
