Voorbereiding deel 1: Leren te werken met klanten

Allereerst moest ik gaan peilen hoe er met een klant omgegaan wordt bij het stagebedrijf DSGN. Om dit te doen heb ik besproken om bij enkele klantgesprekken aanwezig te zijn. Ik zou er dan bijzitten, zonder iets te zeggen, maar die planning was ineens overhoop gegooid toen ik een uur vooraf te horen kreeg dat ik mijn allereerste klantgesprek zou leiden en dat een begeleider erbij kwam zitten om te zien hoe het ging. Ik werd helemaal in het diepe gegooid en ging in dit uur mij hierop voorbereiden.

De klant waarmee het gesprek was gepland was Jos van kleishop.nl. Hier had ik al deels mee gewerkt met het designen van de homepagina. De planning was om in dit gesprek te bespreken hoe we dit het beste zouden inplannen. Jos gebruikte al jaren een bestaand CMS-systeem anders dan WordPress en wilde hier niet vanaf. Dit systeem heet CCVShop en is gebouwd door een Nederlands bedrijf in Hengelo. Jos had uitgelegd dat CCVShop werd gebruikt omdat het erg goedkoop is om op te zetten en omdat er al ingebouwde webshop templates beschikbaar zijn.

In het gesprek gingen we over het design dat gemaakt was in Figma. Hier had de klant enkele feedback op die ik gelijk noteerde. De oude site was erg kaal en had weinig content, dus in het nieuwe design was er besproken om nieuwe blokken toe te voegen zoals een categorieblok, een megamenu & een klantenservice blok. Sinds we de huisstijl erg hadden veranderd naar een modernere look was het niet mogelijk om alleen de homepagina te veranderen en de rest zo te laten. Hierbij is besproken dat we de homepagina volledig aanpassen en dat we bij de rest van de website de huisstijl ook deels doorvoeren. Denk hierbij aan de navigatie, footer, megamenu en het klantenservice-blok.

Nadat alles duidelijk was voor de klant wat er allemaal ging veranderen heb ik het gesprek succesvol afgerond. Hierbij hadden we nog afgesproken dat in een paar weken tijd we opnieuw een gesprek zouden hebben over de progressie van de homepagina.

Na afronding van het gesprek kreeg ik nog feedback op enkele kleine punten. Hierbij was een dat ik de klant constant “u” noemde, en het zou een stuk makkelijker geweest zijn als ik Jos aan het begin had gevraagd of ik hem “jou / Jos” kon noemen. Verder was deze feedback alleen positief, dus het “in het diepe gooien” was goed gelukt.

Voorbereiding deel 2: Unieke skills verkrijgen

In mijn planning wilde ik in de zomervakantie me vooral focussen op het maken van mijn eigen website. Hier was ik al een maand of twee mee bezig en wilde het vrijwel afmaken in de vakantie. Dit was geen makkelijke taak want dit was de eerste keer dat ik een nieuwe techniek in mijn portfolio gebruikte, GSAP. Dit is een animation-library die ik extensief wilde gebruiken in mijn niet-normale site. De reden hiervoor? Opvallen. Ik hou ervan om niet-normale sites te zien op bijvoorbeeld awwwards.com en het lijkt me erg cool om mijn portfolio op dezelfde manier te maken om me te onderscheiden van anderen en mijn skills te showcasen.

Verder ben ik begonnen met het gebruiken van PHP in mijn sites. Ik merk dat je met een component-driven architectuur een stuk sneller allerlei pagina’s kan maken. Ik gebruik één PHP-pagina voor de navigatie, één voor de call-to-action, één voor de footer enzovoorts. Alle code die zich enigszins herhaalt, probeer ik te automatiseren om het later makkelijker te maken om bij te houden. Een goed voorbeeld zijn de case studies die ik op veel verschillende pagina’s heb staan. Deze worden gegenereerd met een zelfgemaakt PHP script die de data direct uit enkele JSON-files haalt.

