31/01/ /06/2017 Stageverslag

(1)

31/01/2017 - 30/06/2017

CMD J3S2 | stageNetvlies

Stageverslag (31/01/2017 - 30/06/2017)

d.d. 30 juni 2017

Docentbegeleider: Michel Witter Stagebegeleider: Freek Gerritsen

Evie van den Munckhof

Stageverslag

(2)

Stageverslag 31/01/2017 - 30/06/2017

Samenvatting

Voor de stage van de tweede helft van mijn derde studiejaar bij Communication and Multimedia De- sign, heb ik het bedrijf Netvlies uitgekozen. Het bedraagt een full-time meeloop stage (40 u/week) in de periode van 31 januari 2017 tot 30 juni 2017.

Netvlies Internetdiensten is een bedrijf in Breda met ongeveer veertig medewerkers. Hier worden volgens de Agile Design en de SCRUM-methode online strategieën, websites en webapplicaties geproduceerd. Wat mijn stage betreft, zal de focus liggen op het strategie gedeelte, waarbij ook veel design aan bod zal komen.

Ondanks dat het even heeft geduurd voordat ik mijn draai binnen deze stage heb kunnen vinden en ik heb kunnen wennen aan de switch in mijn dagelijkste structuur, heb ik veel mogen leren tijdens deze stage.

Voornamelijk de grotere opdrachten voor Travel Active, Mustad en Axon hebben mij erg opweg geholpen in het behalen van de doelen die ik heb gesteld in mijn Persoonlijk Ontwikkelings Plan.

Voor Travel Active - een bestaande klant van Netvlies - heb ik samen met mijn stagegenoot Thijs van de Meerendonk een stageopdracht mogen voorstellen en uiteindelijk mogen uitwerken. Een grondig doelgroeponderzoek is aan het ontwerp vooraf gegaan. Meerde malen reizen van Breda naar het kantoor van Travel Active in Venray hebben gezorgd voor goede communicatie met de klant en zeer bruikbare feedback. Ik ben blij met het resultaat dat deze stageopdracht gebracht heeft en hoop dat de opzet van dit concept ooit gerealiseerd mag worden door Netvlies.

Voor Mustad - ook een bestaande klant van Netvlies - lag al langer het idee voor het maken van een Knowlegde and Advice Base voor hoefsmeden, waar zij kennis kunnen ontvangen en kennis kunnen delen. Ik heb een ontwerp gemaakt voor deze Knowlegde en Advice Base en heb mijn ontwerp ver- volges mogen samenvoegen met het ontwerp van Thijs. Deze twee ontwerpen zijn uitgebloeid tot een sterk prototype dat reeds aan Mustad gepresenteerd is. Volgens de planning gaat de Knowlegde and Advice Base in 2018 door Netvlies gerealiseerd worden: iets waar ik heel erg blij van word.

Wat betreft Axon - een nieuwe klant van netvlies - heb ik het gehele proces (van kick-off sessie tot livegang van de website) niet alleen mogen meelopen maar ook daadwerkelijk mogen meedoen.

Deze kans heeft mij verschaft met vele inzichten over niet alleen de werkwijze van Agile Desig en SCRUM, maar ook over hoe collega’s in een dergelijke bedrijfsomgeving met elkaar omgaan en hoe er gecommuniceerd wordt richting de klant.

Al met al heb ik de doelen uit mijn Persoonlijk Ontwikkelings Plan zo goed als geheel mogen behalen, waar ik persoonlijk erg blij mee ben.

(3)

Stageverslag 31/01/2017 - 30/06/2017

Inhoudsopgave

Inleiding

Netvlies Internetdiensten

WieisNetvlies?

SCRUM/AgileDesign

Eigen rol en werkzaamheden

Stand-up Unilux Boek: Get Agile!

Design rompertjes

Chassé Theater: sociale bewijskracht Chassé Theater: Planning Poker

Chassé Theater: gebruikerstest filterfunctie Axon

Declerq: bannersets

Holland Dance Festival: mobiel design Mustad: Knowledge and Advice Base Chassé Theater: infographics

Stageopdracht (uitwendig document)

Reflectie

Leerdoelen (P.O.P.) CMD competenties

Conclusie 1.

2.

2.1 2.2

3.

3.1 3.23.3 3.43.5 3.63.7 3.83.9 3.103.11 3.12 3.13

4.

5.

5.1 5.2

6. Pag. 3 Pag. 4

Pag. 4 Pag. 5

Pag. 8

Pag. 8 Pag. 9 Pag. 10 Pag. 12 Pag. 16 Pag. 17 Pag. 23 Pag. 31 Pag. 33 Pag.36 Pag. 54

Pag. 57

Pag. 58

Pag. 58 Pag. 63

Pag. 68

(4)

Stageverslag 31/01/2017 - 30/06/2017

1. Inleiding

Voor het tweede - en tevens laatste - semsester van het derde jaar van de opleiding Communication - and Multimedia Design, loop ik - Evie van den Munckhof - stage bij het bedrijf Netvlies.

Deze stage is een meeloopstage van 100 werkdagen (20 weken) waarbij de stagiaire elke week 40 uren dient te maken. De stage heeft plaatsgevonden vanaf 31 januari 2017 tot en met 31 juni 2017. Dit is een periode van vijf maanden.

Aangezien ik direct na het behalen van mij VWO-diploma op de middelbare school ben begonnen aan de HBO-opleiding CMD, heb ik nog niet eerder stage gelopen. Ik kan dan ook toegeven dat ik niet alleen heel erg veel zin had in deze stage en erg benieuwd was, maar het stiekem ook wel erg spannend vond.

Een bedrijfs-mentaliteit is natuurlijk te vergelijken met Mars wanneer je een student-mentaliteit vergelijkt met Venus. Niet alleen het moeten missen van mijn medestudenten maar ook het mezelf redden in een geheel nieuwe situatie is iets wat ik vooraf wel degelijk als een uitdaging heb gezien.

Ik heb kennis gemaakt met het bedrijf Netvlies tijdens de stagemarkt die een tijd voor de stageperiode is georganiseerd door de Avans Hogeschool. Vooraf aan de stagemarkt zelf heeft Freek Gerritsen (nu mijn stagebegeleider) een presentatie gegeven over de SCRUM-methode die Netvlies hanteert.

Deze presentatie heeft mij erg enthousiast gemaakt en stiekem baalde ik dat ik Netvlies niet had gekozen voor een speed-date sessie tijdens de stagemarkt zelf. Toevallig bleek een van de bedrijven die ik wel had gekozen voor een speed-date sessie niet aanwezig te kunnen zijn, waardoor ik een van deze sessies kon aansluiten bij een tafel naar keuze. Deze keuze is Netvlies geworden. Na een verhel- derend en leuk gesprek met Freek en Joey wist ik dat ik ging solliciteren bij Netvlies.

Netvlies is een bedrijf - gelegen te Breda - dat internetdiensten (websites en webapplicaties) levert aan een verscheidenheid aan klanten. Wat Netvlies zo goed maakt in wat ze doen, heeft voornamelijk te maken met de positive, efficiënte werksfeer die mede ontstaat door het toepassen van de methode: Agile Design. Ook gebruikt Netvlies SCRUM als methode om de opdrachtgever te voorzien van het gewenste resultaat.

(5)

Stageverslag 31/01/2017 - 30/06/2017

2. Netvlies internetdiensten

2.1 Wie is Netvlies?

‘44 communicatieve vakidioten met een passie voor online.’ Dat is hoe Netvlies zich omschrijft wan- neer je op de ‘over ons’ pagina van de website van Netvlies belandt. Netvlies bestaat als sinds 1997 en was op dat moment ‘Het Jongste Bedrijf van Nederland’. Jos, Jeroen en Jochem stopten op 16-jari- ge leeftijd met school en hebben zich verdiept in de online wereld van het internet, wat destijds een vrij nieuw fenomeen was.

Netvlies heeft zich tot op de dag van vandaag doorontwikkeld tot een sociaal innovatief bedrijf dat zich richt op het benutten van de competenties en talenten van medewerkers. Dit wil zeggen veel vrijheid en verwantwoordelijkheid; geen managers, maar coaches en het belonen op basis van meerwaarde. Dit alles heeft met zich meegenomen dat niet alleen de medewerkers- en klantte- vredenheid, maar ook de omzet is gegroeid. Netvlies heeft achtereenvolgens de prijs voor Slimste Bedrijf van Nederland, FD Gazelle en Brabants Beste gewonnen.

Maar wat maakt Netvlies zo speciaal?

‘Als klant krijg je een werkplek bij ons op kantoor. Onze specialisten schrijven zichzelf in op jouw project.

Communicatie is alles. Wij houden van Scrum. Samen sta je sterker, daar geloven we heilig in.’ is het antwoord op deze vraag vanuit Netvlies.’

Het toepassen van SCRUM en Agile-Design is een werkmethode die je tegenwoordig bij steeds meer bedrijven terug ziet komen. Door middel van SCRUM werkt Netvlies op een prettige, efficiënte en heldere manier samen met de klant (of hoe Netvlies het graag verwoordt: Online Partner). Projec- ten blijven binnen de vooraf afgesproken scope (planning en budget) en het eindresultaat is precies wat de klant wenst te ontvangen. Zie hoofdstuk 2.2 SCRUM / Agilie Design voor een meer gedetail- leerde beschrijving van SCRUM en Agile Design.

