Stageverslag2

HET BEGINT BIJ

STRUCTUUR VAN CHAOTISCH MAGAZIJN NAAR EEN COMPLETE WEBSHOP!

Stageverslag: Thijs van Uden 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

Š 2015 Thijs van Uden

Het begint bij structuur | Pagina 3

“Ik kan terugkijken naar een zeer geslaagd project�

Voorwoord Het rapport dat voor u ligt is de afsluiting van een vijf maanden durende stageperiode bij Studio Frisselstein. Tijdens deze stageperiode heb ik me voornamelijk beziggehouden met het realiseren van een complete webshop voor 123ventilatiesysteem. Samen met Menno en Josine heb ik deze uitdaging met beiden handen aangenomen. De enorme hoeveelheid producten, zonder enige charme, waar ik totaal geen ervaring mee had maakte het project er niet makkelijker op.

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 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 hartstikke bedankt!

Des te groter de uitdaging. Ik kan terugkijken naar een zeer geslaagd project waar beide partijen enorm veel van hebben opgeschoten.

Thijs van Uden

Dankzij dit project heb ik mijn zelfstandigheid, onderzoeksvaardigheden, designkwaliteiten en kennis van online mogelijkheden in korte periode enorm verbeterd. Het is een erg leerzame Het begint bij structuur 4 periode geweest waarbij ik |alPagina mijn vaardigheden nodig had.

Ik wens u veel leesplezier.

Veghel, Datum

Samenvatting Het rapport dat voor u ligt is de afsluiting van een vijf maanden durende stageperiode bij Studio Frisselstein. Tijdens deze stageperiode heb ik me voornamelijk beziggehouden met het realiseren van een complete webshop voor 123ventilatiesysteem. Samen met Menno en Josine heb ik deze uitdaging met beiden handen aangenomen. De enorme hoeveelheid producten, zonder enige charme, waar ik totaal geen ervaring mee had maakte het project er niet makkelijker op.

Des te groter de uitdaging. Ik kan terugkijken naar een zeer geslaagd project waar beide partijen enorm veel van hebben opgeschoten.

Dankzij dit project heb ik mijn zelfstandigheid, onderzoeksvaardigheden, designkwaliteiten en kennis van online mogelijkheden 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 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 hartstikke bedankt!

Ik wens u veel leesplezier.

Thijs van Uden Veghel, Datum

Het begint bij structuur | Pagina 5

Inhoudsopgave

8

Het bedrijf Informatie over het stagebedrijf Studio Frisselstein waar ik mijn stageperiode veel heb geleerd Frisselstein waar ik

10

Aanleiding Informatie over het stagebedrijf Studio Frisselstein waar ik mijn stageperiode veel heb geleerd Frisselstein waar ik

11

De opdracht Informatie over het stagebedrijf Studio Frisselstein waar ik mijn stageperiode veel heb geleerd Frisselstein waar ik

17

Het bedrijf Informatie over het stagebedrijf Studio Frisselstein waar ik mijn stageperiode veel heb geleerd Frisselstein waar ik

19

Het bedrijf Informatie over het stagebedrijf Studio Frisselstein waar ik mijn stageperiode veel heb geleerd Frisselstein waar ik

32

8 14 15 15

Het bedrijf Informatie over het stagebedrijf Studio Frisselstein waar ik mijn sta-

18 Het begint bij structuur | Pagina 6

Verklarende woordenlijst CSV bestand Een bestand dat een tabel omzet in een tekstbestand gescheiden door een komma.

Eyecatcher Een gebruiksvriendelijk systeem dat je gebruikt om online aanpassingen te maken.

10

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.

Wordpress Een gebruiksvriendelijk systeem dat je gebruikt om online aanpassingen te maken.

Quantity Ee

10 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 (search engine optimization).

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

E I T A C NI U M “COM T DANKZIJ ” A N I A E M T S L OP E S S I R F IO D U T S

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 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.

Het begint bij structuur | Pagina 10

Collegepark Zwijsen Het oude Zwijsen College wordt omgetoverd van oude school naar woonappartementen en studios. Studio Frisselstein verzorgd de communicatie, vastgoed marketing, fotografie en vormgeving.

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

2. Aanleiding Hoe maak je een webshop?

123ventilatiesysteem 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 enorme assortiment variĂŤert van bochten, zadelstukken, kleppen, roosters, dempers, beugels en nog veel meer.

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. De huidige 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 dus van groot belang dat de nieuwe webshop een overzicht biedt van alle producten en categorieĂŤn dat ze bieden.

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 alle layout van de webshop als over de gebruiksvriendelijkheid en alles wat zich achter de schermen is gebeurd.

Het begint bij structuur | Pagina 12

Het begint bij structuur | Pagina 13

3. De Opdracht Van Thymen, eigenaar 123ventilatiesysteem, kreeg ik de opdracht om een complete webshop te realiseren. Belangrijk is dat alle producten 3.2 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.3 Analyse van de opdracht 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.

Het begint bij structuur | Pagina 14

4. Werkzaamheden 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 kleurgebruik en heb dit doorgevoerd naar het logo en vervolgens ook naar het briefpapier.

Kleurgebruik Ik ben gaan kijken naar de betekenis van kleuren en al snel werd mij duidelijk dat de combinatie van blauw en wit goed bij de uitstraling van 123ventilatiesysteem. 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.

Oud kleurgebruik

