HET BEGINT BIJ
STRUCTUUR
VAN ONGESTRUCTUREERD MAGAZIJN NAAR EEN COMPLETE WEBSHOP!
Stageverslag:
n Thijs van Ude 08-12-2015
Het begint bij structuur | Pagina 1
HET BEGINT BIJ STRUCTUUR AUGUSTUS 2015 - JANUARI 2016
Het begint bij structuur | Pagina 2
Titelpagina Auteur Naam: Thijs van Uden Studentnummer: 2189393 E-mailadres: thijs.vanuden@student.fontys.nl Opleidingsinstituut: Fontys Hogeschool Eindhoven Major: ICT & Media Design Stagebegeleiders Naam: Jo-An Kamp E-mailadres: j.kamp@fontys.nl Naam: Erik Heijligers E-mailadres: e.heijligers@fontys.nl Eindopdracht:
www.123ventilatiesysteem.nl
Š 2015 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
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. Des te groter de uitdaging op om een mooie webshop te realiseren. Ik kan terugkijken naar 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 Menno Meijer en Stef van der Loo te bedanken voor alle hulp en inzet die zij deze periode mij hebben gegeven. Tenslotte bedank ik uiteraard Thymen Kristen voor zijn vertrouwen dat hij mij deze periode heeft gegeven en alle positieve feedback. Allemaal hartelijk bedankt! Ik wens u veel leesplezier. Thijs van Uden
Samenvatting Om een nieuwe webshop te realiseren heb ik eerst de huidige webshop flink onder de loep genomen. De huidige webshop van 123ventilatiesysteem was ongeordend en niet volledig. Er stond veel summy tekst op de site en er stonden maar een paar producten online. Ook paste het huisstijl niet bij de gewenste uitstraling van het bedrijf. Naar aanleiding hiervan ben ik onderzoek gaan doen naar de doelgroep en concurrentie van 123ventilatiesysteem. Daarnaast heb ik de gekeken naar de doelgroep waar 123ventilatiesysteem zich op wil richten. De vijf onderzoeksmethodes die ik heb gebruikt zijn veld, bieb, werkplaats, lab en showroom. Zo heb Zo moesten alle producten geteld en gecategoriseerd worden. Er moest een duidelijke structuur in de website komen zodat bezoekers zo snel mogelijk producten kunnen vinden. Er moesten betalingssystemen worden toegevoegd, er moest nagedacht worden over verzendmethodes, er moest een inlogsysteem komen en als laatste moest de hele site een nieuwe look and feel krijgen. Ook moest de site volledig responsive worden zodat hij op elk beeldscherm goed weergegeven wordt.Als laatste moest er nagedacht worden over SEO en eventele acties zoals advertenties, brochures of direct mailings om nieuwe bezoekers naar de website te krijgen. In dit verslag komen al deze onderwerpen uitgebreid aan bod.
Het begint bij structuur | Pagina 5
(Deze samenvatting is nog niet klaar. Hier ben ik nog niet over tevreden)
Inhoudsopgave
8
Het bedrijf Informatie over het stagebedrijf Studio Frisselstein uit Veghel waar ik vijf maanden met veel plezier heb mogen stagelopen.
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.
34
Evaluatie Een korte evaluatie over mijn project en werkzaamheden bij Studio Frisselstein.
35
Literatuurlijst In deze lijst staan alle bronnen die ik heb gebruikt voor het schrijven van dit verslag.
Het begint bij structuur | Pagina 6
8 14
15
18
Verklarende woordenlijst CSV bestand Een bestand dat een tabel omzet in een tekstbestand gescheiden door een komma. Dummy tekst Een dymmy tekst is een ander woord voor faketekst.
10
Eyecatcher Een gebruiksvriendelijk systeem dat je gebruikt om online aanpassingen te maken. Footer Onderste gedeelte van een website waarin bijvoorbeeld verwijzingen en navigatie staat. Php Een scripttaal om objectgeoriĂŤnteerd te programmeren. Pixels Elk gekleurd puntje in een scherm. Hoe meer pixels, hoe scherper het beeld. 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.
26
WordPress Een gebruiksvriendelijk systeem dat je gebruikt om online aanpassingen te maken.
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. 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
p o e ti a ic n u m ij z “Com k n a maat d elstein” iss r F o i Stud
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.
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 verzorgd Studio Frisselstein de nieuwsbrieven, werken ze met Google Adwords en gebruiken SEO om beter in Google gevonden te worden.
Het begint bij structuur | Pagina 10
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.
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 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 een 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. dan de grote concurrenten en hebben maar 450 een vestiging.
“W .000 asco” en 3 p 1 ve roduc te stig inge n n!
Het begint bij structuur | Pagina 13
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
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.
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 moeten zijn bevatten veel donker kleuren en hebben niet de uitstraling die een webshop zou moeten hebben.
Onder het menu en de header staan een aantal producten weergegeven. Deze producten staan op willekeurig 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.
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.
In de huidige website staan een aantal categorieën. Deze bevatten enkel producten en geen sub-categorieën dus in een categorie staan alle producten 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
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 aan 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.Het begint bij structuur | Pagina 17
Probleemstelling Nu de huidie website flink onder de loep is genomen heb ik deze analyse heb ik samengevat en hieruit zijn vijf probleemstellingen naar voren gekomen: 1
De huidige huisstijl komt nu niet overeen met de gewenste uitstraling van 123ventilatiesysteem.
2
Het is onmogelijk om subcategorieën te maken en alle producten staan door elkaar.
3
Alle productafbeeldingen variëren van formaat wat erg onoverzichtelijk is.
4 5
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
Bezoekers kunnen alle producten in een makkelijk overzicht vinden die onderverdeeld zijn in categorieën en sub-categorieën.
2
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.
De producten moeten allemaal één voor één worden ingeladen.
3
Alle producten kunnen in één keer worden ingeladen.
Er staat veel dummy tekst op de website wat zeer onprofessioneel overkomt.
4
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.
Het begint bij structuur | Pagina 18
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.
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 staan vermeldt. 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 19
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.
Het begint bij structuur | Pagina 20
4.1 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. 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 21
Het Logo 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.
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 nog zakelijker over te komen heb ik nieuw briefpapier ontworpen. 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 papier 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.
Het begint bij structuur | Pagina 22
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. De ring zorgt ervoor dat ze direct in de correcte positie komen en dit maakt maakt het installeren eenvoudiger. Ook hebben SAFE producten meteen een luch dichte verbinding. Onderwerp 2 Alle klanten krijgen 10% korting bij de eerste bestelling. 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 alle SAFE producten en de tweede slider is gericht op korting die de bezoeker krijgt na het maken van een account.
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 structuur | Pagina 24
“Een verf nieuw riss uite end rlijk ”
Het begint bij structuur | Pagina 25
Lettertype Een lettertype stijl helpt om de layout van de website te verbeteren en bij te dragen aan de algehele stijl van de website. Het lettertype van een website is erg bepalend voor de algemene stijl. 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, 2013) blijkt dat Lato in de top 20 online lettertypes staat.
“ WEB DESIGN IS
95%
TYPOGRAPHY “ (Michael, 2014)
Productafmeting Om alle afbeeldingen netjes naast elkaar te zetten 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 alle afbeeldingen nog mooier te krijgen heb ik de afbeeldingen voorzien van witte achtergrond. Dit oogt mooier en geeft de pagina meer rust.
Het begint bij structuur | Pagina 26
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 is 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.
Het begint bij structuur | Pagina 27
4.2 Gebruiksvriendelijkheid
Om de bezoekers het zo makkelijk en duidelijk mogelijk te maken heb ik veel aandacht besteedt aan de gebruiksvriendelijkheid van de website. Om de gebruiksvriendelijkheid te testen heb ik een gebruikerstest gehouden met Roy Koolen. Roy Koolen is 25 jaar en sinds 4 jaar runt hij samen met zijn vader een installatiebedrijf. Regelmatig moet hij ook ventilatiesystemen monteren die hij online besteldt. Om te kijken hoe bezoekers door de website navigeren heb ik Roy een aantal opdrachten gegeven die hij op de site moest uitvoeren. Uit dit onderzoek (Bijlage 1) kwamen een aantal resultaten naar voren die ik vervolgens heb aangepast om de gebruiksvriendelijkheid van de website te optimaliseren. Roy had een paar tips en verbeterpunten maar over het algemeen was hij zeer positief over de website. “De website ziet er degelijk en betrouwbaar uit”. 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 gebruikerstest met Roy is duidelijk te zien dat bezoekers dit ook verwachten en gebruiken op een website
t e i z e t i en s b e lijk it” w “Der dege baar u e uw o r t be
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. Het begint bij structuur | Pagina 29
Bezorging Omdat PostNL werkt met maximum lengte van 176cm en veel producten een stuk 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
Het begint bij structuur | Pagina 31
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 32
Responsive design
Responsive Hoogstwaarschijnlijk (moet nog blijken uit onderzoek) wordt de website merendeel bezocht via een pc of laptop . Toch is het belangrijk dat de site volledig responsive is. Elke gebruiker moet de site zo optimaal mogelijk te zien krijgen voor de beste beleving en gebruiksgemak.
Het begint bij structuur | Pagina 33
Evaluatie Er kan met tevredenheid terug gekeken worden op mijn project. Als ik terugkijk ben ik tevreden en trots. Ik kan zeggen dat het mij is gelukt om een complete webshop te realiseren waarbij de bezoeker alle producten overzichtelijk kan bekijken, kan inloggen, producten kan bestelllen en
Het begint bij structuur | Pagina 34
Literatuurlijst 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 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 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 35
Bijlage 1 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. 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.
Opdrachten 1.
Stop één koppelstuk diameter 200mm in je winkelwagen en reken deze af.
2.
Maak een account aan.
3. Stop de volgende producten in je winkelwagen - Één SAFE T-stuk 90º diameter 150-150mm - Éen Spirobuis diameter 500mm Lengte=3000mm - 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.
De test is te bekijken op: https://www.youtube.com/watch?v=pgq7epjz120&feature=youtu.be
Het begint bij structuur | Pagina 36
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 de website betrouwbaar overkomen? Waarom wel en/of niet? Ja, hij ziet er professioneel uit. Rustig qua kleur en de site is een mooi geheel.
3.
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.
4.
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.
5. 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. 6.
Wat vind je van het kleurgebruik? Rustig, dus goed.
7.
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.
Resultaten Uit het onderzoek zijn de volgende resultaten naar voren gekomen. 1.
Er zijn nog een aantal links die doorverwijzen naar de test-site. Op het filmpje (1.27min.) is duidelijk te zien wanneer Roy op verbindingsstukken klikt (1.27 min.) hij doorverwezen wordt naar de andere site. Gelukkig heeft Roy dit zelf niet in de gaten maar dit moet niet kunnen. Deze fout heb ik meteen aangepast zodat dit niet meer kan gebeuren.
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 maar als uit meerdere onderzoeken blijkt dat er meer naar deze zoektermen wordt gezocht moet dit worden aangepast.
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. Daarom heb ik dit meteen aangepast en de dropdown balk veranderdt in keuze rondjes.
4.
Het viel Roy niet meteen op dat sommige product-pagina’s uit meerdere pagina’s bestaan. Dit moet wel duidelijk zijn dus ook dit is inmiddels aangepast. Ik heb de pagina-nummering blauw gemaakt zodat ze duidelijker te zien zijn.
Het begint bij structuur | Pagina 37
Ventilatiesysteem.nl
123ventilatiesysteem
0413 72 60 04
Frisselsteinstraat 5
info@123ventilatiesysteem.nl
KvK 04028436
5461 AD Veghel
www.123ventilatiesysteem.nl
BTW NL005864483B01
Het begint bij structuur | Pagina 40
Het begint bij structuur | Pagina 41
Het begint bij structuur | Pagina 42
Het begint bij structuur | Pagina 43