Bovenstaand verhaal geeft antwoord op de vraag wie Netvlies is, volgens Netvlies. Maar wie is Net- vlies volgens mij? Zoals reeds beschreven in de inleiding van dit document, heeft Freek (mijn stagebegeleider bij Netvlies) mijn interesse gewekt tijdens zijn presentatie op de Avans Hogeschool over SCRUM. Ik houd van mensen, groepen en bedrijven die de wereld met een frisse blik bekijken en niet bang zijn om de inzichten die voortkomen uit deze frisse blik om te zetten in een innovatieve aan- pak. Daarbij vind ik het een geweldig gevoelg wanneer een team efficiëft kan samenwerken en dit ook daadwerkelijk doet. Uit een prettige, efficiënte en heldere samenwerking volgen vaak de meest geweldige resultaten. Daarbij sprak de mate van eigen verantwoordelijkheid en de daarbijhorende

‘vrijheid’ mij heel erg aan. Ik ben prima in staat mijn eigen deadlines te stellen, mijn eigen planning te maken en mijn eigen verantwoordelijkheid te nemen voor wanneer iets goed of juist fout gaat.

Voor mij is Netvlies een bedrijf dat niet bang is om met een frisse blik de situatie te bekijken en daarbij risico durft te nemen om de inzichten die hieruit volgen om te zetten in innovatieve veran- deringen.

(6)

2.2 SCRUM / Agile-Design

De definitie van SCRUM volgens de website www.scrum.nl luidt als volgt: ‘Scrum is één van de Agile frameworks en kan worden ingezet om in teamverband op een effectieve, flexibele manier software te ontwikkelen.’

Een multidisciplinair en zelfsturend team is de basis van SCRUM. Een SCRUM-team bestaat bij Netvlies uit:

de ProductOwner - een vertegenwoordiger van de klant die een eigen bureau krijgt op het kantoor van Netvlies.

De ScrumMaster - de coach en begeleider van het SCRUM-team.

Strateeg - degene die (meestal samen met de Scrum Master) in een aantal Strategische Sessies samen met de klant de strategie voor het ontwerp van de website neerzet.

UI/UXDesigner - degene die het ontwerp van de website of webapplicatie maakt.

Front-end develloper - Degene die het ontwerp van de website omzet in code.

Back-enddevelloper -Degene die ‘de achterkant’ van het onwerp van de website omzet in code, meestal zodat de website volledig beheerbaar gaat worden voor de klant.

Tester - Degene die het werk van de Front-end- en Back-end devellopers ‘kapot’ probeert te maken.

Een SCRUM-project bij Netvlies gaat over het algemeen als volgt te werk: Het eerste deel van het traject staat in het teken van het bepalen van de strategie. De Scrum Master en de strateeg maken samen met de klant persona’s, customer jobs, pains en gains en uiteindeijk customer journeys. Vaak wordt de UI/UX Designer van het team ook bij deze sessies betrokken. Op deze manier kan zowel de vakvaardige kennis van het SCRUM-team als de kennis en wensen van de klant gebruikt worden om vanuit de gebruiker van de klant de strategie te bepalen. De Scrum-Master leidt de strategische sessies en zorgt ervoor dat de uitkomsten efficiënt verwerkt worden.

Wanneer de strategie is bepaald, kan de UI/UX Designer aan de slag met het eerste ontwerp van de website. De meest belangrijke - en complexe - pagina’s worden gemaakt in wireframes. Daarbij wordt er een huisstijl bepaald. Dit alles wordt in een presentatie voorgelegd aan de klant.

Wanneer alles akkoord is, is het aan de klant om een zogenaamde Backlog in te richten. Een Backlog is een document waarin alle wensen wat betreft de website vanuit verschillende stakeholders worden verzameld. Hierbij kun je denken aan: ‘Als klant van AXON wil ik snel contact kunnen opnemen met een expert.’

Vervolgens vindt er een Planning Poker Sessie plaats. www.scrum.nl legt de inhoud van deze sessie als volgt uit: ‘Planning poker is een format om een relatieve schatting te maken van de ‘ implementati- on effort’ van een Product backlog item. Het gaat hierbij vooral om de conversatie. Iedereen geeft door middel van kaarten aan hoeveel werk een Backlog Item inhoudt. Verschillen in die inschatting worden besproken waarna het kaarten zich herhaalt totdat er consensus wordt bereikt. De discussie die deze

(7)

hoeveel story points er ongeveer in een sprint verwerkt kunnen worden. Een item uit de backlog dat relatief snel gerealiseerd kan worden, krijgt bijvoorbeeld slechts 2 story points. Wanneer en item uit de backlog veel tijd in beslag gaat nemen en veel risico met zich meebrengt, krijgt dit item bijvoorbeeld 40 storypoints.

Op basis van prioriteit en aantal storypoints worden de items uit de backlog - wederom samen met de Product Owner - verdeeld over het aantal sprints dat begroot is. Bij de start van de sprint begint het daadwerkelijk bouwen van de website volgens de strategie uit de strategische sessies en het onwerp van de UI/UX Designer. In afbeelding 1 heeft Netvlies schematisch weergegeven hoe een design sprint eruit ziet.

Zoals te zien in de afbeelding hierboven, start de sprint met een deel uit de Backlog dat de hoogste prioriteit heeft. De sprint zelf duurft 2 tot 3 weken. Dagelijks wordt er tijdens de Daily Standup door alle leden uit het SCRUM-team teruggekoppeld naar wat hij/zij heeft gedaan, wat hij/zij gaat doen en waar hij/zij tegenaan loopt. Dit fenomeen heet een ‘Standup’ omdat alle leden van het team daadwerkelijk in een kringetje staan tijdens deze kleine meeting.

Na de sprint dient er een deel van de website werkend en af te zijn. De Product Owner is tijdens de sprint aanwezig om waar nodig bij te sturen en terug te koppelen. Op deze manier komt de klant tijdens de eindpresentatie(s) nooit voor verrassingen te staan.

Het SCRUM-team werkt tijdens de sprint met een zogenaamd SCRUM-board. Dit is - in het geval van Netvlies - een groot whiteboard dat verdeeld wordt over vier kolommen: to do, doing, to verify en done. Hiertegenover worden de user stories uit de Backlog geplaatst. Ieder lid van het team heeft zijn/haar eigen kleur post-its, waarop hij/zij de elementen uit de user stories schrijft. De post-its van ieder teamlid worden op het SCRUM-board geplaatst.

Afb. 1 - Sprint overzicht (Netvlies)

(8)

Afb. 2 - SCRUM-board (Netvlies)

Elk teamlid verplaatst zijn/haar post-its binnen het SCRUM-board wanneer deze vooruitgang heeft gemaakt. Afbeelding 2 geeft een dergelijk SCRUM-board weer. Ook het SCRUM-board draagt bij aan de efficiënte en heldere samenwerking van het SCRUM-team.

De elementen van SCRUM die zijn besproken in dit hoofdstuk, bedragen de speerpunten die nodig zijn om de methode te begrijpen.

(9)

Stageverslag 31/01/2017 - 30/06/2017

3. Eigen rol en werkzaamheden

Mijn eigen rol en werkzaamheden binnen Netvlies ga ik toelichten aan de hand van een chronologi- sche structuur. Zoals bij hoofdstuk 5.1 Leerdoelen (P.O.P.) wordt verteld, heb ik mijn werkzaamheden binnen Netvlies bijgehouden in een Google Excel Sheet en heb ik deze gelijk gekoppeld aan de doelen uit mijn Persoonlijk Ontwikkelings Plan.

Ik heb me bij Netvlies - naast de stageopdracht waar 50% van de stagetijd aan gewijd is (zie hoofdstuk 4: stageopdracht) - beziggehouden met zowel een aantal kleine opdrachten als een aantal meer uitgebreide opdrachten.

Betrokken bij daily stand-up van project Unilux

stageweek 1 tot en met 4 1 en 4doel

WERKZAAMHEID PROJECT

Unilux is een bedrijf dat zich specialiseert in maatwerk insecten- en zonwering oplossingen. De eerste weken van mijn stageperiode was mijn stagebegeleider - Freek Gerritsen - Scrum Master van dit project. Het bureau dat ik toegewezen heb gekregen is het bureau naast het bureau van Freek.

Het leek mij een goede start van mijn stage om gelijk initiatief te tonen en mezelf bij de daily standup van dit project te betrekken.

Hoewel ik weinig snapte van wat mijn collega’s tijdens deze standup vertelden (en ik zelf dan ook in elke ronde overgeslagen werd omdat ik niet daadwerkelijk betrokken was bij dit project) vond ik het interessant om de dagelijkse pains, gains, vervolgstappen en maatregelen van dit ontwerpteam mee te krijgen.

8

(10)

Boek doorgenomen:

‘Get Agile!’

stageweek doel 1

WERKZAAMHEID PROJECT 4

Een van mijn eerste werkzaamheden bij Netlvies hield het doornemen van het boek ‘Get Agile!’ in, op aanraden van mijn stagebegeleider Freek Gerritsen. Dit is dan ook waar ik me mijn eerste stageweek deels mee bezig heb gehouden. Het is fijn om te beginnen met ‘basiskennis’ voordat ik in de praktijk aan de slag ga. Alhoewel ik niet het gehele boek tot in detail heb gelezen, vond ik het een goed begin van deze stageperiode.