Ook heb ik geprobeerd in mijn portfolio zoveel mogelijke kleine animaties te stoppen die je normaliter niet opmerkt, maar die toch toevoegen aan de ervaring. Al deze code heeft me wel een hele lange tijd geduurd. Sinds ik niet iets standaard wilde maken moest ik alle code zelf schrijven. Zo heb ik alles een tijdje geleden opgeteld en ik kwam uit op 1700+ lijnen PHP, 3500+ lijnen CSS en 2000+ lijnen JS. Totaal opgeteld zijn dat minstens 6000+ lijnen aan custom, zelfgeschreven code, zonder dubbele componenten. Nadat ik deze blog pagina af heb zijn het vast weer een paar honderd meer lijnen :)

Ik heb mijn portfolio echter niet alleen maar gemaakt voor mijzelf. Voordat ik hiermee begon, dacht ik al dat werken met zulke technieken mijn toekomst zou worden, maar ik moest het toch eens van start tot eind ervaren. Na enkele maanden met de techniek gewerkt te hebben weet ik in ieder geval de basiskennis die nodig is voor zulke sites en wil ik verder in mijn carrière ook deze soort sites bouwen, mogelijk ook bij DSGN. Deze sites zijn wel erg veel werk en er moet afgewogen worden of deze techniek bij de klant en het budget past.

Voorbereiding deel 3: Basis skills in WordPress beheren

In mijn vorige stageperiode was ik al deels bezig met WordPress. Zo moest ik vaak een aantal websites van klanten veranderen, maar had ik het nog nooit vanaf start opgebouwd. Dit moet deze periode veranderen, en ik hoop om voor februari in ieder geval deze kennis te hebben zodat ik het ook kan. Voordat ik begon met WordPress leek het me onhandig als developer, maar erg handig voor iemand die niet veel te maken wil hebben met code. Omdat ik niet alleen websites voor mezelf ga maken leek dit me wel een hele goede tool om te leren.

De opdracht

Een maand voor de vakantie kreeg ik de opdracht om de website van kleishop te coderen. Ik had samen met enkele medewerkers bij DSGN besproken dat ik dit deels tijdens stage zou doen en een ander deel tijdens de vakantie. Het enige wat we moesten aanpassen (voor nu) was de homepagina van de website. Hierbij was er een heel nieuwe stijl bedacht die iets moderner zou zijn als de oude. Daardoor moest ik ook goed letten dat de andere pagina’s er niet slecht uit zouden gaan zien als ik de stijl van de homepagina veranderde.

Hoe ging de opdracht van werk?

Ik had gehoopt om gelijk ervaring te krijgen in WordPress, maar dit moest even wachten. Wel dacht ik dat CCVShop een soortgelijke website builder was, maar dit bleek niet zo te zijn. In CCVShop werk je voornamelijk met custom codeblokken die je zelf schrijft, en is er geen visuele editor beschikbaar. Ook was het niet mogelijk om de lay-out van de pagina aan te passen. Hierdoor was het al snel moeilijker dan gedacht en liep de planning qua uren al in de soep.

Als enige persoon in het bedrijf met enig development kennis moest ik hiervoor vrij snel een oplossing bedenken. Na in de code te duiken van het oude thema van Kleishop zag ik enkele bekende elementen die ik kon gebruiken voor mijn design. De code was verdeeld in een aantal files, maar de meeste code zoals de navigatie, headers en footer stond in een bestand. Zo kon ik vrij makkelijk enkele basisdelen coderen en stond 70% van de website na een paar uur coderen op de development server. De andere 30% was iets lastiger.

In het nieuwe design had ik een nieuw blok bedacht op de homepagina, en op de homepagina alleen. Het probleem hiermee was dat ik op de development site niet zelf blokken kon toevoegen. Zo kon ik niet mijn eigen blok maken zonder de live site aan te passen, en dat mocht niet. Ik heb dit opgelost door een dit nieuwe blok in de sites header element te zetten. Hierna met behulp van JavaScript het blok verplaatst naar de main content en toen kon ik met CSS de positie veranderen en mijn probleem oplossen.