Nieuw kleurgebruik

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.

http://www.ultimatedesigns.nl/kleuren-en-hun-betekenissen/

Het begint bij structuur | Pagina 15

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 nu mooier wordt en dat hij met het nieuwe design veel meer betrouwbaarheid uitstraalt en dat de site daar een stuk professioneler van wordt. Gelukkig heb ik hem daardoor 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 voor de facturen en als pakbon.

Ik heb eerst wat voorbeelden bekenen online om inspiratie op te doen. Ik besloot om het papier rustig te houden en natuurlijk heb ik de nieuwe huisstijl doorgevoerd in het briefpapier.

Thymen was erg tevreden en het nieuwe design werd meteen goedgekeurd .

Het begint bij structuur | Pagina 16

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 Onderwerp 2 Alle klanten krijgen 10% korting bij de eerste bestelling Onderwerp 3 Alle prijzen op de site zijn excl. 21% BTW

We hebben ervoor gekozen om onderwerp 3 in een banner te plaatsen zodat deze altijd gezien moet worden.

Nu valt hij goed op en is altijd duidelijk in beeld.

Het was duidelijk dat de oude slider vervangen moest worden.

Deze bestond uit een simpele foto waar het watermerk nog in stond.

Het begint bij structuur | Pagina 17

Allereerst ben ik begonnen met het ontwerpen van twee nieuwe sliders.

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.

Het begint bij structuur | Pagina 18

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 zijn echte eyecatchers voor de webshop. 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 19

Lettertype Het lettertype dat ik heb gekozen is "Lato”.

Lato (dat zomer betekend in het pools) is een schreefloos lettertype ontworpen in 2010. http://www.latofonts.com/lato-free-fonts Lato is een veel online gebruikt lettertype. http://www.awwwards.com/20-best-web-fonts-from-google-web-fonts-and-font-face.html Ik heb een aantal lettertypes getest en vond Lato het beste passen bij de rest van de website.

Ik vind het een mooi lettertype en vooral makkelijk leesbaar.

“Typografie is de kunst van het vormgeven van tekst, zowel voor functionele als esthetische doeleinden”

Product afmeting 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.

Product prijs 123ventilatiesysteem zit zo’n 30 tot 40% onder de verkoopprijs van de concurrentie. Dit kunnen ze doen vanwege het grote magazijn en de hoeveelheid waarmee ze inkopen. Omdat ventilatiesystemen bij elk bedrijf van dezeflde kwaliteit zal zijn is het dus een groot voordeel dat 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. Dit heeft me behoorlijk veel tijd gekost maar daarnaast heb ik er veel van geleerd.

4.2 Gebruiksvriendelijkheid

Om de bezoekers het zo makkelijk en duidelijk mogelijk te maken heb ik het veel aandacht besteedt aan de gebruiksvriendelijkheid van de website.

Quantity 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.

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 23

Responsive design

Responsive Uit onderzoek (bijlage ...) blijft dat ....% van de gebruikers de site bezoekt via een pc. 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 24

Bezorging Omdat PostNL werkt met maximum lengte van 176cm en veel producten veel 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 bezorg tarief opgesteld die ik heb doorgevoerd in de site.

A.d.h.v. de postcode van de gebruiker berekend de site hoeveel kosten 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

Ook kan er een gewenste bezorgdatum worden gekozen.

Dit heb ik gerealiseerd d.m.v. de “order delivery date� plugin. Hierin heb ik aangegeven dat er alleen een doordeweekse dag gekozen kan worden. Ook word deze informatie meegegeven in de mail zodat zowel Thymen als de klant hiervan op de hoogte wordt gebracht.

Het begint bij structuur | Pagina 25

Producten inladen In totaal staan er 531 verschillende producten op de site onderverdeeld in 54 categorieën.

8 hoofdcategorieën en 46 subcategorieën.

Al deze producten heb ik per hoofdcategorie ingeladen d.m.v. een .csv bestand.

Voor Thymen heb ik een opzet gemaakt hoe dit bestand eruit moest komen te zien en dit heeft hij keurig per categorie aangeleverd in een Excel bestand.

Hierin stond vermeld: • • • • • • • •

Productnaam Productomschrijving Categorie Sub categorie Sub sub categorie (optioneel) Doorgestreepte prijs Prijs Aantal (voorraad)

Vervolgens moest ik per product een afbeelding toevoegen en exporteren naar een .CSV bestand. Daarna heb ik deze bestanden per hoofdcategorie ingeladen via de plugin “All import”.

Ik moest hier met veel aspecten rekening houden en heb dit ook verschillende keren opnieuw in moeten voeren. Zo moest ik zorgen dat alle kolommen in het juiste veld stonden, alle producten belastbaar waren, categorieën en subcategorieën goed achter elkaar stonden en dat alle afbeeldingen pasten bij het juiste product. Wanneer ik alle producten juist had ingeladen heb ik alle categoerieën voorzien van bepaalde instellingen en de juiste afbeeldingen.

Het begint bij structuur | Pagina 26

Het begint bij structuur | Pagina 27

Het begint bij structuur | Pagina 28

Het begint bij structuur | Pagina 29

Het begint bij structuur | Pagina 30

Het begint bij structuur | Pagina 31

Het begint bij structuur | Pagina 32

Het begint bij structuur | Pagina 33

Het begint bij structuur | Pagina 34

Het begint bij structuur | Pagina 35