Afb. 4 - Cover van het boek ‘Get Agile!’

(11)

Logo’s aanpassen (rompertjes)

Een kleine opdracht die toevallig voorbij kwam en voor mij interessant was, was het aanpassen van logo’s van bestaande klanten van Netvlies, om deze vervolgens op een rompertje te printen. Dit is iets wat Netvlies al een tijdje doet op het moment dat een medewerkster van een online parter zwanger is. Aan mij de taak om de logo’s van twee online partners van Netvlies - Alvero en Nauta- dutilh - aan te passen en daarbij iets van beïnvloeding van een baby erin te verwerken.

Ook de logo’s van Netvlies en HelloWorkSpace mochten deze ‘transformatie’ ondergaan, om op de achterkant van het rompertje te printen.

Ik ben begonnen met de logo’s van Netvlies en HelloWorkSpace en heb hierbij gebruik gemaakt van het programma Adobe Illustrator.

Zoals in afbeelding 5 en 6 te zien is, heb ik wat betreft deze logo’s voornamelijk gespeeld met tekstuele aanpassingen, waarbij de stijl van het logo zelf intact blijft.

Bij de logo’s van Alvero en Nautadutilh ben ik wat meer gaan spelen met de beeldende elementen die verwerkt zitten in het logo.

Ondanks dat dit een niet heel uitdagende opdracht was die ook vrij weinig met User Interface Design en User Experience Design te maken heeft, vond ik dit een leuke kleine opdracht om tussendoor aan te werken. Ik kon er namelijk wel mijn creativiteit in kwijt.

Afb. 5 - Aangepaste logo van Netvlies

Afb. 6 - Aangepaste logo van HelloWorkSpace

(12)

Ik heb de aanpaste logo’s in de gewenste bestandsvormen aangeleverd en hierdoor ook nog het een en ander bijgeleerd over het programma Adobe Illustrator. Vervolgens heeft Freek de rompers ‘opgemaakt’ en besteld.

Een aantal weken later kreeg ik een screenshot van Freek doorgestuurd van het facebookbericht dat te zien is op afbeelding 9. Dit vond ik super leuk om te lezen. Het geeft altijd een goed gevoel om iets terug te krijgen voor het werk dat je hebt gedaan.

Afb. 8 - Aangepaste logo van Nautadutilh

Afb. 9 - Facebookbericht van Alvero

Afb. 10 - Facebookbericht van Alvero (detail)

(13)

Ontwerp Chasse Theater (sociale bewijskracht)

stageweek 1 en 2 3 en 5doel

Aangezien mijn stagebegeleider het tijdens mijn eerste stageweken erg druk had, heeft hij weinig tijd gehad mij te begeleiden en geschikte opdrachten voor mij te vinden. Vandaar dat ik meteen in het diepe ben gegooid wat betreft verantwoordelijkeheid en initiatief nemen. Dit is dan ook wat ik heb gedaan. Ik heb Karsten - een collega die zich voornamelijk bezig houdt met UI/UX - aan de mouw getrokken met de vraag of hij misschien nog een leuke opdracht voor mij zou kunnen bedenken.

Karsten was destijds bezig met het voorbereiden van een aankomende sprint voor het Chasse Thea- ter.

Zoals reeds gezegd, werkt Netvlies met een backlog waarin user-stories op prioriteit gesorteerd staan. User-stories zijn elementen die vanuit een bepaalde stakeholder binnen het project gerealiseerd dienen te worden. Karsten heeft mij een user-storie toegewezen die erg leuk en uitdagend is om uit te werken, maar redelijk laag op de prioriteiten lijst staat. Dit snapte ik natuurlijk volkomen.

Het was mijn eerste stageweek, dus ik verwachte absoluut niet dat ik meteen opdrachten zou uitwerken die daadwerkelijk aan bod zouden komen om te realiseren.

Aan de hand van deze opdracht heb ik kennis gemaakt met het programma Sketch. Doel nummer 3 uit mijn P.O.P. houdt in dat ik mezelf ga dwingen ontwerpproblemen op te lossen aan de hand van het programma Sketch. Sketch is een ontwerpprogramma dat door de designers binnen Netvlies standaard wordt gebruik voor het ontwerpen van de webpagina’s, vandaar dat ik dit doel heb gesteld.

Afb. 11 - Logo van Sketch

Ik heb deze ontwerpopdracht aangepakt volgens de methode die ik tijdens mijn Informatie&Interactie verdiepings- semester (CMD J3S2) bij de module ‘Informatieontwerp’

heb geleerd. Deze methode houdt in dat je werkt vanuit een persona die bepaalde vragen en behoeftes heeft. Vanuit deze vragen en behoeftes wordt er een scenario beschreven waarbij de persona gebruik maakt van hetgeen wat je ontwerp.

Waar zou de persona tegenaan kunnen lopen? Welke vragen zouden er bij de persona opkomen? Welke behoeftes hebben meer prioriteit en welke minder?

Afb. 12 - de ‘Linda-persona’

(14)

Evie van den Munckhof Stagiaire Netvlies 1/02/2017

HET SCENARIO

Zouden de cabaretvoorstellingen zich onder het kopje ‘theater’

bevinden?

Zijn er recensies over de huidige voorstellingen in hin het alge- meen?

Ik zie op de meeste detailpagina’s van cabaretvoorstellingen geen recensies.

Hoe weet ik nu of ik een leuke voorstelling ga bezoeken wanneer ik hier blin- delings kaartjes voor bestel?

Ik heb een voorstelling gevonden met twee recensies van de Volkskrant en het NRC. Ik haal niet veel wijsheid uit deze recensies. Wat zou een simpele bezoeker als ik over deze voor- stelling te zeggen hebben?

Wat zouden deze vrien- den van de voorstelling vinden?

Welke cabaretvoorstellingen hebben andere bezoekers bekeken?

Ik zie wat voorstellingen in een top-4 onder een kopje ‘populair’.

Wie zou hebben bepaald dat deze voorstellingen populair zijn?

Zouden deze voorstellingen misschien eerder staan voor ‘meest bezocht’? Ik heb namelijk nog nooit van ‘de marathon’ ge- hoord… Of houd ik de actualiteit niet genoeg bij?

Wat zou het Chassé onder dit kopje zetten wanneer er geen populaire voorstellingen zijn?

Zouden vrienden uit mijn sociale netwerk deze voor- stellingen hebben bezocht?

Welke soort bezoekers hebben dezelfde cabaretvoorstellingen bekeken als ik?

Waar kan ik de recensies vinden?

Afbeelding 13 laat een mapping zien van hoe de persona Linda - die reeds is gemaakt door Netvlies in een eerder traject - de website van het Chasse Theater betreedt met als doel om recensies van een bepaalde film te lezen. Hierbij gaat het vooral om de stappen die Linda onderneemt en waar ze tegenaan loopt in dit proces.

Afb. 13 - Customer Journey mapping van de Linda-persona met als scenario ‘bekijk de recensies van een populaire film’.

De user-storie die door Karsten aan mij is toegewezen, had namelijk te maken met het integreren van een aantal elementen uit de Sociale Bewijskracht theorie. Hierbij kun je denken aan zoeksuggesties, ratings en het laten zien van schaarste (‘nog maar 1 plek beschikbaar’).

Ik heb aan de hand van de customer journey van afbeelding 13 een scenario geschreven.

De vragen die de Linda-persona had

Afb. 14 - Informatiebehoefte mapping

naar aanleiding van dit scenario heb ik in kaart gebracht aan de hand van een informatiebehoefte mapping. Deze is in miniatuur-weergave te zien in afbeelding 14. In deze mapping worden de vragen

(15)

Zoals te zien in bovenstaande afbeeldingen, ging het werken met Sketch aardig goed. Het is een simpel programma en ik snapte de ‘flow’ vrij snel. Ik heb de bestaande pagina’s zo gedetailleerd mogelijk nagemaakt en heb deze vervolgens omgevormd in mijn eigen ontwerp waarin sociale bewijskracht de overhand heeft.

Ik heb wat betreft deze ontwerpen feedback gevraagd aan zowel Karsten als Melissa - een andere collega die zich specialiseert in UI/UX. Zij hebben beiden de tijd genomen om mijn ontwerp te bekijken en mij te voorzien van feedback. De feedback die ik kreeg was globaal gezien dat sociale bewijskracht in dit ontwerp iets te schreeuwerig en te aanwezig is ingezet. Wanneer ik een tussen- weg zou vinden tussen de huidige website en dit ontwerp, zou de mate van aanwezigheid van sociale bewijkracht perfect zijn.

Karsten en Melissa hebben beide op een hele prettige manier feedback gegeven. Ze waren kritisch, maar brachten dit op een niet-kritische manier. Ik heb het gevoel al veel geleerd te hebben van deze ervaring. Ik ben gelijk aan de slag gegaan met het maken van een herontwerop. Afbeeldingen 18, 19 en 20 geven het resultaat van dit herontwerp weer.

Ook dit ontwerp heb ik wederom besproken met Melissa. Ze was er erg over te spreken en zei dat ze het erg leuk vind om te zien dat ik haar advies heb opgevolgd en goed heb ingezet.

Afb. 15 - Ontwerp homepagina

Afb. 16 - Ontwerp voorstelling overzicht

Afb. 17 - Ontwerp voorstelling detail

(16)

Afb. 18 - Herontwerp homepagina

