HET BEGINT BIJ
STRUCTUUR
VAN ONGESTRUCTUREERD MAGAZIJN NAAR EEN COMPLETE WEBSHOP!
Stageverslag
n Thijs van Ude 20-01-2016
Het begint bij structuur | Pagina 1
Titelpagina Auteur Naam: Thijs van Uden Studentnummer: 2189393 E-mailadres: thijs.vanuden@student.fontys.nl Opleidingsinstituut: Fontys Hogeschool Eindhoven Major: ICT & Media Design Bedrijfsbegeleider Josine van Berlo
HET BEGINT BIJ STRUCTUUR AUGUSTUS 2015 - JANUARI 2016
Stagebegeleiders Naam: Jo-An Kamp E-mailadres: j.kamp@fontys.nl Naam: Erik Heijligers E-mailadres: e.heijligers@fontys.nl
Het begint bij structuur | Pagina 2 www.123ventilatiesysteem.nl
Š 2016 Thijs van Uden
Het begint bij structuur | Pagina 3
“Ik kan ken j i k g u r e t zeer n e e r a na ct” e j o r p d geslaag
Samenvatting
Voorwoord Van 31 Augustus 2015 t/m 31 Januari 2016 heb ik met veel plezier stage gelopen bij Studio Frisselstein. Studio Frisselstein is een communicatiebureau gevestigd in het hartje van Veghel. Ze richten zich vooral op het bedenken en ontwikkelen van offline en online communicatieoplossingen zodat de klant zijn doel behaalt. Tijdens mijn stageperiode bij Studio Frisselstein heb ik me voornamelijk bezig gehouden met het realiseren van een complete webshop voor 123ventilatiesysteem.nl. Samen met Menno en Josine heb ik deze uitdaging met beiden handen aangenomen. De enorme hoeveelheid producten, zonder enige charme maakte het er niet makkelijker op. Des te groter de uitdaging om een mooie webshop te realiseren. Ik kan terugkijken op een zeer geslaagd project waar beide partijen enorm veel van hebben opgestoken. Het begint bij structuur | Pagina 4
Dankzij dit project heb ik mijn zelfstandigheid, onderzoeksvaardigheden, designkwaliteiten en kennis van online mogelijkheden (met name WordPress) in korte periode enorm verbeterd. Het is een erg leerzame periode geweest waarbij ik al mijn vaardigheden nodig had. Graag wil ik een bijzonder woord van dank richten aan Josine van Berlo voor al haar waardevolle begeleiding, inspiratie en enthousiasme. Daarnaast wil ik ook graag van de mogelijkheid gebruik maken om Jo-An, Menno Meijer en Stef van der Loo te bedanken voor alle hulp, feedback en inzet die ik heb mogen ontvangen. Tenslotte bedank ik uiteraard Thymen Kristen voor zijn vertrouwen dat hij mij deze periode heeft gegeven en alle positieve feedback. Allemaal hartelijk bedankt!
Om een nieuwe webshop te realiseren heb ik eerst de huidige webshop van 123ventilatiesysteem flink onder de loep genomen. Deze webshop was ongeordend en niet volledig. Er stond veel dummy-tekst op en er stonden maar een paar producten online. Daarnaast paste de huisstijl niet bij de gewenste uitstraling van het bedrijf. Er moest een nieuwe volledige webshop komen met een nieuwe huisstijl en waar de producten op een geordende manier getoond worden. Allereerst ben ik begonnen met onderzoek doen naar de concurrenten en wat de online mogelijkheden zijn. Vervolgens heb ik samen met Thymen Kristen (eigenaar 123ventilatiesysteem) een nieuwe structuur geschetst en uitgewerkt. Tenslotte heb ik een nieuwe huisstijl ontwikkeld en samen met de nieuwe structuur vormde dit de basis van de nieuwe webshop. Alle producten zijn onderverdeeld in categorieën en ik heb er rekening mee gehouden dat alle producten per categorie worden ingeladen. Vervolgens hebben we gekeken naar de content die op de pagina‘s staan. Zowel over de tekst als afbeeldingen is goed en lang nagedacht. Het resultaat hiervan wordt uitgebreid in dit verslag beschreven.
Ik wens u veel leesplezier.
Tenslotte heb ik user tests gehouden om de gebruiksvriendelijkheid van de webshop te analyseren. Uit de resultaten bleek dat er nog een paar kleine aanpassingen moesten gebeuren maar bezoekers navigeerde makkelijk door de pagina’s en konden zonder problemen de producten vinden.
Thijs van Uden
In dit verslag komen al deze onderwerpen uitgebreid aan bod.
Het begint bij structuur | Pagina 5
Verklarende woordenlijst
Inhoudsopgave
8
12
Aanleiding De aanleiding van de opdracht om een complete webshop te realiseren voor 123ventilatiesysteem.
13
De opdracht Een uitgebreide beschrijving van de huidige situatie en het doel van de opdracht.
17
Werkzaamheden Alle werkzaamheden die verricht zijn om tot het eindresultaat te komen.
33
User testing Analyse en resultaten van de user tests om de gebruiksvriendelijkheid te optimaliseren.
36 43
Bouncepercentage Het weigeringspercentage van de website. Bezoekers die na één pagina de website weer verlaten.
Het bedrijf Informatie over het stagebedrijf Studio Frisselstein uit Veghel waar ik vijf maanden met veel plezier stage heb mogen lopen.
Analyse Een overzichtelijke weergave van alle gebeurtenissen die zich op de site hebben plaatsgevonden. Bijlagen
Het begint bij structuur | Pagina 6
CSV bestand Een bestand dat een tabel omzet in een tekstbestand gescheiden door een komma.
8
10 14
Dummy tekst Een dummy tekst is een ander woord voor faketekst en wordt (vaak tijdelijk) gebruikt als opvulling om te kijken hoe een tekst of lettertype eruit ziet. Footer Onderste gedeelte van een website waarin bijvoorbeeld verwijzingen en navigatie staan. Php Een scripttaal om objectgeoriënteerd te programmeren. Pixels Elk enkel gekleurd punt op een beeldscherm. Hoe meer pixels, hoe scherper het beeld.
15
Plugin Een aanvulling van WordPress waardoor de site meer mogelijkheden of functies biedt. SEO Search Engine Optimization. Het actief optimaliseren van een website om het bezoek vanuit zoekmachines te verhogen.
18
26
WordPress Een gebruiksvriendelijk systeem waarmee je een website kunt maken én onderhouden. Het begint bij structuur | Pagina 7
Het bedrijf 2.1 Studio Frisselstein
Studio Frisselstein is een communicatiebureau gevestigd in het Business Centrum Frisselstein in hartje Veghel. Een groot aantal klanten zitten in dit gebouw gevestigd of komen uit de omgeving Veghel. Ze richten zich vooral op het bedenken en ontwikkelen van communicatieoplossingen waarbij de klant zijn doel behaalt. Dit doen ze door de sterke en efficiënte combinatie van communicatie, creatie en management. De kracht van Studio Frisselstein is dat ze traditionele communicatie laten samenwerken met moderne communicatie. Denk hierbij aan het doortrekken van brochures, folders en advertenties naar de website of Social Media.
e op ti a c i n u “Comm j i z k n a d t maa n” i e t s l e s s i Studio Fr
Bij Studio Frisselstein kun je terecht voor zowel online en offline communicatieproducten: een passende huisstijl, een logo en op maat gemaakt drukwerk. Verder zijn ze gespecialiseerd in SEO en SEA.
2.2 Rollen Josine van Berlo - Art Director
Menno Meijer - Projectmanager
Mathieu Maas - Ontwikkelaar
Josine zorgt voor de goede uitvoering van de opdracht en tegelijkertijd de creatieve kwaliteitsbewaking van de producten die ontworpen zijn naar de wensen van de klant.
Menno bewaakt projecten en het proces. Hij maakt (SMART) doelstellingen voor elk project en zorgt dat deze worden behaald. Daarnaast heeft hij veel contact met de klanten en zorgt voor een duidelijke en strakke planning.
Mathieu is na zijn stageperiode aangenomen als parttime ontwikkelaar en helpt mee met het bouwen van producten. Mathieu heeft veel kennis van WordPress en is zeer handig met programmeren.
Het begint bij structuur | Pagina 8
Het begint bij structuur | Pagina 9
2.3 Organigram
Om een beter beeld te creëren van de organisatiestructuur van Studio Frisselstein heb ik een organigram gemaakt.
De Gastoudercentrale De Gastoudercentrale is de betrouwbare partner in gastouderopvang. Ze bieden een compleet ondersteuningspakket met onder andere de gastoudermarktplaats, Opvangapp en een deskundige helpdesk. Studio Frisselstein maakte een huisstijl en realiseerde een nieuwe website. Verder verzorgen ze de communciatie, zowel online als offline en zorgen ze voor goede vindbaarheid d.m.v. SEO en SEA.
2.4 Werk
Om te laten zien waar Studio Frisselstein aan werkt heb ik het werk van drie belangrijke klanten uitgelicht.
Mobicel Verhuur Mobicel Verhuur is gespecialiseerd in het leveren, verhuren en installeren van koelcellen en vriescellen. Voor Mobicel Verhuur heeft Studio Frisselstein een nieuwe verfrissende website gemaakt. Ook alle foto’s van de koel- en vriescellen zijn gemaakt door Studio Frisselstein. Verder verzorgt Studio Frisselstein de nieuwsbrieven, werken ze met Google Adwords en gebruiken SEO om beter in Google gevonden te worden. Visspecialiteiten Beekwilder Visspecialiteiten Beekwilder is dé visspeciaalzaak van Veghel en omstreken en zijn verkozen tot derde beste viswinkel van Nederland. Studio Frisselstein heeft een complete nieuwe website voor Beekwilder gemaakt. Daarnaast zorgen ze voor het ontwerp en drukwerk van alle binnen- en buitenreclame, visitekaartjes, menukaarten en verspreiden ze aanbiedingen via social media.
Het begint bij structuur | Pagina 10
Het begint bij structuur | Pagina 11
123ventilatiesysteem 123ventilatiesysteem is een jong bedrijf in het hartje van Veghel. Het bedrijf zit in de bouwbranche en levert kwaliteitsproducten op het gebied van luchtventilatie en luchtcirculatie. Door het ruime assortiment en de lage verkoopprijs willen ze zich onderscheiden van de concurrentie. Het assortiment variëert van bochten, zadelstukken, kleppen, roosters, dempers tot beugels en nog veel meer. Doelgroep De doelgroep van 123ventilatiesysteem bestaat uit installateurs, doe-het-zelvers en zzp’ers. Installateur Zij zorgen voor het inrichten en in stand houden van technische installaties in gebouwen. Naast elektrische installaties werken ze ook vaak aan leidingen, sanitair, riolering en verwarming. Doe-het-zelf Doe-het-zelvers zijn handige consumenten die een klus of opdracht liever zelf doen in plaats van hem uit te besteden aan een professional. Vaak om te besparen in de kosten of omdat ze het gewoon leuk vinden om te doen. Zzp’er Een zzp’er werkt voor eigen risico als zelfstandige, heeft geen personeel in loondienst en vaak ook geen zakelijke partners. Uit onderzoek (“Zelfstandigen zonder personeel (zzp), z.j.) blijkt dat 1 op de 10 van de werkzame beroepsbevolking zzp’er is en dit aantal blijft groeien.
Het begint bij structuur | Pagina 12
Concurrentie Om een overzichtelijk beeld te creëren heb ik de concurrentie verdeeld in de groepen: groot, midden en klein. Hierbij heb ik gekeken naar: - - - -
De productgroepen en producten De algemene indruk van de website Het aantal vestigingen De bezorgkosten
Groot Wasco, Bergschenhoek en Wildkamp. Deze bedrijven hebben een zeer uitgebreid assortiment (meer dan 10.000 producten), verzorgde websites en meerdere vestigingen. Producten worden pas bij een afname van rond de 950 euro gratis thuis bezorgd. Midden Ventilatieweb en Ventilatieshop. Deze bedrijven hebben een minder uitgebreid assortiment dan de grote concurrenten en hebben maar één vestiging. Klein Ventilatorkopen en Ventilatieland. Dit zijn de kleinste concurrenten met het minste assortiment. Ze verkopen de meest standaard maten tot ø250 millimeter. De producten worden al gratis geleverd bij afname vanaf 50 euro. Hierdoor geven ze een stukje service wat het lage assortiment compenseert. Ook deze bedrijven hebben maar één vestiging. “Was
co” 450.00 0p en 31 v roducten estiging en!
Het begint bij structuur | Pagina 13
De opdracht Huidige situatie
Om een beter beeld te krijgen van 123ventilatiesysteem heb ik eerst de huidige situatie flink onder de loep genomen. Website Aan de huidige webshop zijn een hoop verbeterpunten die meteen opvallen. Als eerste heeft de hele site een donkere uistraling. Vooral het menu en de header wat de eyecatchers van de website zouden moeten zijn bevatten veel donkere kleuren. Hiermee heeft de webshop niet de uitstraling die een webshop zou moeten hebben.
Aanleiding van de opdracht Hoe maak je een webshop? De oude webshop van 123ventilatiesysteem was erg onoverzichtelijk en het was onmogelijk om op een geordende manier producten toe te voegen. Ook stond de site vol met dummy tekst. Het was dus van groot belang dat er een nieuwe webshop kwam die een overzicht biedt van alle producten en categorieĂŤn die zij bieden. Samen met Josine en Menno ben ik de uitdaging aangegaan om een nieuwe webshop voor 123ventilatiesysteem te realiseren. Ik had geen idee wat ik allemaal moest verwachten bij het maken van een webshop maar ik was ervan overtuigd dat dit me ging lukken.
Het begint bij structuur | Pagina 14
Onder het menu en de header staan een aantal producten weergegeven. Deze producten staan op willekeurige volgorde door elkaar zonder categorie of structuur. Ook is duidelijk te zien dat alle afbeeldingen een verschillend formaat hebben waardoor het een hele chaotische uitstraling heeft.
Hoofdstuk 3 geeft alle details over de opdracht. Ook worden hier de doelen van de opdracht beschreven. In hoofdstuk 4 worden al mijn werkzaamheden beschreven. Dit gaat zowel over de hele look and feel als over de gebruiksvriendelijkheid en functies van de webshop. In hoofdstuk 5 wordt beschreven hoe de website is getest op gebruiksvriendelijkheid en de analyse hiervan. Hoofdstuk 6 bevat alle informatie op het gebied van bezoekersaantallen en het versturen van nieuwsbrieven.
Het begint bij structuur | Pagina 15
De winkelwagen van de huidige website is een duidelijke weerspiegeling van de rest van de pagina’s. De donkergroene kleuren komen ook hier weer terug. Alle tekst is in het Nederlands terwijl de pagina zelf “shoppingCart” in het Engels is. Ook staat het blokje “winkelmand-totalen” twee keer onder elkaar wat onprofessioneel overkomt.
Ook op de FAQ pagina komen dezelfde onderwerpen weer aan bod. Hier worden zelfs nog donkerdere kleuren gebruikt wat een erg donkere en zware uitstraling geeft. Sommige tekst in het Nederlands en de rest in het Engels. Ook bestaat deze pagina voor een groot deel uit dummy tekst.
Magazijn Om een beter beeld te krijgen van alle producten en onderdelen van 123ventilatiesysteem ben ik een kijkje gaan nemen in het magazijn. Het magazijn dat gevestigd is op het industrieterrein van Uden heeft een oppervlakte van zo’n 300m2. Toen ik binnenkwam besefte ik pas hoeveel en hoe groot de producten waren. Alle producten lagen netjes per categorie bij elkaar in grote dozen maar toch leek het alsof er totaal geen structuur in zat.
In de huidige website staan een aantal categorieën. Deze bevatten enkel producten zonder sub-categorie. In één categorie staan alle producten dus door elkaar. Een duidelijk voorbeeld hiervan is bij de categorie “bochten”. Het is goed te zien dat de producten door elkaar staan zonder enige structuur. Ook hebben alle producten een zeer korte en matige productomschrijving. Daarnaast is het onmogelijk om meerdere aantallen in de winkelmand te stoppen. Wederom komt de groene kleur weer terug in dit scherm.
Het begint bij structuur | Pagina 16
Het bezoeken en onderzoeken van het magazijn hoort bij de veld-strategie. De veld-strategie heb ik gebruikt om een beter beeld te krijgen van de organisatie en de Het begint bij structuur | Pagina producten.
17
Probleemstelling Nu de huidie website onder de loep is genomen heb ik deze analyse samengevat en hieruit zijn vijf probleemstellingen naar voren gekomen:
Doel Mijn doel is om binnen een half jaar voor 123ventilatiesysteem een complete webshop te realiseren die minimaal voorzien is van de volgende punten:
1
De huidige huisstijl komt nu niet overeen met de gewenste uitstraling van 123ventilatiesysteem. (Deze wordt beschreven op pagina 21)
1
Bezoekers kunnen alle producten in een makkelijk overzicht vinden die onderverdeeld zijn in categorieën en sub-categorieën.
2
Het is onmogelijk om subcategorieën te maken en alle producten staan door elkaar.
2
3
Alle productafbeeldingen variëren van formaat wat erg onoverzichtelijk overkomt.
De webshop moet helemaal volledig zijn. Er staat nergens dummy tekst, er staan betalings- en inlogsystemen op en alle producten zijn op de site te vinden.
3
4
De producten moeten allemaal één voor één worden ingeladen.
Producten kunnen worden ingeladen.
4
5
Er staat veel dummy tekst op de website wat zeer onprofessioneel overkomt.
De site heeft een vernieuwde huisstijl wat aansluit bij de gewenste uitstraling van 123ventilatiesysteem.
5
Er moet goed gekeken worden naar SEO zodat de webshop makkelijker te vinden is via zoekmachines.
per
Werkzaamheden Voordat ik ben begonnen met het maken van de webshop heb ik samen met Thymen gekeken naar een nieuwe structuur. We hebben een aantal concurrenten bekeken en per website gekeken wat we mooi en vooral wat we bruikbaar vonden voor de nieuwe site voor 123ventilatiesysteem. Dit hebben we samengevoegd en daar zijn een aantal schetsen uitgekomen die ik vervolgens heb gedigitaliseerd.
categorie Een belangrijk onderdeel is dat de gebruiker snel een overzicht heeft van de producten die op de site staan. Al snel kwamen we tot de conclusie dat de belangrijkste categorieën op de hoofdpagina moeten komen staan. Als eyecatcher hebben we ervoor gekozen om de pagina te beginnen met een grote slider. Hierop kunnen we aanbiedingen plaatsen die de pagina compleet maken.
Wanneer je een categorie kiest krijg je de sub-categorieën te zien. Heeft deze categorie geen sub-categorieën dan worden alle producten van deze categorie getoond.
Het begint bij structuur | Pagina 18
Het begint bij structuur | Pagina 19
Huisstijl
Om de site een nieuw en fris uiterlijk te geven heb ik de huidige huisstijl van 123ventilatiesysteem aangepast. Ik ben begonnen met het zoeken van nieuwe kleuren. Dit nieuwe kleurgebruik heb ik doorgevoerd naar de website, het logo en vervolgens ook naar het briefpapier.
Wanneer alle producten worden getoond krijg je per product een korte beschrijving te zien. Van elk product krijg je een duidelijke afbeeldingen te zien met daarnaast alle verschillende maten van dit product. Ook kan je een aantal selecteren wanneer je meerdere producten wilt bestellen. Op deze manier kan je op een overzichtelijke manier veel producten laten zien en toch ziet de pagina er rustig en gestructureerd uit.
Kleurgebruik Samen met Thymen hebben we gekeken naar de gewenste uitstraling. We vonden het belangrijk dat de nieuwe webshop professionaliteit en betrouwbaarheid uitstraalt. Ik ben gaan kijken naar de betekenis van kleuren en al snel werd mij duidelijk dat de combinatie van blauw en wit goed past bij de gewenste uitstraling van 123ventilatiesysteem (Thuijs, L, 2015) . Vervolgens ben ik gaan kijken naar de concurrentie (Wildkamp, Wasco, Ventilatieshop, Bergschenhoek). Deze sites gebruiken allemaal als basiskleuren blauw en wit. Mijn gevoel werd hier dus sterk bevestigd.
Vervolgens ben ik gaan zoeken naar de juiste kleur blauw. Na veel kleuren testen ben ik uitgekomen op #00A3EO (RGB 0, 163, 224). Dit is een heldere, frisse kleur blauw wat mooi te combineren is met zwart en wit. In de volgende afbeeldingen is duidelijk het verschil te zien tussen het oude en de nieuwe kleuren van de website.
Oud kleurgebruik
Nieuw kleurgebruik
Het begint bij structuur | Pagina 20
Het onderzoek dat ik heb gebruikt bij het onderzoeken naar de betekenis van kleuren valt onder de Bieb-strategie. Hier heb ik beschikbaar werk gebruikt bij het kiezen en onderbouwen van mijn keuzes.
Het begint bij structuur | Pagina 21
Het Logo Omdat het logo nog niet op drukwerk gebruikt werd en om de hele site een nieuwe look and feel te geven heb ik ook het logo aangepast. Ik heb het nieuwe kleurgebruik toegepast in het nieuwe logo wat nu veel beter past bij de website.
Slider De slider is de eyecatcher van de website en bepalend voor het eindresultaat. Samen met Thymen en Josine hebben we drie onderwerpen samengesteld die we belangrijk vonden om op te laten vallen op de homepagina.
Onderwerp 1 Het verkopen van SAFE producten. SAFE producten houdt in dat deze producten voorzien zijn van een rubberen ring. Deze ring zorgt ervoor dat ze direct in de correcte positie komen en dit maakt maakt het installeren eenvoudiger. Ook hebben SAFE producten meteen een luchtdichte verbinding. Onderwerp 2 Alle klanten krijgen 10% korting bij de eerste bestelling.
In het begin was Thymen nog niet overtuigd over het nieuwe logo. Hij vond het oude logo prima en zag geen reden voor een nieuwe. Toen heb ik met Thymen rond de tafel gezeten en uitgelegd dat de site met het nieuwe logo mooier wordt en dat hij met het nieuwe design veel meer betrouwbaarheid uitstraalt en professionaliteit uitstraalt. Gelukkig heb ik hem daarmee overtuigd om het nieuwe logo te gebruiken. Als aanpassing vroeg hij of ik “.nl”kon toevoegen aan het logo zodat er nog meer naar de site verwezen wordt. Briefpapier Om professioneel en betrouwbaar over te komen heb ik nieuw briefpapier ontworpen. Hierbij heb ik het design in één lijn doorgetrokken. Het briefpapier wordt voornamelijk gebruikt als factuur en als pakbon. Om inspiratie op te doen heb ik eerst wat voorbeelden bekenen online. Ik besloot om het design rustig te houden en natuurlijk heb ik de nieuwe huisstijl (kleurgebruik en logo) doorgevoerd in het briefpapier. Thymen was erg tevreden en het nieuwe design werd meteen goedgekeurd. In bijlage A is het nieuwe briefpapier weergegeven.
Het begint bij structuur | Pagina 22
Omdat 123ventilatiesysteem wil werken met klantenkortingen krijgen bezoekers al 10% korting bij het maken van een account. Dit moet natuurlijk duidelijk op de site staan om het registreren extra te motiveren. Onderwerp 3 Alle prijzen op de site zijn excl. 21% BTW 123ventilatiesysteem richt zich vooral op business to business. Dit wil zeggen dat andere bedrijven producten kopen om deze vervolgens zakelijk te gebruiken. De btw kunnen ze dan terugvragen. Het is belangrijk dat dit duidelijk gemeldt wordt op de website. We hebben ervoor gekozen om onderwerp 3 in een banner te plaatsen omdat het belangrijk is dat de bezoekers dit zien en de banner blijft altijd in beeld. Om deze banner te maken heb ik eerst wat voorbeelden gezocht. Vervolgens heb ik via Photoshop een design gemaakt. Ik heb ervoor gekozen om alleen de kleuren wit en blauw te gebruiken omdat de slider de echte eyecatcher van de site moet zijn.
Het begint bij structuur | Pagina 23
De huidige slider was erg donker, had weinig inhoud en werd bedekt door een groot watermerk. Het was nodig dat deze vervangen moest worden zodat de site een nieuwe uitstraling kreeg. Allereerst ben ik begonnen met het ontwerpen van twee nieuwe sliders. Op de eerste slider heb ik me volledig gericht op de SAFE producten en de tweede slider is gericht op korting die de bezoeker krijgt na het maken van een account.
“Een n ieuw verfris send uiterlij k� Dit is al een hele verbetering ten opzichte van (t.o.v.) de eerste slider maar toch was ik hier nog niet helemaal over tevreden. Ik vond het lastig om een mooie slider te maken omdat de ventilatieproducten totaal geen charme hebben. Samen met Josine heb ik opnieuw naar de sliders gekeken en weer twee nieuwe ontwerpen gemaakt. Josine heeft mij hierbij geholpen en tips gegeven om ondanks deze producten toch een mooi design te maken. Deze sliders zien er een stuk beter uit en geven de website een nieuw verfrissend uiterijk. Het was een hele uitdaging maar het was zeker de moeite waard. Ik heb hier veel van geleerd en ben zeer tevreden met het eindresultaat.
Het begint bij
Tijdens het her-ontwerpen van deze sliders heb ik gebruik gemaakt van de Werkplaats-strategie. structuur | PaginaDoor 24 de stappen die ik heb gemaakt ben ik tot het totale product gekomen
Het begint bij structuur | Pagina 25
Lettertype Typografie en fontkeuze zijn essentieel voor de uitstraling van een website. Een juist lettertype in combinatie met een juiste layout zorgt ervoor dat de leesbaarheid sterk vergroot wordt.
Het lettertype dat ik heb gekozen is "Lato”. Lato is een schreefloos lettertype ontworpen in 2010. Het is een makkelijk leesbaar lettertype dat vooral online veel gebruikt wordt. Uit onderzoek (Awwwards-team) blijkt dat Lato in de top 20 online lettertypes staat.
“ WEB DESIGN IS
95%
Productprijs 123ventilatiesysteem zit zo’n 30-40% onder de verkoopprijs van de concurrentie. Dit kunnen ze realiseren vanwege het grote magazijn en de hoeveelheid waarmee ze inkopen. Omdat ventilatiesystemen bij elk bedrijf van dezelfde kwaliteit zijn sta je sterk wanneer je goedkoper bent dan je concurrentie. Hierdoor hebben we ervoor gekozen om dit voordeel ook uit te stralen op de website. Een goed voorbeeld hiervan is dat alle producten op de website in de aanbieding zijn. Elk product heeft een doorgestreepte oude prijs en een duidelijkere nieuwe prijs. Om dit te realiseren ben ik diep in de php code gedoken. Ik moest zorgen dat over elke afbeelding de oude en nieuwe prijs verscheen. Vervolgens heb ik dit in een blauw rondje gezet zodat het de aandacht trekt van de bezoeker. In het voorbeeld hieronder is duidelijk te zien welke stappen ik heb doorlopen. Het heeft flink wat tijd gekost maar ik er ook veel van geleerd.
TYPOGRAPHY “ (Michael, 2014)
Productafmeting Voor een rustige positionering en vlakverdeling is het belangrijk dat alle productfoto’s even groot zijn. Ik heb gekozen om alle afbeeldingen vierkant te maken met een hoogte en breedte van 300 pixels. Om de afbeeldingen nog mooier te krijgen heb ik deze voorzien van witte achtergrond. Dit oogt mooier, geeft de pagina meer rust en zorgt voor voldoende witruimte rondom de afbeeldingen.
Het begint bij structuur | Pagina 26
Het begint bij structuur | Pagina 27
t e i z e it s b e w “De gelijk en er de baar uit” w u o r t e b
Aantal Om makkelijk grote aantallen te bestellen heb ik ervoor gezorgd dat de bezoeker meerdere producten in een keer kan toevoegen in de winkelwagen. Het aantal staat standaard op 1 en kan met een druk op de knop worden aangepast. Het product wordt pas in de winkelwagen toegevoegd wanneer er op “bestellen” wordt gedrukt. Deze functie kijkt ook naar het aantal producten op voorraad zodat er nooit producten worden besteld die niet op voorraad zijn. Ook uit de gebruikerstesten (pagina 33) is duidelijk te zien dat bezoekers dit ook verwachten en gebruiken op een website
Betalingen De bezoekers kunnen kiezen om de producten contant te betalen bij afhalen of te betalen met Ideal. Om iDeal te implementeren hebben we contact opgenomen met Sisow. Sisow is gespecialiseerd in digitale betaalmogelijkheden en met een paar simpele handelingen was iDeal geïmplementeerd op de website. Een groot voordeel van Sisow is dat ze niet werken met abonnementskosten maar je per transactie betaald.
Het logo van iDeal is onderaan in de footer weergegeven. Mensen zijn bekend met het iDeal logo en hebben nu een extra herkenningspunt. Dit om betrouwbaarder over te komen. Het begint bij structuur | Pagina 29
Bezorging Omdat PostNL geen grotere pakkett en dan 176cm verstuurd en veel ventilatie producten groter zijn heeft Thymen ervoor gekozen zijn pakketten zelf te gaan bezorgen. Om alle kosten te berekenen heeft Thymen aan de hand van postcodes zijn bezorgtarief opgesteld die ik heb doorgevoerd in de site.
A.d.h.v. de postcode van de gebruiker weet de site hoeveel de besteller extra moet betalen om de producten te laten bezorgen. De klant kan er ook voor kiezen om de producten gratis op te halen. Vanaf 400 euro bezorgd Thymen de producten gratis. Ook dit wordt automatisch berekend en weergegeven in het afrekenscherm.
Van Thymen kreeg ik de vraag of het mogelijk was dat de gebruiker aan kon geven wanneer het product bezorgd kan worden. Dit heb ik gerealiseerd d.m.v. de “order delivery date” plugin. Hierin heb ik aangegeven dat er alleen maandag t/m vrijdag bezorgd wordt. Ook wordt deze informatie meegestuurd in de mail zodat zowel Thymen als de klant hiervan op de hoogte wordt gebracht.
Het begint bij structuur | Pagina 30
Producten uploaden Omdat het enorm veel werk is om alle producten één voor één op de site te plaatsen ben ik gaan zoeken of het mogelijk is om deze producten per categorie te uploaden. Er zijn een aantal plugins die beweren deze optie makkelijk te kunnen maar dit bleek een stuk ingewikkelder dan verwacht. Na een aantal plugins te hebben geprobeerd kwam ik uiteindelijk op “All import”. Met deze plugin was dit eindelijk mogelijk maar ook hier kwam ik flink wat problemen tegen. Ik heb eerst testbestanden geupload om te begrijpen hoe deze plugin werkte en waar ik alle velden moest plaatsen. Al snel kwam ik erachter dat ik alleen maar .CSV bestanden kon gebruiken en wanneer ik afbeeldingen ging uploaden moest ik eerst in broncode zoeken waar de producten kwamen te staan zodat ik de juiste afbeeldingen aan kon roepen. Toen dit eindelijk perfect was gelukt heb ik voor Thymen een opzet gemaakt hoe zijn bestand eruit moest komen te zien en dit heeft hij keurig per categorie aangeleverd in een Excel bestand. Dit Excel bestand kon ik vervolgens exporteren naar een .CSV bestand zodat ik hem kon uploaden op de site. In het Excel bestand stond de volgende informatie - Categorie - Sub categorie - Sub sub categorie (optioneel) - Productnaam - Aantal (voorraad) - Productomschrijving - Doorgestreepte prijs - Prijs
In totaal staan er 531 verschillende producten op de site onderverdeeld in 54 categorieën, 8 hoofdcategorieën en 46 subcategorieën. Deze bestanden heb ik per hoofdcategorie geupload op de site. Vervolgens heb ik alle categoerieën voorzien van bepaalde instellingen en de juiste afbeeldingen. Elk product is voorzien van een naam, oude prijs, nieuwe prijs, afbeelding en een uitgebreide beschrijving.
Het begint bij structuur | Pagina 31
User testing
Responsive design
Het is erg belangrijk dat de gebruiker de gewenste taken makkelijk uit kan voeren zonder daarbij veel na te hoeven denken of lang te moeten zoeken. Om dit te testen heb ik met een aantal personen een gebruiksvriendelijkheidstest gehouden. Voordat ik ben begonnen met het opstellen van deze testen ben ik eerst informatie gaan verzamelen om de testen zo goed mogelijk uit te voeren. Van de Sande (2014) concludeert in haar onderzoek dat een geoptimaliseerde website simpelweg meer oplevert. Ook maakt ze gebruik van dit schema om de beste resultaten uit het onderzoek te halen. 1. Doelstelling 2. Onderzoeksvragen 3. Testscript 4. Testen 5. Analyse 6. Resultaten verwerken 1 Doelstelling Doel van het onderzoek is erachter komen hoe de website verbeterd kan worden, zodat bezoekers makkelijker door de website navigeren. 2 Onderzoeksvragen - Navigeert de gebruiker makkelijk door de pagina’s? - Weet de gebruiker zonder enige problemen producten te bestellen en deze af te rekenen?
Responsive Uit Google Analytics (pagina 34) blijkt dat 84% de website bezoekt via desktop. Dit betekent dat 1 op de 6 bezoekers de website bezoekt via tablet of smartphone. Ook voor die bezoekers is het erg belangrijk dat de website zo optimaal mogelijk wordt weergegeven. Elke gebruiker moet de site zo optimaal mogelijk te zien krijgen voor de beste beleving en gebruiksgemak.
3 Testscript In het testscript staat wat de respondent te wachten staat en wat er van hem/haar wordt verwacht. Zo wordt er vermeldt dat er geen tijdsdruk op zit, dat het beeldscherm wordt gefilmd, er geluid wordt opgenomen en vraag ik de respondent hardop te denken. Het volledige testscript is te vinden in bijlage B.
De Bieb-strategie heb ik gebruikt bij het onderzoeken van de verschillende user tests. Dit beschikbare werk heb ik gebruikt bij het kiezen en onderbouwen van mijn gemaakte keuzes.
Bij het uitvoeren van de user tests heb ik gebruik gemaakt van de Lab-strategie. Via deze strategie kan ik goed nagaan hoe de gebruikers handelen en de woorden “meten is weten” staan hier centraal.
Het begint bij structuur | Pagina 32
Het begint bij structuur | Pagina 33
4 Testen Bij het kiezen van de respondenten ben ik begonnen met zoeken in mijn eigen omgeving. Ik ben via-via in contact gekomen met personen die regelmatig werken met ventilatiesystemen. Daarnaast heb ik willekeurige studenten op de Fontys uitgekozen om mij hiermee te helpen. Ik heb ervoor gekozen om zo min mogelijk personen te kiezen uit mijn directe omgeving vanwege het risico dat ik sociaal wenselijke antwoorden kan krijgen. Mijn eerste test was met Roy Koolen en uit dit onderzoek is ook het meest uitgekomen. Dit is ook de reden dat ik dit onderzoek het uitgebreidst heb geanalyseerd. Alle onderzoeksresultaten zijn te bekijken in bijlage C.
6 Resultaten verwerken De resultaten uit het onderzoek heb ik met Thymen besproken en samen hebben we gekeken wat er aangepast moest worden om de gebruiksvriendelijkheid te vergroten. 1.
Alle links op de website zijn dubbel gecheckt en aangepast waar nodig was.
2.
Om duidelijker te maken dat de bezoeker kan kiezen om de producten zelf af te halen heb ik de dropdown balk veranderd naar keuze-rondjes. Uit de testen daarna bleek dat dit een hele verbetering was.
3.
Om duidelijker te maken dat een pagina uit meerdere pagina’s kan bestaan heb ik de pagina-nummering blauw gemaakt en ook wat groter. Ook dit probleem was hierna meteen opgelost bleek uit de testen daarna.
4.
Bij een aantal respondenten duurde het even voordat ze wisten waar ze de kortingscode in moesten vullen. Ik heb het blauwe vak eromheen groter gemaakt en ook het lettertype is aangepast.
5 Analyse Het is erg goed geweest dat ik de website heb getest op gebruiksvriendelijkheid. Er zijn uit de testen een aantal punten gekomen waar ik anders nooit op was gekomen. Het is erg interessant om te zien dat elk persoon anders reageert en anders door de website navigeert. 1.
Tijdens het eerste onderzoek met Roy kwam ik erachter dat er nog een aantal links die doorverwijzen naar de test-site. Op het filmpje (1.27min.) is duidelijk te zien wanneer Roy op verbindingsstukken klikt hij doorverwezen wordt naar de andere site. Gelukkig had Roy dit zelf niet in de gaten dus dit heeft het onderzoek niet beïnvloed.
2.
Toen Roy de opdracht kreeg om een koppelstuk te bestellen zocht hij naar “sok”. Omdat sok nergens beschreven staat kreeg hij geen zoekresultaten. Gelukkig kon hij het product daarna wel makkelijk vinden en er is verder ook door niemand meer naar gezocht. Met Thymen heb ik dit besproken maar hij vond het niet nodig dit door te voeren in de website. “Voor elk product zijn er verschillende benamingen. Ik heb veel concurrenten onderzocht en ook zij gebruiken alleen de officiële benaming.”
3.
De opdracht was om bepaalde producten te bestellen en aan te geven dat hij de producten zelf gratis wil afhalen. Echter kon Roy nergens vinden waar dit moest. Hij was op de goede pagina maar keek telkens over de dropdown balk heen. Het is een kwalijke zaak wanneer de bezoeker een functie niet kan vinden.
4.
Het viel Roy niet meteen op dat sommige product-pagina’s uit meerdere pagina’s bestaan. Dit moet wel duidelijk zijn om alle producten goed te kunnen zien.
5.
Een aantal respondenten viel het niet meteen op waar ze de kortingscode moesten invullen. Ikzelf dacht dat dit erg duidelijk was maar uit dit onderzoek kwam duidelijk naar voren dat dit niet zo bleek te zijn.
Conclusie Ik kan terugkijken naar een goed onderzoek waar prima resultaten uit zijn gekomen. Zoals hierboven beschreven staat zijn alle punten inmiddels verbeterd. Het viel me op hoe makkelijk bezoekers door de pagina’s navigeerde en hoe snel ze de producten konden vinden. Ook het aanmaken van een account en het bestellen van producten zorgden voor weinig problemen.
De punten die tijdens de user tests zijn opgevallen heb ik aangepast en door middel van de showroom-strategie vergeleken. Uit de showroom-strategie is duidelijk naar voren gekomen dat deze punten goed zijn aangepast omdat de respondenten hier niet meer over struikelden.
Het begint bij structuur | Pagina 34
Het begint bij structuur | Pagina 35
Analyse Inmiddels staat de nieuwe website van 123ventilatiesysteem enkele weken live. De oude website werd niet tot nauwelijks bezocht en kan ik eindelijk kijken of daar verandering in is gekomen. Ook zijn er twee nieuwsbrieven verstuurd om nieuwe klanten te benaderen en kennis te laten maken met het bedrijf. Met Google Analytics kan ik een overzichtelijk beeld generen van alle gebeurtenissen die zich op de site hebben afgespeeld. Via Referrer Spam Blocker (RSB) zijn alle bezoekers gefilterd op “echte” en “neppe” bezoekers. Ook Doelgroepoverzicht worden hiermee alle bezoekers met het IP adres van Studio Frisselstein niet meegerekend dus alle uitslagen zijn van externe en echte klanten. 123 Ventilatiesysteem http://www.12… Master View VST
Paginaweergave Via Page Analytics krijg ik een overzichtelijk beeld van alle gebeurtenissen op de website. Wat mij opvalt is dat er veel op de winkelwagen wordt geklikt en de pagina’s in het menu worden bijna niet bekeken. De producten in de top categorieën worden redelijk vaak bekeken. Dit is positief want dit kan betekenen dat bezoekers specifiek zoeken naar bepaalde producten.
Naar dit rapport gaan
2 nov. 2015 6 jan. 2016
[RSB] All Sessions 47,96%
Overzicht
Bezoekers In twee maanden tijd is de website 481 keer bekeken door 426 verschillende gebruikers. In het volgende overzicht is duidelijk te zien wanneer de nieuwsbrieven zijn verstuurd. Je ziet hier duidelijke pieken wat betekent dat de nieuwsbrieven wel degelijk invloed hebben op het bezoekersaantal van de website.
Sessies 200
100
8 nov.
22 nov.
6 dec.
20 dec.
New Visitor Sessies
Gebruikers
Paginaweergaven
[RSB] All Sessions
[RSB] All Sessions
[RSB] All Sessions
Pagina's/sessie
Gem. sessieduur
Bouncepercentage
[RSB] All Sessions
[RSB] All Sessions
[RSB] All Sessions
481
426
Returning Visitor
1.404
42,2%
2,92
00:01:18
57,8%
44,91%
% nieuwe sessies [RSB] All Sessions
57,80%
Taal
Sessies
1. nlnl
212
% Sessies 44,07%
2. nl
205
42,62%
Apparaten Uit de analyse blijkt dat de meeste bezoekers (84%) op de website komen via een desktop. Gevolgd door mobiel (12%) en de rest bekijkt de website met een tablet (4%). Deze gegevens zijn niet helemaal waterdicht omdat niet alle tablets ook echt herkend worden als tablet. Toch zijn de verschillen zo groot dat het duidelijk is dat het grootste deel van de bezoekers de website bezoekt door middel van een desktop. 3. enus
46
4. ruru
7
1,46%
9,56%
5. c
6
1,25%
6. es
3
0,62%
7. en
2
0,42%
© 2016 Google
84% 4% 12% Het begint bij structuur | Pagina 36
Het begint bij structuur | Pagina 37
Nieuwsbrieven Om meer naamsbekendheid te genereren en het bezoekersaantal van de website een boost te geven hebben we twee nieuwsbrieven verstuurd naar 4.373 adressen. De eerste nieuwsbrief is verstuurd op 30 November en de tweede op 17 December. De nieuwsbrieven zijn verstuurd via MailChimp waarmee je achteraf een heel overzichtelijk beeld krijgt over hoe de acties zijn verlopen en wat de response was. Nieuwsbrief 1
Nieuwsbrief 2
Resultaten nieuwsbrieven Nieuwsbrief 1 In totaal heeft 34,4% deze mail geopend wat neerkomt op 1.463 bedrijven. Van die bedrijven zijn er 76 via een link doorverwezen naar de website. Nieuwsbrief 2 Deze nieuwsbrief is door 29,7% geopend en 21 bedrijven zijn doorgelinkt naar de website. Het lijkt erop dat de eerste nieuwsbrief beter ontvangen is dan de tweede. Maar dit is niet het geval. Uit het overzicht hieronder is duidelijk te zien dat de website bij de 2e nieuwsbrief duidelijk minder vaak bekeken wordt dan de 1e. Daarentegen is de gemiddelde tijdsduur op de website bij 123 Ventilatiesysteem http://www.12… Naar dit rapport gaan de 2e nieuwsbrief 36% langer. Ook het bouncepercentage is bij de laatste nieuwsbrief een stuk Master View VST lager. 16 dec. 2015 23 dec. 2015
Doelgroepoverzicht
Vergelijken met: 29 nov. 2015 6 dec. 2015 Dus het klopt dat de 1e nieuwsbrief meer mensen naar de site heeft gebracht maar de bezoekers die via de 2e nieuwsbrief de site hebben bezocht zijn langer op de website gebleven. [RSB] All Sessions 32,54%
Overzicht
16dec2015 23dec2015:
Sessies
29nov2015 6dec2015:
Sessies
200
100
…
17 dec.
18 dec.
19 dec.
20 dec.
21 dec.
22 dec.
New Visitor Sessies
Gebruikers
Paginaweergaven
[RSB] All Sessions
[RSB] All Sessions
[RSB] All Sessions
103 versus 245
101 versus 238
272 versus 507
57,96%
57,56%
23 dec.
Returning Visitor
16dec2015 23dec2015
46,35%
46,6%
Pagina's/sessie
Gem. sessieduur
Bouncepercentage
[RSB] All Sessions
[RSB] All Sessions
[RSB] All Sessions
2,64 versus 2,07
00:00:42 versus 00:00:31
36,89% versus 48,16%
27,61%
36,45%
53,4%
23,40%
29nov2015 6dec2015 % nieuwe sessies [RSB] All Sessions
0,63%
53,40% versus 53,06%
Taal
Het begint bij structuur | Pagina 38
46,9% 53,1%
Sessies
% Sessies
1. nlnl
16dec2015 23dec2015
29nov2015 6dec2015
Wijzigingspercentage
54,37%| Pagina 39 Het begint 56 bij structuur 120 53,33%
48,98% 11,00%
Evaluatie en aanbevelingen
Feedback Thymen
Evaluatie Ik heb met veel plezier aan deze opdracht gewerkt en heb er ontzettend veel van geleerd. Zo is mijn kennis op het gebied van webdesign, WordPress en SEO enorm verbeterd maar vooral in het handelen als een professional heb ik grote stappen gemaakt. Het was een enorme uitdaging maar onwijs leuk om voor een echte opdrachtgever aan de slag te gaan en zelf problemen op te lossen, zonder daarbij terug te kunnen vallen op leraren of medeleerlingen. Als ik terugkijk naar mijn stageperiode ben ik tevreden en trots. Ik kan zeggen dat het mij is gelukt om een complete webshop te realiseren.
De samenwerking tussen Thijs en mij heb ik als prettig ervaren. Vanaf het begin is Thijs betrokken geweest bij het opzetten van 123ventilatiesysteem.nl. In het begin was er nog niks behalve het idee en de inventarisatie van de producten in het magazijn. Inmiddels staat 123ventilatiesysteem. nl als organisatie en dit is te danken aan de webshop die Thijs heeft opgeleverd.
Ook van de user tests die ik heb uitgevoerd heb ik veel geleerd. Het viel me op hoe verschillend mensen kunnen reageren op dezelfde opdrachten. Achteraf gezien had ik al eerder user tests uit kunnen voeren, maar dan op kleinere schaal. Elke keuze die je maakt kun je testen en dit werd mij achteraf pas echt duidelijk. Aanbevelingen Naar aanleiding van de verstuurde nieuwsbrieven heb ik onderzoek gedaan om het gedrag van de ontvangers te analyseren. Het valt op dat de website veel vaker bekeken wordt in de week dat er nieuwsbrieven zijn verstuurd. Het is ook duidelijk te zien dat de periode na het versturen van de nieuwsbrieven dit drastisch minder wordt. Mijn advies is dan ook om door te gaan met het versturen van nieuwsbrieven. Op deze manier komen steeds meer bedrijven in contact met 123ventilatiesysteem en de website. Uit recent onderzoek (Spaanbroek, z.j.) blijkt dat het versturen van nieuwsbrieven vaker dan één keer per week irritatie kan oproepen bij je ontvangers. Daarom raad ik aan om de nieuwsbrieven maximaal 1 á 2 keer per maand te versturen. Dit om het resultaat per nieuwsbrief goed te kunnen meten en het risico om in de spam te komen kleiner wordt naarmate een nieuwbrief minder vaak wordt verstuurd.
Het begint bij structuur | Pagina 40
Het prettige aan de samenwerking is dat de communicatie lijnen kort zijn. Veel communicatie gebeurd via e-mail, echter als dit onduidelijkheden geeft dan loopt Thijs gewoon even binnen om zaken kort te sluiten. Verder pakt Thijs problemen snel op en draagt hij een oplossing aan. Dit is prettig omdat als opdrachtgever op deze manier wordt gerustgesteld. Verder een verbeterpunt voor Thijs dat ik hem mee zou willen geven is het managen van verwachtingen. Niet qua functionaliteit van zaken maar de tijdsindicatie die eraan verbonden is. Dit heeft zich slechts enkele keren voorgedaan, met name in het begin van de samenwerking. Niks meer dan het logisch gevolg van het feit dat het voor alle partijen een nieuw project betrof waar veel zaken in het begin nog onduidelijk waren. Ik zou zeker nog een keer de samenwerking aangaan met Thijs. Hij heeft een prettige manier van werken en communiceren. Pakt zaken snel op, werkt probleemoplossend en werkt met het oog op de toekomst. Voorziet problemen en sluit deze uit. Dit wordt ervaren als prettig door mij en mijn collega’s.
Het begint bij structuur | Pagina 41
Literatuurlijst
Bijlage A Briefpapier
Awwwards-team. (2013, 19 juni). 20 Best Web Fonts from Google Web Fonts and font-face [Blogpost]. Geraadpleegd van http://www.awwwards.com/20-best-web-fonts-from-googleweb-fonts-and-font-face.html
Ventilatiesysteem.nl
Michael, S. (2014, 26 februari). Web Design Typography & Why it IS a Big Deal [Blogpost]. Geraadpleegd van http://webdesignledger.com/web-design-typography-why-it-is-a-big-deal Sande, C. van de. (2014, 18 november). Usability testen: Het wat, waarom, wanneer en hoe? [Blogpost]. Geraadpleegd van http://level-level.com/usability-testen-de-wat-waarom-wanneeren-hoe/ Spaanbroek, L. (z.j.). De optimale frequentie voor het versturen van je eZine Nieuwsbrief [Blogpost]. Geraadpleegd van http://www.infomarketeers.nl/de-optimale-frequentie-voor-het-versturen-van-je-ezine-nieuwsbrief/ Thuijs, L. (2015, 15 augustus). Betekenis van kleuren in je huisstijl. Geraadpleegd van http://lindathuijs.nl/betekenis-van-kleuren-in-je-huisstijl/ Zelfstandigen zonder personeel (zzp). (z.j.). Geraadpleegd van https://www.rijksoverheid.nl/onderwerpen/zelfstandigen-zonder-personeel-zzp
Het begint bij structuur | Pagina 42
123ventilatiesysteem
0413 72 60 04
Frisselsteinstraat 5
info@123ventilatiesysteem.nl
KvK 04028436
5461 AD Veghel
www.123ventilatiesysteem.nl
BTW NL005864483B01
Bijlage B
Bijlage C
Testscript
Resultaten user testing
In het volgende onderzoek wil ik je vragen om de volgende opdrachten één voor één uit te voeren. Er zit geen tijdsdruk op dus je hebt alle tijd om deze opdrachten uit te voeren. Mocht je tijdens de opdrachten vragen stellen beantwoord ik deze achteraf. Het beeldscherm wordt gefilmd en het geluid wordt opgenomen dus ik wil je vragen om hardop te denken.
Roy Koolen is 25 jaar en komt uit Keldonk. Sinds 4 jaar runt hij samen met zijn vader een eigen installatiebedrijf in Erp. Regelmatig moet hij ventilatiesystemen monteren die hij online besteld. Roy past daarom perfect bij de doelgroep.
Opdrachten 1.
Stop één koppelstuk diameter 200mm in je winkelwagen
2.
Maak een account aan en kopieer je persoonlijke kortingscode
Met Roy heb ik een gebruikerstest uitgevoerd. Ik heb hem de website voorgelegd en hem een aantal opdrachten laten uitvoeren. Het beeldscherm is hierbij gefilmd zodat de test makkelijker te analyseren is.
3. Stop de volgende producten in je winkelwagen - Één SAFE T-stuk 90º diameter 150-150mm - Drie SAFE ophangbeugels diameter 315 4.
Reken deze producten af en gebruik je persoonlijke kortingscode. Geef aan dat je de producten zelf wilt afhalen.
5.
Je hebt een vraag over een bepaald product. Neem contact op met 123ventilatiesysteem.
Vragenlijst 1.
Wat is je algemene indruk van de website?
2.
Vind je het makkelijk om producten te bestellen? Waarom wel en/of niet?
3.
Vind je dat je makkelijk een account aan kan maken? Waarom wel en/of niet?
Vragenlijst 1.
Wat is je algemene indruk van de website? De website ziet er heel netjes en overzichtelijk uit. Er zitten mooie afbeeldingen in en het kleurgebruik past goed bij de producten.
2.
Vind je het makkelijk om producten te bestellen? Waarom wel en/of niet? Ja, omdat er duidelijke afbeeldingen bijstaan. Zo weet je precies dat je het goede product hebt. Ook is het fijn dat rechtsboven je winkelwagen wordt getoond met alle producten die hierin zitten.
3.
Vind je dat je makkelijk een account aan kan maken? Waarom wel en/of niet? Ja. In de manubalk staat duidelijk de account link. Ook een account aanmaken werkt goed en is erg duidelijk.
4.
Zou je op deze site zelf producten kopen? Waarom wel en/of niet?
4. Zou je op deze site zelf producten kopen? Waarom wel en/of niet? Ja, ik zou hier gerust producten durven kopen. De website ziet er degelijk en betrouwbaar uit.
5.
Wat vind je van het kleurgebruik?
5.
Wat vind je van het kleurgebruik? Rustig, dus goed.
6.
Heb je verder nog opmerkingen?
6.
Heb je verder nog opmerkingen? Misschien is het een idee om bovenin de website “welkom R. Koolen” te laten zien wanneer ik ben ingelogd. Dan weet de gebruiker zeker dat hij is ingelogd en dit maakt de site nog persoonlijker.
Hartelijk bedankt voor het meewerken aan dit onderzoek.
De test van Roy is te bekijken op: https://www.youtube.com/watch?v=pgq7epjz120&feature=youtu.be
Krijn van de Kerkhof 20 jaar Student ICT & Media Design
Selime 23 jaar Student ICT & Media Design
Het is een goede en duidelijke website. Je weet precies waar het over gaat. Het kopen van de producten voelt veilig en betrouwbaar. Vergelijkbaar met bedrijven als bol.com.
De site ziet er goed en duidelijk uit. Hij komt betrouwbaar over, net als alle andere professionele webshops.
Het is erg duidelijk om producten in de winkelwagen te stoppen en afrekenen is ook direct duidelijk. Je hoeft maar twee velden in te vullen om een account aan te maken. Dit is ideaal. Verder zou ik hier gerust producten durven kopen als ik deze nodig had.
Producten bestellen is erg makkelijk ondanks dat ik totaal geen verstand heb van ventilatiesystemen. Ook een account aanmaken werkt zoals het hoort. Het kleurgebruik vind ik erg rustgevend en de juiste keuze. Niet te veel kleuren gecombineer, dit is fijn om naar te kijken. Het duurde even voordat ik de kortingscode kon invullen. Dit vak mag wel duidelijker in beeld.
Het kleurgebruik is goed en rustig. het blauw komt vertrouwd over. mooie website.
Willie van Asten 53 jaar Werkvoorbereider (gemeente Gemert) De site ziet er erg duidelijk uit. Alles goed in categorieën waardoor het makkelijk te vinden is. Het is eenvoudig om producten te vinden en in je winkelmand te plaatsen. Ook het aanmaken van een account was erg eenvoudig. Aanklikken, invullen, klaar. Ik zou echt niet weten wat ik met deze producten zou moeten doen. Mocht ik in het vak zitten dan zou ik hier zeker producten durven te bestellen. Het kleurtje had er van mij harder uit kunnen knallen. Verder is het een een erg mooie en duidelijke website.
Thomas van der Plaat 24 jaar Student ICT & Media Design De website ziet er netjes en professioneel uit. Ik vind hem erg betrouwbaar overkomen en dat komt gedeeltelijk door het gebruik van de advertenties. Het ziet er goed uit. Vergelijkbaar met andere professionele websites. Je kunt tijdens het zoeken producten in je winkelwagen toevoegen. Dit is erg handig. De categorieën waren ook behulpzaam. Ikzelf had de account-knop rechts neergezet, maar hij stond ook in het menu. Dit is verder geen probleem. Het kleurgebruik is netjes. Het duurde even voordat ik wist waar ik mijn kortingscode in moest vullen. Verder heb ik geen op of aanmerkingen.
Thomas Neaum 24 jaar Verpleegkundige De website is erg modern, fris en makkelijk te bedienen. Ik wist meteen waar ik de producten moest vinden. Ook omdat je contact kunt opnemen geeft dit een betrouwbare indruk. Omdat de producten allemaal onder verschillende categorieën zijn verdeeld is het makkelijk om ze te vinden en meteen in je winkelwagen kunt toevoegen. Een account aanmaken is snel en makkelijk. Niet al te veel informatie invullen, dit is ook fijn. Het kleurgebruik is fris en modern.
Kim 21 jaar Student ICT & Media Design Mijn algemene indruk van de website is mooi, overzichtelijk en netjes. Je kan producten snel vinden en anders werkt de zoekbalk fijn. De site ziet er professioneel uit wat betrouwbaar overkomt. Het voelt veilig dat je ook direct contact op kunt nemen met het bedrijf. Ik heb twee manieren geprobeerd om producten te vinden. Via de tabbladen en via de zoekbalk. Beide ging perfect. De producten zijn duidelijk aangegeven en ook de afbeeldingen maakt het overzichtelijk. Het kleurgebruik vind ik mooi en fris. niet te bont of te kleurrijk. De kleuren passen bij elkaar, dit maakt het een mooi geheel.
Rens Vlaar 22 jaar Student ICT & Media Design
Freek Habraken 22 jaar Student bedrijfseconomie
Goed en strakke website.
De website ziet er verzorgd en strak uit. Mooie en duidelijke afbeeldingen met mooie kleuren.
Erg professioneel en het kleurgebruik is goed. Knoppen zijn erg duidelijk wat het makkelijk maakt om producten te bestellen. Ook een account aanmaken ging vloeiend.
Ik heb geen verstand van ventilatiesystemen maar door bij de zoekopdracht het product te zoeken kwam ik snel en eenvoudig bij het product.
Ik zou hier wel producten durven te kopen. Dit komt vooral door de afbeeldingen en het kleurgebruik.
Het aanmaken van een account is hetzelfde als het aanmaken van accounts op andere sites.
Ik vond de website wel een beetje traag reageren.
Ik zou hier makkelijk producten kunnen bestellen. Door de foto’s en de strakke uitstraling krijgt de website automatisch een kwaliteitsimpuls. Er is veel aandacht aan de producten besteedt. Het kleurgebruik is zoals hierboven al gemeld. Strak en duidelijk!
Marjoleine 54 jaar Lerares bassischool De website komt erg betrouwbaar en professioneel over. Ik vond het makkelijk om de producten te vinden en om deze toe te voegen aan de winkelwagen. Ook een account aanmaken werkt makkelijk en snel. Ik zou hier zelf wel producten kunnen kopen. Dit komt o.a. door de afbeeldingen bij de producten. Het kleurgebruik is zakelijk en professioneel. Mooi contract en niet te druk.
Wouter Noij 22 jaar Student ICT & Media Design De website ziet er clean, goed en duidelijk uit. Ik vind hem betrouwbaar overkomen. Wat ik opmerkelijk vind bij webshops is hoe minder afbeeldingen hoe minder betrouwbaar. Een foto van een persoon maakt het misschien nog betrouwbaarder. Het is erg makkelijk om producten te bestellen en de producten zijn makkelijk te vinden. Ook een account aanmaken is erg makkelijk. Misschien bevestig wachtwoord toevoegen. Het kleurgebruik ziet er prima uit. Duidelijk helder blauw is betrouwbaar.
Sam van de Kerkhof 21 jaar Student Psychologie De website is erg mooi en overzichtelijk. Door het kleurgebruik en de afbeeldingen komt de website betrouwbaar over. Ook goed dat je makkElijk contact kunt opnemen met het bedrijf. Het was erg makkelijk om een account aan te maken. Slechts twee invulvelden.
Maarten van Geel 21 jaar Student Orthopedische Technologie De website ziet er erg overzichtelijk uit.
Ik heb niks met deze producten, maar mocht ik deze nodig hebben zou ik hier wel producten kunnen kopen. De site ziet er gewoon verzorgd en veilig uit.
De website ziet er betrouwbaar uit. Er staat duidelijk wat er ingevuld moet worden alvorens je kan bestellen. Ook is het handig dat je kan kiezen of je contact of met iDeal wil betalen. Ook een account aanmaken werkt zoals gebruikelijk is.
De kleuren zijn mooi, helder en fris. Goed gecombineerd.
Als ik zelf ventilatieproducten nodig zou hebben zou ik hier gerust producten durven kopen.
Het duurde even voordat ik wist waar ik de kortingscode in moest vullen. Dit kan nog wel wat aandacht krijgen. Verder is het een hele mooie website.
Het kleurgebruik is simpel, maar wel heel duidelijk. Het invoeren van de kortingscode mag wat duidelijker aangegeven worden. Het is wel te vinden uiteindelijk, maar het mag wat groter.
Bijlage D
TITELPAGINA
Projectdocument
Ventilatiesysteem Ventilatiesysteem
Gegevens student TFM van Uden 2189393 ICT & Media Design Stageperiode van 31-08-2015 t/m 29-01-2016
Gegevens bedrijf Studio Frisselstein Frisselsteinstraat 5 5461 AD Veghel Josine van Berlo
Gegevens docentbegeleidster Jo-An Kamp j.kamp@fontys.nl
PROJECTDOCUMENT Projectdocument
Gegevens verslag Stageverslag Studio Frisselstein 09 - 09 - 2015
Thijs van Uden Thijs van Uden
Stageperiode Stageperiode Studio Frisselstein Frisselstein Studio
Pagina 2
INHOUDSOPGAVE
1.0
1.1
INLEIDING
1.0
1.1 1.2
Mijn stageopdracht Doel van het document
HET BEDRIJF 2.1 2.2 2.3
Mijn stageopdracht
Tijdens mijn stageperiode bij Studio Frisselstein ga ik aan de slag voor 123ventilatiesysteem om een complete webshop te realiseren. Samen met mijn opdrachtgever Josine van Berlo gaan we kijken naar de wensen en behoefte van 123ventilatiesysteem om de webshop zo optimaal mogelijk te maken.
1.2 2.0
PAG 4
Doel van dit document
In dit document ga ik de opdracht van het eindproduct verduidelijken. Zo hoop ik een beeld te creĂŤren hoe ik tot de opdracht ben gekomen en wat het eindproduct inhoudt.
Studio Frisselstein Rollen Organigram
DE OPDRACHT
3.0
3.1 3.2 3.3 3.4 3.5 3.6 3.7
Opdrachtomschrijving Doel Analyse van de opdracht Werkzaamheden Doelgroep Eisen Productecompositiestructuur
PAG 7
AANPAK
4.0
4.1 4.2
Aanpak Onderzoek
PLANNING
5.0
5.1
PAG 8
Projectplanning
AFSPRAKEN
6.0
6.1
INLEIDING
Communicatie afspraken
Pagina 3
Pagina 4
2.0
2.1
HET BEDRIJF
3.0 3.1
Studio Frisselstein
Studio Frisselstein is een communicatiebureau gevestigd in het Business Centrum Frisselstein in hartje Veghel. Een groot aantal klanten zitten in dit gebouw gevestigd of komen uit de omgeving Veghel. Ze richten zich vooral op het bedenken en ontwikkelen van communicatieoplossingen waarbij de klant zijn doel behaalt. Dit doen ze door de sterke en efficiënte combinatie van communicatie, creatie en management. De kracht van Studio Frisselstein is dat ze traditionele communicatie laten samenwerken met moderne communicatie. Denk hierbij aan het doortrekken van brochures, folders en advertenties naar de website of Social Media. Bij Studio Frisselstein kun je terecht voor zowel online en offline communicatieproducten: een passende huisstijl, een logo en op maat gemaakt drukwerk. Verder zijn ze gespecialiseerd in SEO (search engine optimization). 2.2
Rollen
Josine van Berlo - Art Director Josine zorgt voor de goede uitvoering van de opdracht en tegelijkertijd de creatieve kwaliteitsbewaking van de producten die ontworpen zijn naar de wensen van de klant. Menno Meijer - Projectmanager Menno bewaakt de projecten en het proces. Hij maakt (SMART) doelstellingen voor elk project en zorgt dat deze worden behaald. Daarnaast heeft hij contact met de samenwerkende professionals en zorgt voor een duidelijke planning.
DE OPDRACHT
Opdrachtomschrijving
Organigram
Het grootste probleem op dit moment is dat ze geen duidelijk overzicht hebben op de inventarisatie en daarnaast geen idee hebben hoe ze de producten op de markt willen/kunnen zetten. Ook weten ze niet hoe ze deze producten moeten verkopen en wat de mogelijkheden zijn. Tot nu toe zijn ze bezig met het ordenen van de inventarisatie en het kijken en vergelijken van de concurrentie.
3.2
3.5
Doel
Binnen een half jaar is er voor 123ventilatiesysteem een volledige webshop waarbij de klant een duidelijk overzicht heeft van alle producten die zij aanbieden.
3.6
3.4
Werkzaamheden
Mijn werkzaamheden bestaan voor een groot deel uit het bouwen van de webshop, onderzoek doen en vervolgens de webshop te optimaliseren. Zo ga ik kijken naar de concurrenten, de mogelijkheden van Wordpress onderzoeken en verschillende user testen uitvoeren. Hierdoor wordt het eindproject een complete webshop waarbij ik alle gemaakte keuzes kan verantwoorden en kan onderbouwen. Doelgroep
Als ik kijk naar de markt kan ik de doelgroep in 3 groepen verdelen. Je hebt de consument, de kleine bedrijven en de grote bedrijven. Ik verwacht dat de doelgroep bestaat uit de consument en de kleinere bedrijven maar dit zal ik verder moeten onderzoeken.
Eisen aan de opdracht
MUST HAVES
De grootste wens van de opdrachtgever is dat de site een snel en overzichtelijk beeld geeft van de inventarisatie.
SHOULD HAVES
Een zeer gewenste eis is dat de webshop een geautomatiseerd voorraadsysteem heeft en ook een betalingssysteem is erg gewenst. Ook zou het ideaal zijn als de hele voorraad uit een xml bestand gehaald kan worden.
COULD HAVES
WON’T HAVES
Pagina 5
Analyse van de opdracht
Voor 123 ventilatiesysteem ga ik een webshop maken waarbij de gebruiker een duidelijk overzicht heeft van het assortiment. Op dit moment bestaat er al een webshop maar deze is onoverzichtelijk en zit totaal geen structuur in. Ook is het op de huidige site onmogelijk om subcategorieën te maken en om op een geordende manier producten toe te voegen. Zou je deze site vullen met de complete inventarisatie van 123ventilatiesysteem dan wordt het een verzamelsite waarbij de consument duizenden artikelen op willekeurige volgorde ziet. Om dit te verbeteren moeten we eerst een duidelijk overzicht krijgen van het assortiment. Alles moet gecategoriseerd worden en er moet een duidelijke structuur komen. Hierbij lettend op de doelgroep en de vraag en aanbod. Verder wil de klant dat de voorraadbeheer geautomatiseerd wordt en hij makkelijk producten toe kan voegen en kan verwijderen.
Mathieu Maas - Ontwikkelaar Mathieu is na zijn stageperiode bij Studio Frisselstein aangenomen als parttime ontwikkelaar en helpt mee met het bouwen van producten. Mathieu heeft veel kennis van Wordpress en is zeer handig met programmeren.
2.3
3.3
Pagina 6
Het zou mooi zijn als de site helemaal compleet wordt. Alle pagina’s zijn voorzien van de juiste content, de klant kan inloggen, krijgt persoonlijke korting en kan kiezen uit meerdere betalingssystemen. Bij een vervolgopdracht zou het interessant zijn om een meertalige functie te implementeren.
4.0 3.7
AANPAK
Productdecompositiestructuur 4.1
EINDPROJECT
WEBSHOP
OVERZICHTELIJK
VOORRAADBEHEER
DOCUMENTATIE
ADVIES
Aanpak
De aanpak die ik ga gebruiken heeft veel weg van scrum maar ik geef daar wel mijn eigen draai aan. Ik ga heel hard werken om de website af te krijgen en hij online kan. Daarna ga ik mijn gemaakte keuzes onderzoeken en kijken of deze herzien moeten worden. Vervolgens kan ik verschillende testen uitvoeren en kijken hoe ik de site nog meer kan optimaliseren. Denk hierbij aan A/B-test, heatmaps en gebruikerstesten. Zo maak ik elke “sprint” een nieuwe fase en kan ik telkens terugkijken wat ik beter had kunnen doen.
4.2 Onderzoek Om een duidelijk beeld te geven over de verschillende onderzoeken die ik ga doen heb ik deze onderverdeeld in
BETALINGSSYSTEEM
ACTIES
RECLAME / ADVERTENTIES
Veld Denk hierbij aan enquêtes houden, persona’s maken, user profiles opstellen en (gedrag) observeren.
Het grootste ‘hoofdproduct’ is natuurlijk de webshop. Dit is het belangrijkste van het project en hier gaat ook de meeste tijd in zitten. Daarnaast ga ik ook een stuk advies meegeven. Ik ga onderzoeken welke acties het beste werken en of het rendabel is om te werken met reclame en/of advertenties. Als laatste krijgt 123ventilatiesysteem een hele documentatie waarin ik bepaalde keuzes uit kan leggen en kan verantwoorden.
Pagina 7
Pagina 8
Bieb Het onderzoeken van de mogelijkheden van Wordpress, kijk naar de concurrenten en het houden van een doelgroepanalyse.
Werkplaats AB-testen, heatmaps en gebruikerstesten. Telkens terugblikken of de gemaakte keuzes de juiste waren.
Lab Gebruikerstesten. Hieruit een conclusie trekken en deze vervolgens de site verbeteren.
Showroom Verschillende versies (vormgeving, teksten en opmaak) testen en daaruit conclusies trekken.
5.0 5.1
PLANNING
Projectplanning
Om een duidelijk beeld te creĂŤren heb ik mijn planning onderverdeeld in de volgende categorieĂŤn: Schooldocumentatie, onderzoek, webshop realisatie en feedback opdrachtgever. Ik wil na elke stap de opdrachtgever op de hogte houden. Zo ontvang ik telkens feedback, hou ik de drempel laag en voorkom ik miscommunicatie. Verder heb ik de planning redelijk globaal gehouden omdat het moeilijk te zeggen is hoelang ik met elk onderdel bezig ben.
6.0
6.1
AFSPRAKEN
Afspraken rondom communicatie
Mijn communcatie met 123ventilatiesysteem gaat altijd via Josine. Wij zullen regelmatig langsgaan om de vorderingen te bespreken. Verder zullen we veel via de e-mail communiceren om bijv. bestanden naar elkaar te versturen of om snel een vraag te stellen.
Pagina 9