Hierna was het een eitje. Ik heb daarna nog enkele uren door alle andere pagina’s heen gegaan en heb ze een klein beetje aangepast. Zo zorgde ik ervoor dat alle pagina’s tenminste beter eruit ging zien als het oude design.

Hoe heb ik het gedaan?

Na het afronden van het project was het eindelijk tijd voor de livegang. Hierbij hadden we een gesprek ingepland met Jos van Kleishop waarbij ik liet zien wat ik gemaakt had, hoe de pagina’s eruit gingen zien, en wat er veranderd was. Zo kon ik een akkoord krijgen voordat de hele site opeens veranderd werd. Dit gesprek ging uiteindelijk iets meer dan een uur door voordat we eindelijk live konden gaan.

Dit moment van livegang was erg zenuwslopend want je weet nooit of er opeens problemen tevoorschijn komen. Wel had ik hiervoor extensief getest. Gelukkig bleek alles na livegang soepel te verlopen, de site zag er precies hetzelfde uit als ik hem gedesigned en gedeveloped had. Na livegang zijn we er beiden doorheen gegaan en nadat er niets verkeerd was gevonden heb ik het gesprek succesvol afgerond. Hierna kreeg ik feedback van de projectleider van DSGN, die erg positief was over mijn werk, en mij vertelde dat ik het goed had gedaan.

In de vakantie heb ik verder nog een aantal features toegevoegd aan de website, en ook enkele bugs gefixt. Gelukkig kon dit allemaal snel, en was er niet veel fout. De klant is erg tevreden met het design en we beginnen nu langzaamaan met het designen en developen van de rest van de pagina’s volgens de nieuwe huisstijl.

De vernieuwde huisstijl heeft ook veel resultaten opgeleverd. De website van kleishop verkoopt nu een stuk meer producten sinds de redesign live gegaan is, en de omzet is sterk omhoog gegaan. Vergeleken met de maand voordat de redesign live was en afgelopen maand is de omzet gestegen met maar liefst 70%. Nadat de volledige redesign live is, verwacht ik dat dit percentage nog een stuk gaat stijgen.

Stagiaires begeleiden

Voor de vakantie werd er aan mij verteld dat er een hele waslijst aan nieuwe stagiaires bij kwamen. Hierbij waren dit drie nieuwe design-stagiaires en drie marketing-stagiaires. Aan mij de taak om de design-stagiaires te helpen met onboarding. Hiervoor heb ik enkele werkwijzen gemaakt die we in het bedrijf moeten volgen.

Allereerst is er een nieuwe layout gemaakt voor de Google Drive. Deze was erg ongeorganiseerd geworden over de jaren, dus was het toe aan een refresh. Verder heb ik enkele bestanden gemaakt waarop we stapsgewijs werken aan een nieuwe manier van designen. Ik ben een grote voorstander van netjes designen, en merkte dat er niet één standaard was om projecten te designen. Zo werd er soms erg slordig gewerkt waardoor het voor de developers een nachtmerrie was om te developen en hierbij consistent te blijven. Zo heb ik een standaard file gemaakt die al deze problemen zou oplossen, vanuit het oog van de designer én de developer.

Deze en nog enkele andere guidelines heb ik goed opgeschreven en besproken met de nieuwe stagiaires. Verder heb ik deels de leiding gekregen over de stagiaires omdat het anders te veel werk is voor Melle. Nu kan ik zelf een aantal projecten aan de stagiaires uitschrijven waar ik zelf geen tijd voor heb, zodat ik zelf aan de slag kan gaan met belangrijkere taken.

MerchMonks

Sinds de vakantie is er een nieuw bedrijf bij DSGN gekomen. Dit bedrijf heet MerchMonks en verkoopt allerlei merchandise voor verschillende klanten. Elke dag hebben ik en de andere stagiaires een aantal taken te doen, waarbij we ook zelf T-shirts bedrukken, inpakken en versturen. Ook maken we nu niet alleen meer sites, maar designen we erg vaak merchandise voor bekende Nederlanders, influencers en meer.

Persoonlijk vind ik het heel leuk om weer eens iets nieuws te maken. Ik hou ervan om veel variatie te hebben bij het werk wat ik doe, en merchandise is iets waar ik zelf niet veel ervaring voor had.