Afb. 19 - Herontwerp voorstelling overzicht

Afb. 20 - Herontwerp voorstelling detail

Tijdens de Planning Poker die aansluitend aan deze opdracht plaatsvond, zouden deze ontwerpen voorgesteld kunnen worden aan Geesje Prins - de product owner vanuit het Chasse Theater.

Zie het volgende onderdeel in dit hoofdstuk voor het vervolg op dit verhaal.

(17)

Betrokken bij Plan- ning Poker Chasse Theater

2 en 4

De Planning Poker Sessie voor een sprint voor het Chasse Theater, is de eerste Planning Poker Ses- sie waarbij ik binnen Netvlies ben betrokken.

Kort toegelicht, houdt een Planning Poker Sessie in dat de vooraf gemaakte user-stories (concrete aspecten die aangepast of toegevoegd moeten worden aan de huidige website, altijd geformuleerd vanuit de gebruiker) worden ingeschat op zowel prioriteit als moeilijkheidsgraad. Deze moeilijkheidsgraad ligt voornamelijk aan de hoeveelheid tijd die nodig is om de user-story te realiseren. De prioritering en moeilijkheidsgraad worden vertaald in een aantal story-points.

Netvlies weet ongeveer hoeveel story-points er in totaal in een sprint passen. Op deze manier kan er vooraf een concrete en realistische planning worden gemaakt, waardoor zeer waarschijnlijk de deadline wordt gehaald en het budget niet overschreden hoeft te worden.

Dit soort sessie wordt Planning Poker genoemd, omdat iedere aanwezige een setje kaarten krijgt.

Op iedere kaart staat een aantal story-points. Bij elke user-storie die besproken wordt, schat iedere aanwezige deze in wat betreft moeilijkheidsgraad, door een kaart op te gooien. Wanneer het getal op de kaart vrijwel bij alle aanwezigen hetzelfde is, weet je dat iedereen op een lijn zit. Wanneer de een bijvoorbeeld voor 40 story-points en de ander voor 2 story-points, weet je dat er ergens iets mis-geïnterpreteerd is.

Afb. 21 - Sfeerimpressie van een Planning Poker sessie

Het was erg leuk om deze Planning Po- ker Sessie te mogen bijwonen. Geesje Prins, de Product Owner van het Chas- se Theater, nam mijn aanwezigheid serieus. Ze toonde interesse in hetgeen dat ik de eerste weken bij Netvlies voor het Chasse Theater had geaan.

Ik ben van mening dat een Planning Poker Sessie een efficiënte methode is om een concrete en realistische planning te kunnen maken.

(18)

Gebruikerstest mo- biele website Chasse Theater

stageweek 2 en 3 3 en 5doel

Aansluitend aan het mogen bijwonen van de Planning Poker Sessie voor het Chasse Theater volgde een gesprek met Geesje Prins: de Product Owner van het Chasse theater.

Thijs - een medestudent vanuit CMD die ook stage loopt bij Netvlies - en ik hadden het idee om een gebruikerstest uit te voeren voor het Chasse Theater. Het zou hierbij gaan om een gebruikerstest betreffende de werking van de filterfunctie bij de mobiele versie van de website. Geesje reageerde hier erg enthousiast op, wat betekende dat Thijs en ik aan de slag konden gaan.

Er is afgesproken dat Thijs en ik afzonder- lijk zouden gaan werken aan een herontwerp van de filterfunctie van de mobiele website van het Chasse Theater. Vervol- gens zouden we deze ontwerpen naast elkaar leggen en samen tot een definitief herontwerp komen.

Ik ben begonnen met het na-ontwerpen van de huidige mobiele versie van de website van het chasse theater in - wederom - het ontwerpprogramma Sketch.

Vervolgens heb bepaalde elementen aangepast en hier en daar elementen toegevoegd. Zoals te zien in afbeelding 23 en 24, heb ik gekozen voor een zeer uitgebreide filterfunctie die in een nieuw venster over de huidige pagina verschijnt wanneer je op de knop ‘stel filter in’ zou drukken.

Het meest belangrijke aspect van dit ontwerp, is het ontwerp van het filterelement waarmee de gebruiker een maand en datum kan selecteren. Deze wordt in afbeelding 25 vergroot weergegeven.

Afb. 22, 23 en 24 - Heront- werp filterfunctie mobiele website Chasse Theater

(19)

Ik heb gericht gekozen voor de knoppen ‘vandaag’

en ‘morgen’ boven het selecteren van een specifie- ke datum. Daarbij heb ik voor de maand-selectie gekozen voor een dropdown-menu. De selectie van de gewenste dag binnen de gekozen maand dient te gebeuren aan de hand van een swipe-interactie. Van belang is dat de ‘dagnaam’ vermeld wordt: ‘woens- dag 01 feb’ in plaats van ‘01 feb’.

Het zal namelijk vaker voorkomen dat het taaks- cenario van de gebuiker ‘Ik wil komende zaterdag een voorstelling bekijken’, dan ‘Ik wil op 4 februari een

voorstelling bekijken’. Ook Thijs heeft individueel een herontwerp voor deze filterfunctie gemaakt.

We hebben beiden ontwerpen naast elkaar gelegd en besproken welke elementen we willen toepassen en welke elementen we willen laten voor wat het is.

Uiteindelijk zijn we gekomen tot het ontwerop dat wordt weergegeven in afbeelding 27. Afbeelding 26 geeft het ontwerp van de huidige filterfunctie van de mobiele website van het Chasse Theater weer. Op de volgende pagina worden alle herontworpen elementen nader besproken.

Afb. 25 - Uitgelicht filter-element: datum selecteren

Afb. 26 - Huidige versie filterfunctie Afb. 27 - Herontworpen filterfunctie (samenvoeging ontwerp Thijs en Evie)

(20)

Het filterelement waarmee de datum en het genre wordt geselecteerd is deels overgenomen uit het door mij ontwerpen herontwerp. Zoals te zien hebben Thijs en ik gekozen voor stijl die beter bij de huisstijl van het Chasse Theater past. De gewenste swipe-interactie geldt ook voor dit ontwerp.

Aangezien het een aaname is dat de gebruiker behoefte heeft aan meer filters, hebben Thijs en ik ervoor gekozen een

‘Meer filters’-knop toe te voegen. Op deze manier hoeven we niet daadwerkelijk meer filters te ontwerpen, maar kunnen we simpelweg testen of de gebruiker er überhaupt op zal drukken.

Er is gekozen om onder het filter-blok een blok met filtersuggesties toe te voegen.Het is een aanname dat de gebruiker hier behoefte aan gaat hebben. Deze aanname kan echter wel gemakkelijk getest

worden. Op het moment dat de filterfunc-

tie door de gebruiker naar wens is ingesteld, zal de titel die boven het programma-aanbod staat zich aanpassen naar de door de gebruiker ingestelde filter. In dit voorbeeld staat er ‘Alle genres, vanaf vadaag’ aangezien er nog geen filter in ingesteld.

Na het omzetten naar een werkende code van dit ontwerp, het opstellen van een helder taakscena- rio en een concrete voorbereiding wat betreft plaats, apparatuur en logistiek kon de daadwerkelijke gebruikerstest worden ingepland.

(21)

De gebruikerstest is uitgevoerd op het station van Breda. Hier- voor is gekozen aangezien het station vol zit met een verscheidenheid aan mensen. Dit aanne- mend, zal ook vast de doelgroep van het Chasse Theater op het station van Breda te vinden zijn.

Deze aaname werd gelukkig bevestigd. Vijf testpersonen hebben de gebruikerstest uitgevoerd. De leeftijd van de testpersonen varieerde tussen 30+ en 80+. Ook gaf vier van de vijf testpersonen aan regelmatig het Chasse Theater in Breda te bezoeken.

De tabellen die hier worden weergegeven vertegenwoordigen de resultaten die uit de gebruikerstest zijn gerold.

Zonder al te uitgebreid in te gaan op deze resultatien, kan ik zeggen dat de test geslaagd is. De voorkeur van vier van de vijf testpersonen gaan naar het herontwerp van de filterfunctie.

Voornamelijk de interactie waarbij gewenst is dat de testpersoon een ‘swipe-beweging’ maakt om de datum en het genre te selecteren werkte verbluffend goed. Dit is niet iets wat je zou verwachten bij een doelgroep die voornamelijk 50+

is.

Tabel 1, 2, 3 en 4 - Resultaten gebruikerstest filterfuncite Chasse Theater

(22)

De voorbereiding, uitvoering en conclusies&aanbevelingen van deze gebruikerstest zijn gedocu- menteerd in een afzonderlijke rapportage. Het heeft even op zich laten wachten, maar uiteindelijk zijn de resultaten en bevindingen besproken met Geesje prins - de Product Owner van het Chasse Theater.

Geesje was erg te spreken over de uitkomsten van de gebruikerstest. Ze heeft aangegeven ervoer na te denken dit herontwerp van de filterfunctie te integreren in de komende sprint die in samenwerking met Netvlies zal plaatsvinden.

Of Geesje hier heeft gezegd wat ze dacht dat Thijs en ik graag wilde horen of daadwerkelijk plannen heeft de uitkomsten van deze gebruikerstest te implementeren in de website van het Chasse Thea- ter, is iets wat ik niet met zekerheid kan zeggen.

Wel heb ik door alle feedback van zowel Freek, Thomas als Geesje wat betreft deze gebruikerstest veel geleerd wat betreft het uitvoeren van gebruikerstesten. Zo heb ik bijvoorbeeld geleerd dat er bij de voorbereiding van een dergelijke test veel meer komt kijken dan men in eerste instantie zou denken. Daarbij blijkt het lastig om mensen aan te spreken met de vraag of ze iets voor je willen doen.

Echter, wanneer je dit op een bepaalde manier doet - en merkt dat je er een feeling voor krijgt - merk je dat men steeds sneller geneigd is te participeren aan een dergelijke gebruikerstet.

(23)

Stageopdracht Travel Active

stageweek 3 tot en met 20 1, 2, 3, 4 en 5doel

Er dient maar liefst 50% van de stage tijd gespendeerd te worden aan de stageopdracht. Aangezien deze stageopdracht een uitgebreid project is met veel ontwerpproces, heb ik ervoor gekozen de stageopdracht te documenteren in de vorm van een ontwerprapportage zoals ik dat bij de CMD-projecten ook heb gedaan.

Deze ontwerprapportage is dus te zien als een geheel op zichzelf staand document dat zal worden geleverd samen met het stageverslag. De ontwerprapportage bevat een eigen samenvatting, inleiding, inhoudsopgave, content, evaluatie en bronnen/bijlagen.

(24)

Betrokken bij project AXON

stageweek 6 tot en met 20 1, 2, 3, 4 en 5doel

Ik ben op initiatief van mijn stagebegeleider Freek betrokken bij de kick-off sessie met het bedrijf Axon (Digital Design). Netvlies gaat in opdracht voor Axon een nieuwe website maken, waarbij ook een nieuwe online strategie zal worden bepaald. Ik ben het hele proces (van kick-off naar livegang) betrokken. Ik denk dat ik op deze manier heel goed de werkwijze en flow van Netvlies ga begrijpen.

Het SCRUM-team dat dit project op zich gaat nemen, bestaat uit Freek (de Scrum-Master), Joey (de strateeg), Melissa (de designer), Laurens (de back-end developer), Przemek (de front-end developer), Frederic (de tester) en ik. Later is Hugo toegevoegd aan het SCRUM-team als Scrum-Master, aangezien Freek Netvlies per 15 juni gaat verlaten voor een kan bij CoolBlue. Vanaf het moment dat Hugo de rol van Scrum-Master op zich heeft genomen binnen dit project, dient Freek als begeleidend Scrum-Master.

Kick-off- en strategische sessies

Een project met een nieuwe klant begint met een Kick-off sessie. Tijdens deze sessie zijn een aantal vertegenwoordigers vanuit Axon en het strategie-team (in dit geval Freek en Joey) aanwezig. Deze sessie heeft als voornaamste reden niet alleen kennis maken met elkaar, maar voornamelijk kennis maken met het bedrijf Axon. Waar staat Axon voor? Welke diensten/producten leveren ze precies?

Hoe zit de bedrijfsstrategie in elkaar? Hoe ziet de klant van Axon eruit?

Axon is een bedrijf gelegen in de buurt van Tilburg, dat voornamelijk broadcast oplossingen biedt aan de hand van door hen ontworpen producten. Hetgeen wat Axon onderscheidt van de concur- rent, is dat ze op maat gemaakte oplossingen kunnen bieden. Alle Axon-producten staan niet enkel op zichzelf, maar kunnen ook met elkaar gecombineerd worden om zo strategisch samen te werken en het gewenste resultaat te bereiken. Daarbij voorziet Axon haart klanten van een uitgebreide en klantvriendelijke support service.

Het begrijpen van de bedrijsstrategie en de hele jungle van de broadcast-wereld van Axon is een uitdaging apart. Ik heb me goed moeten concentreren tijdens de kick-off- en strategisch sessies om compleet te begrijpen wat Axon precies doet en voor wie Axon dit precies doet. Met name het oerwoud aan productgroepen, producten, subproductgroepen en subproducten is iets wat - voornamelijk voor een buitenstaander - moeilijk te begrijpen is.

(25)

Dit oerwoud temmen naar een overzichtelijk geheel is dan ook de uitdaging die dit SCRUM-team te wachten staat.

Tijdens de twee strategische sessies die ik heb mogen bijwonen zijn de jobs, pains en gains van een tweetal persona’s bepaald. Ook is er een duidelijke customer journey samengesteld. Freek en Joey hebben - naar mijn mening - goed werk neergezet om uit het oerwoud aan informatie een heldere online strategie neer te zetten.

Ikzelf vond het erg interessant en leerzaam om betrokken te worden bij deze strategische sessies. Ik werd behandeld als een volwaardig lid van de sessie, wat wil zeggen dat er ook input vanuit mij werd verwacht en tevens werd gebruikt.

Na de twee sessies heb ik de ruwe data (foto’s van de muur waarop alle post-it’s geplaatst zijn) omgezet naar een heldere digitale omgeving, via het online programma ‘realtimeboard’. Ik heb al eens eerder met dit programma gewerkt, waardoor dit voor mij geen uitdaging is geweest. Zie afbeelding 30 en 31 blabla voor de realtimeboard-omgeving die ik voor Axon heb gevuld.

Afb. 30 - Persona’s realtimeboard-omgeving Axon

Afb. 31 -Value Propesition Canvas realtimeboard-omgeving Axon

De online strategie die uit de strategische sessies is ontstaan luidt: het creëren en onderhouden van klantrelaties van zowel de service- als system engineer. Kort door de bocht moet de websites ervoor gaan zorgen dat de klant zo snel mogelijk met Axon rond te tafel gaat zitten om vragen te beantwoorden en wellicht een klantrelatie aan te gaan.

(26)

Design

Op het moment dat de online strategie is bepaald, komt de designer van het SCRUM-team om de hoek kijken, in dit geval: Melissa. Freek en Melissa hebben mij zoveel mogelijk betrokken met de korte schetssessies van de wireframes van de meest belangrijke pagina’s van de website. Daarbij is er uit de strategische sessies bepaald dat de acht verschillende productgroepen van Axon een icoon zullen krijgen om herkenbaarheid te creëren. Samen met Freek en Melissa is er afgesproken dat ik het ontwerop van deze iconen op me neem: een opdracht die ik erg leuk vindt om uit te voeren.

Ik ben begonnen met het nemen van de originele foto’s van de productgroepen, zoals Axon die op de huidige website presenteert. Ik heb geschetst in welke mate van ‘detail’ (of juist abstrahering) ik wilde dat de iconen eruit zouden komen te zien. Zie afbeelding 32 tot en met 35 voor een sfeerimpressie van deze schetsen.

Vervolgens ben ik aan de slag gegaan met het ontwerpen van de iconen in Adobe Illustrator. In hetzelfde bestand heb ik een klein stijlonderzoek wat betreft opvullingen, lijndiktes en kleur. Afbeel- ding 36 tot en met 40 geven het resultaat van dit stijlonderzoek weer.

Zoals te zien in deze afbeeldingen, ben ik vrij letterlijk te werk gegaan. Ik heb de fysieke producten (of productgroepen) van Axon genomen en heb deze geabstraheerd tot een icoon dat deze productgroep zou moeten vertegenwoordigen. Om de stijl van de iconen af te stemmen met de stijlbepaling voor de webiste van Melissa, is er gekozen voor de stijl van de iconen zoals weergegeven in afbeelding 42. Aangezien de iconen an sich nog een verbeterslag konden gebruiken wat betreft

Afb. 32 - schetsen iconen Axon Afb. 33 - schetsen iconen Axon

Afb. 34 - schetsen iconen Axon Afb. 35 - schetsen iconen Axon

(27)

Afb. 36 tot en met 40 - stijlonderzoek iconen Axon

Wat betreft de stijlbepaling en het ontwerp van de meest belangrijke pagina’s an sich, heb ik een aantal keer met Melissa samengezeten om te sparren over ideeën en aanpassingen. Melissa luister- de tijdens deze meetings oprecht naar mijn mening, ook al weet ze dat ik als student nog veel moet leren. Daarbij heb ik het eerste ontwerp gemaakt voor de standaard tekstpagina van de website van Axon. Uiteraard heeft Melissa mij voorzien van feedback en heb ik aan de hand van deze feedback het ontwerp verbeterd.

Zie afbeeling 43 voor de standaard tekstpagina die ik heb ontworden aan de hand van Sketch. Let wel: veel van de componenten die te zien zijn in deze pagina zijn reeds ontworpen door Melissa. Het- geen dat ik daadwerkelijk heb ontworpen aan deze pagina, is de indeling van deze componenten.

(28)

Vervolgens is het geheel (de strategie en de stijlbepaling van de website van Axon - ontworpen door Meliss) gepresenteerd aan een aantal vertegenwoordigers vanuit Axon. Ik moet zeggen dat ik beetje zenuwachtig was wat betreft het oordeel over de iconen. De stijl van deze iconen of überhaupt wat

Afb. 41 - Resultaat ontwerp iconen Axon (Design Presentatie)

(29)

De strategie en de stijlbepaling bleken na deze presentatie akkoord vanuit Axon. Echter had Axon zich de iconen - helaas - anders voorgesteld. Dit bete- kent dat de iconen overnieuw ontworpen dienen te worden.