Ook heb ik nu de mogelijkheid om mijn eigen T-shirts te bedrukken op stage, en we hebben de keuze uit honderden verschillende producten, die we als bedrijf met een vrij lage inkoopprijs kunnen kopen. Zo heb ik ook een aantal T-shirts besteld en voor mijzelf gedrukt.

Portfolio

Verder ben ik in mijn vrije tijd veel bezig geweest met mijn portfolio. In de vakantie had ik nog niet alles afgemaakt, maar had ik wel 90% van de code af. Nu focus ik mij voornamelijk aan het schrijven van teksten en het implementeren van microanimaties. Ik hoop mijn hele portfolio af te hebben voor het eind van mijn stage, compleet met allerlei case studies. In de afgelopen paar maanden heb ik vele projecten succesvol afgerond, dus er is genoeg werk te laten zien, al ben ik wel erg kieskeurig.

Naast het maken van mijn standaard pagina's in mijn portfolio heb ik ook besloten om een blogs sectie te maken, waarvan je een deel van de pagina’s nu voor je hebt. Hier ben ik een aantal weken mee bezig geweest en ik heb nog plannen vaker misschien blogs te gaan schrijven. Voor nu heb ik alle set-up gedaan, en is het heel makkelijk om alle code aan te passen. Zo kan ik blogs aan elkaar koppelen en kan ik filteren op gebruikersnaam en datum. Later als ik meer tijd heb, ben ik van plan mijn eigen systeem te schrijven met vele features.

SMART leerdoelen

Aan mijn leerdoelen is niet veel veranderd, en het zijn nog steeds dezelfde die ik in mijn vorig verslag heb besproken. Ik ben nog steeds veel bezig met het leren van UX en elke dag leer ik wel iets nieuws. Zo merk ik van mijzelf dat ik bij elk nieuw project meer kennis heb dan bij het vorige project en het helpt me veel met het maken van goede en uitgedachte beslissingen.

Verder ben ik druk bezig met het uitvoeren van mijn tweede en derde leerdoel zoals besproken in mijn vorig verslag. In de paar maanden dat ik hier werk heb ik al deels kennis gekregen met WordPress, maar gebruikten we bijna altijd een custom thema waarbij je vaak niet de basiskennis leert op te bouwen. Wel had ik voor de vakantie enkele kleinere aanpassingen gemaakt op standaard WordPress websites.

Tijdens mijn vakantie was de rest van het team druk bezig met het developen van een website die ik samen met het team had gedesigned. Ik had nog een aantal taken te doen in de vakantie, maar dit was voor een ander project. Toen ik terugkwam van vakantie kon ik gelijk beginnen met het meehelpen van het maken van de website. Mijn taak hierbij was het vullen van content en het checken van gemaakt werk. Door dit voor een paar weken te doen heb ik veel kennis gekregen van de opmaak van WordPress.

Een paar weken later en nu zijn we bezig met het afronden van de website. Dit heeft me ook veel geleerd, voornamelijk wat er allemaal mis kan gaan. Als enige in het bedrijf met kennis over developen zag ik dat de site niet goed gebouwd was en had ik veel commentaar hierop. Door deze ervaring heb ik wel geleerd hoe een project fout kan gaan, en hoe dat op te lossen valt.

De rest van de stage

Voor de rest van de stage ben ik van plan om sowieso verder te gaan leren. In de afgelopen weken heb ik interesse gekregen in Google analytics en ga hier misschien na de terugkomdag mee werken. Verder ben ik al enkele maanden bezig met mijn portfolio en ik wil deze voor februari af hebben. Dit wordt nog best veel werk omdat ik erg kieskeurig ben met content in de website, voor de rest is de code zo’n 95% klaar.

Voor de rest wil ik mijn combinatie van skills rondom design, development en marketing verder ontwikkelen. Hopelijk heb ik voor het eind van de stage al mijn SMART leerdoelen behaald en ben ik klaar voor het eindexamen en daarna de start van mijn professionele carrière.