Ik kan eerlijk toegeven dat ik dit best wel jammer heb gevonden. Het idee dat door mij ontworpen iconen - zonder afstemming met de klant - gebruikt zouden worden voor een website die daadwerkelijk live komt te staan en hopelijk veel bezocht gaat worden maakte mij razend enthousiast.

Echter is dit natuurlijk ook een goed leermoment voor mij: de klant blijft koning. Het wordt de website van Axon en niet de website van Evie: Axon moet de iconen gaan vertegenwoordigen, wat bete- kent dat het belangrijk is dat zij erachter staan.

Afb. 42 - Iconen geïnfrilteerd in ontwerp van Melissa Afb. 43 - Ontwerp standaard tekstpagina

(30)

Sprint 1

Na de presentatie waarbij Axon akkoord is gegaan wat betreft de strategie en de stijlbepaling van de website, is de eerste sprint van start gegaan. Deze is begonnen met een Planning Poker Ses- sie, samen met de Product Owner van Axon die bij Netvlies op kantoor aanwezig zal zijn (Margot Timmermans). Vooraf aan de Planning Poker Sessie hebben alle leden van het SCRUM-team rond de tafel gezeten en heeft ieder van elk teamlid opgeschrijven wat hij/zij van hem/haar verwacht tijdens dit SCRUM-proces.

Naar mijn mening is dit een goede methode om alle verwachtingen helder te hebben. Ook kun je op deze manier gemakkelijk terugvallen op de gemaakte afspraken, op het moment dat een teamlid zich er niet aan houdt. Er is door mijn ‘teamleden’ aangegeven dat er vanuit mij een creatieve bij- drage wordt verwacht en dat ik gewoon mijn mond opentrek wanneer ik denk dat ik iets kan toevoe- gen. Ook heeft het team aangegeven mij te zullen ondersteunen in mijn leerproces. Dit voelde erg goed om te horen.

Na de Planning Poker Sessie zijn Margot en Jelle (beiden van Axon) samen met mij en Melissa gaan zitten om af te stellen wat er gewenst is voor de iconen. Blijkbaar heeft Axon in al haar brochures van de verschillende producten en productgroepen reeds iconen gebruikt, die ze graag in de website willen laten terugkomen. Dit snap ik volkomen: het is als merk erg belangrijk om eenheid te creëren, wat wilt zeggen dat je consequent om dient te gaan met opvallende stijlbepalingen.

Jelle heeft mij een mapje gestuurd waarin van internet afgeplukte iconen stonden. Er was namelijk al afgestemd welk icoon bij welke productgroep komt te staan. Vervolgens was het aan mij de taak dit ‘zooitje’ aan verschillende iconen (afbeelding 44) te herontweropen tot bruikbare iconen in exact dezelfde stijl (afbeelding 45).

Afb. 44 - Iconen zoals aangeleverd vanuit Axon

(31)

Ondanks dat ik het zelf niet eens ben met de keuze voor deze iconen ben ik alsnog blij dat Axon met dit ontwerp akkoord is gegaan. Er zullen dan geen iconen online komen te staan die ik daadwerkelijk from scratch heb ontworpen, maar in ieder geval wel iconen die ik gefaciliteerd heb.

Ik ben het niet eens met de keuze van Axon, aangezien een aantal van de iconen uit deze set een hele letterlijke betekenis hebben (ze verbeelden letterlijk het product; zoals de koptelefoon, de camera en de multiviewer) terwijl andere iconen uit deze set weer een hele symbolische betekenis hebben (zoals de hersenen, het oog en de puzzelstukjes). De overige iconen zijn dan juist weer indexicale tekens (de schijf en de pijlen): deze verwijzen naar een bepaald aspect van het product.

Wanneer ik het laatste woord zou hebben, zou ik er voor kiezen óf allemaal iconen te gebruiken, óf allemaal symbolen te gebruiken óf allemaal indexen te gebruiken. Echter heb ik - gelukkig - niet het laatste woord en ben ik - zoals gezegd - blij dat Axon akkoord is met deze iconen.

Sprint 2

De tweede sprint is wederom begonnen met een Planning Poker Sessie waarbij er storypoints zijn toegekend aan de laatste user stories. Aangezien niet aan alle user stories van de eerste print is toegekomen, worden ook deze eerst afgehandeld in sprint 2. Echter denkt het team niet in tijdnood te komen, aangezien de user stories uit sprint 1 die af zijn, gelijk heel grondig zijn gemaakt: heel veel bucks zijn reeds ‘gefixed’.

Toen Margot (de Product Owner) hoorde dat eigenlijk niemand in het team het eens is met de rode achtergrond van de iconen, schrok ze en gaf ze aan graag te willen overwegen om toch voor een andere achtergrond kleur kiezen. Samen met Melissa is er een concessie gemaakt en hebben de iconen nu een grijze achtergrond die - gelukkig - wat minder schreeuwt dan het rood.

Wat betreft sprint 2 en de livegang sprint, heb ik bijna tot geen werkzaamheden voor Axon meer uitgevoerd. Wel ben ik betrokken geweest bij de Daily Standup en ben ik zo op de hoogte gebleven van de vorderingen van het projectteam. Ondanks mijn geringe betrokkenheid in dit stadium van het proces, vind ik het interessant om betrokken te worden bij de vorderingen en tegenslagen van de projectleden van dit SCRUM-team. Het voelt bijna of ik ook echt deel uitmaak van het team. Ik word tijdens de Daily Standup dan ook niet overgeslagen, ookal weet iedereen in de kring dat ik niks te melden heb.

Demo en livegang

Wat betreft de demo van de twee sprints en de laatste livegang sprint, ben ik slechts gering betrokken. Dit komt mede omdat ik de laatste weken van mijn stage druk bezig ben geweest met de andere twee grote projecten die afgerond dienden te worden (Travel Active en Mustad). Ook heb ik helaas niet aanwezig kunnen zijn bij de demo, aangezien ik op deze datum zelf mijn eindpresentatie voor mijn stageopdracht bij Travel Active had.

Wel kan ik zeggen dat het betrokken worden bij het proces van de website voor Axon mij erg heeft geholpen wat betreft het inzicht vergaren over de SCRUM-methode en de bedrijfsmetaliteit an-

30

(32)

Deels ontwerpen en animeren van bannersets voor

Declerq _stageweek

doel 7

Melissa heeft mij gevraagd of ik kan animeren en daarbij interesse heb in het maken van een aantal bannersets. Het gaat om vier bannersets voor Advocaten Notariaat Declerq. Het bedrijf heeft vier categorieën waarin ze zich specialiseren: Arbeid, Medezeggenschap & Pension (1), Vastgoed, Over- heid & Notariaat (2), IT, IE & Privacy (3) en ondernemingsrecht (4). Voor elke categorie diende een bannerset van maar liefst vijf banners van verschillende afmetingen ontworpen en geanimeerd te worden.

Melissa heeft het ontwerp van 1 banner (Arbeid, Medezeggenschap & Pension; 300x250) ontworpen en geanimeerd. Deze heeft ze gestuurd naar Declerq. Op het moment dat ze goedkeurig heeft gekregen voor het ontwerp en de animatie, heeft ze mij aan de slag gezet

Aan mij de opdracht de rest van de banners (in totaal 20) te ontwerpen en te animeren. Afbeelding 46 geeft een indruk van het sketch-bestand waarin ik de banners heb ontworpen. Ik heb me geheel gehouden aan het ontwerp waarop Melissa reeds groen licht had ontvangen vanuit de opdrachtgever.

De grootste uitdaging wat betreft het ontwerp van deze banners,

was het plaatsen van de afbeeldingen. Alle personen op de foto moesten (het liefst in hun geheel) op de foto staan. Daarbij waren de gezichten van de personen op de foto het belangrijkst om prominent in beeld te staan. Bij bepaalde formaten bleek dit best een uitdaging. Na veel knippen, plakken, uitproberen en opnieuw beginnen heb ik de juiste foto’s bij de categorieën kunnen vinden.

Afb. 46 - Sketch bestand bannersets Declerq

(33)

Voor het animeren heeft Melissa mij geïntroduceerd met het programma Google Webdesigner.

Melissa gebruikt dit programma standaard voor het maken van banners, voornamelijk vanwege de handige manier van exporteren. Banners moeten aan een aantal randvoorwaarden voldoen. Zo mogen ze niet langer duren dan 30 seconden en mogen ze niet groter zijn dan 150kb. Google Web- designer houdt van zichzelf al goed rekening met deze twee criteria.

Melissa heeft mij kort uitgelegd hoe ik kan werken met Google Webdesigner. Lang hoefde deze uitleg echter niet te duren. Het programma heeft veel weg van het voor mij bekende programma Adobe After Effects.

Daarbij was de gewenste animatie van de banner erg simpel.

Afb. 48 - Logo Google Web Designer

De uitdaging binnen het animeren van de banners, wat het consequent zijn wat betreft timing en beweging.

Ook waren het vrij veel banners, die allen op dezelfde manier geanimeerd moesten worden. Na een tijdje werd dit vrij hersen- dodend werk. In de eerste versie zijn dan ook een aantal schoonheidsfoutjes gemaakt.

Afb. 49 - Werken in Google Web Designer

Melissa heeft - nadat ik de resultaten heb opgeleverd - elke banner aandachtig bekeken waarna we vervolgens samen alle schoonheidsfoutjes hebben doorlopen. Dit lijstje aan kleine aanpassingen heb ik vervolgens afgewerkt.

Toen we beiden helemaal tevreden waren heeft Melissa het ‘product’ naar de klant gestuurd. Deze heeft laten weten heel erg tevreden te zijn over het resultaat. Ik vind het erg leuk dat ik banners heb gemaakt die ik misschien nog wel ooit ergens voorbij ga zien komen. Daarbij ben ik blij dat wanneer Melissa mij vraagt haar te helpen, ze me super goed ondersteund en voorziet van feedback. Op deze manier ben ik niet alleen bezig met opleveren, maar ook met gericht leren.

(34)

Mobile design web- site Holland Dance Festival

3 en 5

Melissa heeft mij gevraagd haar ontwerp van de desktop website voor Holland Dance Festival om te zetten naar een Mobile Design. Het is bij dit soort opdrachten altijd even passen, meten en spelen met de elementen omdat dezelfde hoeveelheid informatie verwerkt moet gaan worden in aanzien- lijk minder ruimte. Deze opdracht is voor mij perfect om mijn skills met Sketch te verbeteren en veel te leren over UID en UXD.

Afb. 50 - Mobile Design homepagina

(35)

De afbeeldingen die hier staan weergegeven representeren het laatste ontwerp, waarin de feedback vanuit Melissa al in is verwerkt.

Ik heb mijn eerste ontwerp helaas niet geëxporteerd en heb de aanpassingen gedaan in hetzelfde sketch-bestand, waardoor ik het ontwerpproces niet in dit verslag kan laten zien.

Wel kan ik vertellen dat de aanpassingen die zijn doorgevoerd naar aanleiding van de feedback van Melissa slechts gering zijn geweest.

Hetgeen waar ik de meeste moeite mee heb gehad zijn de blokken waarin een voorstelling in het programma-overzicht wordt weergegeven (zie afbeelding 53). Er moet veel informatie verwerkt worden in een relatief weinig ruimte. Daarbij is de foto (de sfeer) leidend, waardoor ook de foto prominent aanwezig moet zijn.

In mijn eerste ontwerp heb ik - om de blokken niet al te groot te laten worden - het lettertype erg klein gemaakt. Tijdens de feedback-sessie bleek dat ik beter had kunnen kiezen voor grotere blokken waardoor het lettertype groter ingesteld kan worden. De tekst die in de blokken staan moet namelijk nog wel goed leesbaar zijn.

Ook heb ik de Planning Poker sessie van Holland Dance Festival bijgewoond. Tijdens deze sessie is met het gehele team (scrum master, design, front-end, back-end en tester) storypoints toegekend aan de werkzaamheden die gepland stonden voor de sprint.

Tijdens deze sessie zijn ook onderdelen uit het mobiele ontwerp voor de website besproken. Ik had het gevoel dat ik serieus werd genomen en vind het wederom erg leuk dat werkzaamheden die ik heb verricht daadwerkelijk gebruikt en verwerkt gaan worden.

Afb. 51 - Mobile Design menu

Wanneer de sprint van start is gegaan, heeft het ‘design-team’ eigenlijk zijn werk erop zitten. Het is tijdens de sprint aan de developpers om het ontwerp te realiseren en te bouwen. Wel heb ik zoveel mogelijk de daily stand-ups voor dit project bijgewoond. Ik vind het interessant om op de hoogte te blijven van de ontwikkelingen. Daarbij is het erg leuk om te zien hoe een ontwerp daadwerkelijk omgezet wordt in een werkend geheel.

(36)

Afbeeldingen blabla en blabla geven de programma overzichtspagina en een programma detailpagina weer.

De lezer van dit document kan zeer waarschijnlijk op dit moment surfen naar de website van Holland Dance Festival. Wanneer deze dit op zijn/haar mobiel doet, is de kans erg aanwezig dat deze hier dit ontwerp ziet.

Afb. 53 - Mobile Design programma overzicht

(37)

Onderzoek, concept en ontwerp voor Mustad Knowledge

Portal _stageweek

8 tot en met 20 1,2,3,4 en 5doel

Mustad is wereldwijd de grootste aanbieder van producten voor 'farriers' (ofwel: hoefsmeden).

Denk aan hoefijzers, speciale soorten spijkers, etc. Tijdens de strategische sessies voor Mustad - waar ik overigens niet ben bij betrokken - is er een idee ontstaan over een Knowledge Base:

een plek waar de farrier (de doelgroep) advies kan vragen aan andere farriers, ervaringsdeskun- digen en professionals. Het idee voor deze Knowledge Base is al snel weer weggestopt, omdat het de huidge vraag van de klant niet tegenmoet kwam. Wel denkt de Product Owner vanuit Mustad (Jack) dat een dergelijke Knowledge Base erg waardevol kan zijn om te bieden naast de brand-websites die op dit moment door Netvlies gerealiseerd wordt. Thijs - mijn collega stagiaire vanuit de Avans Hogeschool - en ik zijn gevraagd om een onderzoek, concept, wireframes en ontwerp te maken wat betreft deze Knowledge Base.

Afb. 54 - Eerste Mobile Design Knowledge & Advise Base

(38)

Afbeelding 54 laat een onwerp van een serie aan schermen zien die samen de flow van de homepagina vormen.

Vooraf aan het daadwerkelijk ontwerpen van deze schermen heb ik een klein onderzoek gedaan naar bestaande Know- ledge Based websites. Ik ontdekte twee verschillende versies van een Knowledge Base. Zo bestaat versie 1 uit vooraf geplaatste kennis (meestal door experts) die de gebruikers van de website kunnen raadplegen.

Versie 2 bestaat (en ontstaat) uit participatie van de gebruikers van de website. Gebruikers kunnen vragen stellen en vragen van anderen beantwoorden. Ook bieden de meeste Knowledge Based websites van dit soort een functie waarbij je een gegeven antwoord kan beoordelen op kwaliteit. Het hoogst gewaardeerde antwoord wordt bovenaan de pagina geplaatst.

Aangezien de Mustad Knowledge and Advice Base meer weg zal hebben van versie 2 dan van versie 1, heb ik een aantal aspecten uit dit kleine vooronderzoek verwerkt in mijn eerste ontwerp. Afbeelding 55 laat het ontwerp van een serie aan schermen zien die te maken hebben met het stellen, beantwoorden en bekijken van een vraag.

Afb. 55 - Eerste Mobile Design Knowledge & Advise Base Mustad - flow vraag stellen/beantwoorden/bekijken

(39)

Daarbij leek het mij een strategische keuze om ook serie aan schermen te ontwerpen die de flow van een persoonlijk profiel pagina weergeven (afbeelding 56). Op deze manier kan de farrier zijn/

haar gestelde vragen en beantwoorde vragen gemakkelijk terugvinden en up-to-date blijven wat betreft bepaalde topics. Ook kan de farrier zijn/haar netwerk uitbreiden door de activiteiten van andere farriers te volgen. Daarbij kan Mustad kostbare data verzamelen op het moment dat farriers massaal een profiel aanmaken waarbij ze gegevens weggeven.

Deze ontwerpen zijn voorzien van feedback door zowel stagebegeleiders Freek en Thomas en Product Owners vanuit Mustad: Jack en Maaike. De grote vraag blijft of de Mustad-brand geïn- tegreerd moet worden in deze Knowledge & Advice Base of dat het een onafhankelijke website

Afb. 56 - Eerste Mobile Design Knowledge & Advise Base Mustad - flow persoonlijk profiel

moet zijn. Ook hoort hierbij de vraag of de KnowLedge & Advice Base gebruikte (Mustad) producten - afhankelijk van de vraag of het antwoord - moet tonen. Daarbij zijn de meningen over implementeren van een persoonlijk profiel verdeeld. Zo zijn Jack en Maaike van Mustad hier erg enthousiast over, terwijl Freek denkt dat de farrier hier geen behoefte aan gaat hebben en hier niet zijn/haar tijd aan gaat besteden.

(40)

Vervolgens zijn Thijs en ik samen aan de slag gegaan wat betreft een klein onderzoek naar de behoefte naar een Knowledge & Advice Base onder farriers. Via Maaike hebben wij een aantal telefoonnummers van farriers over de wereld ontvangen. Deze farriers zijn - voor het daadwerkelijke interview - gebeld met de vraag of deze zouden willen participeren aan een interview voor Mustad. Vervolgens zijn er met de farriers afzonderlijke bel-afspraken ingepland.

Thijs en ik hebben een bel-interview gehad met Aksel uit Groot-Brittanië, Olivier uit Nederland en David uit Schotland.

Mustad DDD Services Final Report

Nog voor de interviews hebben Thijs en ik een onderzoek van Maaike ontvangen dat reeds is uitgevoerd door een derde partij die is inge- schakeld door Mustad: Livework. Livework heeft onderzoek gedaan naar de behoefte onder farriers wat betreft een aantal ideeën die Mustad heeft om te realiseren (waaronder de Knowledge & Advice Base). Ik heb dit onderzoek grondig doorgelezen en de resultaten uit het onderzoek meegenomen in de vraagstelling van de interview-vragen. Het zou namelijk zonde zijn wanneer Thijs en ik dubbel werk zouden doen tijdens de interviews.

Ondanks dat het soms erg lastig was om Aksel en David te verstaan, zijn er een aantal interessante inzichten uit het onderzoek gekomen. De meest opvallende en interessante inzichten zijn netjes verwerkt in een presentatie die is gepresenteerd aan de Product Owners Jack en Maaike.

Uiteindelijk kan er geconcludeerd worden dat de inzichten uit de interviews voornamelijk reeds bekende aspecten, resultaten en aanamens bevestigd hebben.

Nadat er een aantal weken zijn verstreken, heb ik de wireframes omgezet in een design. Wegens mijn eigen vakantie liep ik wat betreft deze vervolgstap achter op Thijs, die parallel aan mij dezelfde opdracht voor Mustad aan het uitvoeren is. Gelukkig is Thijs zo vrij geweest mij uit te nodigen bij de feedbacksessie op zijn ontwerp. Ik heb na de sessie met Freek (mijn stagebegeleider) afgesproken dat ik Thijs zijn feedback (die voornamelijk over de wensen van de Knowledge and Advice Base op zich gaat) mee te nemen in mijn eigen ontwerp.

Dit is dan ook wat ik heb gedaan. Naar wens van Thomas heb ik Thomas zijn ontwerp voor de brand-website voor Mustad (die as we speak wordt gemaakt door Netvlies) mogen ontvangen en heb ik zoveel mogelijk stijl-elementen als fonts, groottes, compositie en grid overgenomen voor het ontwerp voor de Knowledge and Advice Base.

Daarbij heb ik geprobeerd zo min mogelijk aspecten van Thijs zijn ontwerp over te nemen in mijn ontwerp. Ik wilde graag laten zien dat ik frisse ideeën heb en vanuit mijn eigen expertise kan denken en ontwerpen, ookal heb ik al het ontwerp van een ander gezien.

Afb. 57 - Livework onderzoek

(41)

Afb. 58 - Design versie Mustad

Knowledge and Advice Base (Feed) Afb. 59 - Design versie Mustad Know- ledge and Advice Base (Search_2)

Afb. 61 - Design versie Mustad Knowledge and Advice Base (Menu) Afb. 60 - Design versie Mustad Know- ledge and Advice Base (Search_1)

Zoals te zien in bovenstaande ontwerpen (afbeeldingen 58, 59 en 60) heb ik gekozen voor de naam ‘HoofAcademy’. Er is tot op de dag van vandaag nog geen uitsluitsel of de Knowlegde and Advice Base de Mustad-brand gaan dragen. Echter lijkt het

erop dat de Knowledge and Advice Base een onafhankelijk platform gaat worden, die waarschijnlijk de naam ‘HoofAcademy’ gaat dragen. Dit is dan ook de reden dat ik heb gekozen voor een hoofdkleur die hedendaags (nog) niet gebruikt wordt door Mustad, maar wel past binnen het kleurenpallet dat tot nu toe gebruikt wordt. De K&AB krijgt een onafhankelijke uitstraling.

(42)

Uit de feedback kwam heel sterk naar voren dat facebook momenteel leidend is wat betreft de wereldwijde farrier-community. Vandaar dat ik mijn strategie voor het ontwerp - in vergelijking met de wireframes die ik eerder heb gemaakt - heb aangepast naar het volgende: De elementen van facebook nemen die de farrier-community tot een succes maken en daarbij de niet-relevante

Afb. 62 - Design versie Mustad Knowledge and Advice Base (Ques- tions)

Afb.63 - Design versie Mustad Knowledge and Advice Base (Sto- ries)

Afb. 64 - Design versie Mustad Knowledge and Advice Base (Even- ts)

(43)

De afbeeldingen van de scher- men geven op volgorde de flow van de webapplicatie weer.

Onderin het scherm staat de navigatie die sticky is en dus altijd binnen handbereik blijft.

Via deze navigatie kan je navi- geren naar je feed, je chats en je profiel.

Via de zoekfunctie (afbeelding 60) kun je zoeken op leden van de K&AB en groepen die zijn aangemaakt door leden van de K&AB. Wanneer je een van deze groepen bezoekt (afbeelding 59) zie je dat je niet alleen ques- tions (afbeelding 62) maar ook stories (afbeelding 63) en upco- ming events (afbeelding 64) van die groep kan bekijken. Je kan content plaatsen en bewerken binnen deze groep, wanneer je toegelaten bent als member.

Wel kun je als niet-member de ontwikkelingen in de groep volgen, om als stille kijker op de hoogte te blijven.

Wanneer je op een item zou drukken, kom je op een detailpagina terecht (afbeelding 65), in dit geval een detail pagina van een vraag. Je kan antwoorden op de vraag aan de hand van tekst, afbeeldingen en video. Daarbij kan je aangeven of het antwoord hulpvol is geweest, door te drukken op de ‘thanks’- knop. Het antwoord met de meeste votes komt bovenaan te staan, zodat deze het eerste gezien wordt.

Daarbij bevat de pagina drie belangrijke actie-knoppen: de volg-knop waarbij je de vraag kan volgen, de contact-knop waarbij je de steller van de vraag en contactverzoek kan sturen en de chat-knop waarbij je de steller van de vraag een chatver- zoek kan sturen.

Afb. 65 - Design versie Mustad Knowledge and Advice Base (Ques- tion Detail)

(44)

De gebruiker (in dit geval Peter) ziet zijn eigen profiel zoals afgebeeld in afbeelding 66.

Hier kan hij heel gemakkelijk zijn gestelde vragen en zijn gegeven antwoorden terugvinden.

Daarbij kan hij gemakkelijk bij de lijst aan groepen en personen die hij volgt en waarvan hij

‘member is’.

Afbeelding 69 verbeeldt hoe Peter zijn chat-box eruit ziet.

Wanneer hij op het tabje ‘re- quests’ drukt, ziet hij een lijst van ingediende requests tot contact, chats en memberships tot de door hem aangemaakte pagina’s (zie afbeelding 68).

Deze requests kan hij zowel accepteren als weigeren.

Wanneer Peter nader wil onder- zoeken of een bepaald persoon een membership tot zijn groep kan ontvangen, kan Peter het profiel van het lid bekijken.

Peter ziet op het profiel van Bill (afbeelding 67) welke ranking hij heeft, waar hij vandaan komt en een stukje tekst over hem- zelf. Ook komen hier dezelfde actie-knoppen weer terug.

Wanneer je een volwaardig facebook-gebruiker bent, zul je een aantal aspecten van facebook in dit prototype herken- nen. Echter heb ik het prototype overzichtelijk gemaakt:

gestelde vragen en gegeven antwoorden zijn gemakkelijk terug te vinden en er kan gemakkelijk

Afb. 66 - Design versie Mustad Knowledge and Advice Base (Profile Peter)

Afb. 67 - Design versie Mustad Know- ledge and Advice Base (Profile Bill)

(45)

Aangezien mijn medestagiaire Thijs van de Meerendonk en ik beiden een ontwerp hebben gemaakt voor deze Knowledge and Advice Base, en beiden ontwerpen elementen bevatten die de Product Owners van Mustad (Maaike en Jack) graat terug zouden zien in het uiteindelijke prototype, is er belsoten een sessie te houden waarbij beide ontwerpen onder de loep genomen worden.

Beiden ontwerpen zijn uitgeprint op A3-vellen en op een whiteboard naast elkaar opgehangen. De sessie is van start gegaan met een korte toelichting van beide ontwerpen, zodat alle aanwezigen met een frisse blik de ontwerpen konden beoordelen.

De aanwezigen bij deze sessie waren Freek (stagebegeleider), Martijn (Marketeer), Maaike (Product Owner Mustad), Jack (Product Owner Mustad), Thijs en ik.

Iedere aanwezige ontving een zestal oranje ronde stickers. De methode van het plakken van stickers is een methode die Netvlies vaker toepast om tot consessies te komen. Ieder aanwezige heeft zijn/haar stickers geplakt bij de elementen van een ontwerp die hem/haar aanspreken. Nadat alle stickers waren geplakt, is elke sticker behandeld en heeft de ‘plakker’ zijn/haar keuze moeten toelichten.

Uiteindelijk ontvingen Maaike en Jack - de Product Owners vanuit Mustad - beiden nog twee grotere blauwe stickers. Met deze stickers konden zij aangeven welke elementen ze zeker in het prototype terug wilden zien.

In totaal zijn er dertig oranje stickers geplaatst, waarvan zowel Thijs zijn ontwerp als mijn ontwerp er 15 heeft mogen ontvangen. Dit wil zeggen dat de verdeling over de ontwerpen gelijk heeft gelegen.

Afb. - De Mustas Knowledge and Advice Base ‘sticker-sessie’

Daarbij zijn ook de vier grotere blauwe stickers gelijkmatig verdeeld over de twee ontwerpen. Ik ben persoonlijk erg blij met deze uitkomst: ik houd niet erg van het ‘wedstrijd-gevoel’ en zou erg balen als een van de twee ontwerpen beduidend beter of slechter naar voren was gekomen.

De consessie verliep erg voorspoedig. Er is uiteindelijk geconstateerd dat Thijs zijn ontwerp betreffende de spacering, uitleining en kleurgebruik ervan het meest ‘clean’ is. Ook is er geconstateerd dat juist de speelsheid en uitstraling van mijn ontwerp - betreffende de iconen, afbeeldingen en stijlelementen - niet mag ontbreken. Ook zijn een aantal elementen uit mijn ontwerp, zoals de actieknoppen tot contact, het navigatemenu onderin het scherm en de algehele uistraling van een detailpagina ‘verkozen’ tot elementen die niet in het prototype mogen ontbreken.