Scriptie Thijs HoP by thijske92

VAN TREND NAAR COMPLETE WEBSHOP De koppeling tussen klantbeleving en conversie

Thijs van Uden

09 - 01 - 2018

VAN TREND NAAR COMPLETE WEBSHOP De koppeling tussen klantbeleving en conversie

www.heroesofprint.com

COLOFON ALGEMEEN Titel afstudeerverslag Afstudeer periode Datum van uitgave

STUDENT

Naam student Studentnummer Afstudeerrichting Email Telefoon

BEDRIJF

Naam bedrijf Adres Plaats

BEDRIJFSBEGELEIDER

Naam bedrijfsbegeleider Functie Email Afdeling

DOCENTBEGELEIDSTER

Naam docentbegeleidster Functie Email

Van trend naar complete webshop 28 augustus 2017 t/m 30 januari 2018 09 - 01 - 2018

Thijs van Uden 262033 ICT & Mediadesign, voltijd info@thijsvanuden.nl +31 6 81 16 38 82

Plato Group BV Haverdijk 5, 5704 RC Helmond

Robert Staal Market Offering Lead rstaal@igopost.com Marketing

Anke Bardie Docent en stagecoรถrdinator a.bardie@fontys.nl

GETEKEND VOOR GEZIEN Robert Staal Bedrijfsbegeleider 09 januari 2018

VOORWOORD Het was een geweldige ervaring om onderdeel te zijn van het team en mee te mogen werken aan deze fantastische webshop. Ik ben erg trots op het eindresultaat en hoop dat Heroes of Print een groot succes wordt. Graag wil ik voorafgaand aan de scriptie een aantal mensen bedanken die mij hebben ondersteund tijdens het afstuderen. Ik wil Anke Bardie bedanken voor haar tijd als docentbegeleider. Zij heeft mij tijdens het proces voorzien van snelle en goede feedback. Daarnaast wil ik Robert Staal bedanken voor alle inzet en fijne begeleiding tijdens het afstuderen. Tot slot wil ik Floris Boon, Patrick Asselman en de rest van de collegaâ&#x20AC;&#x2122;s van Plato Group bedanken voor de begeleiding en de geweldige tijd die ik hier heb gehad.

Thijs van Uden

INHOUDSOPGAVE SAMENVATTING 10 SUMMARY 11 VERKLARENDE WOORDENLIJST 13 INLEIDING 14 01 HET BEDRIJF 16 1.1 Plato Group 1.2 Heroes of Print

1.3 Merkverhaal Heroes of Print

1.4 Het team

02 DE OPDRACHT 20 2.1 Analyse van de opdracht 2.2 Onderzoeksmethodes 03 DOELGROEP 24 3.1 Doelgroepomschrijving 3.2 Gebruikersanalyse

04 STRUCTUUR 30 4.1 Structuur bepaling 4.3 Focuspunten onderzoek

05 REALISATIE 36 5.1 Homepagina 5.2 Themapagina 5.3 Productdetailpagina 5.4 Design-tool

5.5 Gebruikerstest

0 6 CONCLUSIE & AANBEVELINGEN 70 EVALUATIE 73 BIJLAGEN 76 I. Projectdocument II. Concurrentieanalyse III. Onderzoek themapaginaâ&#x20AC;&#x2122;s

IV. Vijf-seconden test

V. Interviews VI. Configuratie Design-tool

SAMENVATTING 10 10

De doelgroep is bepaald aan de hand van het merkverhaal van Heroes of Print. De doelgroep van Heroes of Print zijn alle mannen en vrouwen woonachtig in Nederland met een leeftijd 14 t/m 35 jaar die de behoefte hebben om op te vallen. Uit interviews is gebleken dat de doelgroep de keuze van een webshop maakt aan de hand van prijs, lookand-feel en reviews. De doelgroep begint een zoektocht van gepersonaliseerde producten via Google en vinden het belangrijk om snel inzicht te krijgen in de producten en makkelijk te kunnen navigeren naar de pagina’s. De structuur van Heroes of Print is bepaald aan de hand van een aantal grote concurrenten. Via de homepagina kan de consument naar productcategorieën of thema’s. Uit literatuuronderzoek is gebleken dat de categorieën maximaal drie lagen mogen hebben voor optimale conversie. Na intern overleg zijn de belangrijkste pagina’s gekozen. Dit zijn de homepagina, themapagina’s, productdetailpagina en de design-tool. Uit literatuuronderzoek is gebleken dat het doel van de homepagina direct duidelijk moet zijn bij binnenkomst. Om de merkbeleving te vergroten is er gekozen voor een carroussel. De rest van de homepagina is gevuld met elementen uit de interviews, het merkverhaal en de concurrenten. Dit zijn producten, thema’s, het stappenplan, de pay-off en algemene informatie over Heroes of Print.

Uit verschillende onderzoeken zijn een aantal elementen geselecteerd voor de themapagina’s. Uit een vijf-seconden test is gebleken een banner het best kan worden gebruikt om het doel van de pagina te beschrijven. Om de merkbeleving te optimaliseren en rekening te houden met conversie worden zowel productafbeeldingen als sfeerbeelden getoond. Het doel van de productdetailpagina is om de bezoeker door te linken naar de design-tool. Om die reden bevat de productdetailpagina weinig merkbeleving en is puur gefocust op conversie. Uit een interne brainstormsessie en de concurrentieanalyse is een lijst van elementen gemaakt zoals productafbeelding, prijs, aantallen, vooraad. Deze elementen zijn samengevoegd in een wireframe en doorvertaald naar een grafisch ontwerp. Dit ontwerp is nagekeken door een interne designer en goedgekeurd. Als laatste stap is de design-tool InkXE geconfigureerd. Uit de interviews is naar voren gekomen dat de tool vooral makkelijk en overzichtelijk moet zijn. Door middel van een gebruikerstest is gebleken dat de doelgroep de tool ervaart als makkelijk en overzichtelijk. Uit de gebruikersanalyse en de gebruikerstest is gebleken dat de cliparts, afbeelding uploaden en het toevoegen van tekst de belangrijkste functies van de design-tool zijn.

SUMMARY Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorsumers nam Lorem Ipsum Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorsumers nam Lorem Ipsum

De informatieve samenvatting is maximaal één bladzijde lang, en vat de hele scriptie samen. Je kunt hem dus pas schrijven als je je scriptie af hebt. (Zie ook hieronder bij 1. Inleiding, NB 1.) Er staat in bij welk bedrijf je je afstudeerproject hebt uitgevoerd, en wat voor soort bedrijf dat is. Verder staat er in wat de beginsituatie was, en wat daarbij het probleem was, en dus welke opdracht er was. Daarna zeg je welke aanpak je hebt gevolgd en waarom, en wat de resultaten waren, en als laatste wat je conclusies en aanbevelingen zijn. In de samenvatting staan géén verwijzingen naar andere onderdelen van de scriptie; ga niet teveel in op details en zorg ervoor dat de samenvatting toch onafhankelijk van de rest van de scriptie kan worden gelezen. Bovendien moet dit onderdeel begrijpelijk zijn voor een leek: iemand die niet jouw studie heeft gevolgd (maar wel een andere van hetzelfde niveau). Net als het voorwoord is de samenvatting geen hoofdstuk, en heeft dus geen nummer en geen paragrafen, en ook geen ongenummerde tussenkopjes. In de samenvatting staan ook geen figuren of opsommingen.

oor de Engelstalige samenvatting gelden dezelfde regels als voor de Nederlandse, maar je moet niet proberen die woord voor woord of zin voor zin te vertalen. Het werkt beter als je goed voor ogen hebt wat er in een bepaalde alinea moet komen te staan en dat dan in het Engels opschrijft. In een woordenboek zul je niet altijd vinden wat je zoekt; lees liever Engelstalige informatie over je onderwerp, bij voorbeeld in andere bedrijfsdocumenten.

11 11

12 12

VERKLARENDE WOORDENLIJST InkXE

InkXE is een design-tool aangeschaft door Heroes of Print en is de eerste HTML5 design-tool. De tool is ontwikkeld door Riaxe Systems, India.

KNOWLEDGEBASE

Een online gebruikershandleiding van InkXE waarmee de configratie van de tool beschreven staat.

TICKET

Voor vragen of problemen betreft de design-tool kan online een ticket worden aangemaakt waar de developers van InkXE mee aan de slag gaan.

TRELLO

Een online planningsassistent waarbij de voortgang van complexe projecten overzichtelijk weergegeven worden.

CSV

Een CSV bestand wordt gekeken naar de lijnen waaruit de tekening is opgebouwd. Dit betekent dat de afbeelding niet korrelig wordt wanneer deze wordt vergroot.

PDP

PDP staat voor productdetailpagina. Deze pagina is speciaal ingericht voor één product en bevat elementen zoals de productafbeelding en producteigenscahppen.

HTML

HTML een opmaaktaal waarin wordt aangeven welke elementen in documenten op internet voorkomen.

CSS

Door middel van CSS worden de HTMLelementen uit HTML opgemaakt en vormgegeven.

JAVASCRIPT

JavaScript is een veelgebruikte programmeertaal om webpagina’s interactief te maken en webapplicaties te ontwikkelen.

13 13

INLEIDING 14 14

De afgelopen tien jaar zijn het aantal webshops in Nederland verzesvoudigd. Dit betekent meer mogelijkheden maar ook meer concurrentie. Na ruim 70 jaar actief geweest te zijn op het gebied van relatiegeschenken en promotionele artikelen besloot Plato Group om ook de consumentenmarkt te willen benaderen. Een nieuw merk genaamd Heroes of Print werd toegevoegd aan het merkportfolio. Door middel van een online thematisch platform kunnen consumenten gepersonaliseerde artikelen in lagere aantallen afnemen. Heroes of Print wil door middel van een unieke merkbeleving onderscheidend zijn ten opzichte van de concurrenten. Dit rapport gaat over de juiste combinatie tussen merkbeleving en conversie en hoe dit kan worden doorvertaald in de belangrijkste pagina’s van de nieuwe webshop. Om te beginnen is de structuur van de webshop bepaald. Vervolgens zijn deze verwerkt en hieruit zijn de belangrijkste pagina’s ontstaan. Tot slot zijn deze pagina’s individueel onderzocht, getest en geoptimaliseerd. Leeswijzer Hoofdstuk 1 geeft algemene informatie over Plato Group en in het bijzonder Heroes of Print. Hoofdstuk 2 beschrijft de opdracht in het algemeen en de onderzoeksmethodes die worden gebruikt. Hoofdstuk 3 gaat over de doelgroep met daarbij alle wensen en behoeftes. Hoofdstuk 4 beschrijft de nieuwe structuur voor Heroes of Print en wat de focuspunten worden van het onderzoek. Hoofdstuk 5 gaat over de focuspunten van het onderzoek en hoe deze onderzocht worden. Hoofdstuk 6 bevat de conclusies en aanbevelingen. Hier wordt antwoord gegeven op de hoofdvraag en bevat aanbevelingen voor de toekomst.

15 15

HET BEDRIJF

1.1 PLATO GROUP BV Plato Group is het moederbedrijf van Clipper, IGO, Compacon en Heroes of Print (HoP) en is met deze verkoopkanalen actief op de complete markt van bedrukte en promotionele artikelen. Plato Group beschikt in Helmond over een groot magazijn van 26.000 m2, een in- en uitpakafdeling en een drukkerij. Hier worden de orders van Clipper, IGO, Heroes of Print en een groot deel van de orders van Compacon verwerkt. Binnen Plato Group werken ca. 380 mensen, waarvan 90 in het buitenland. Plato Group heeft een sterke marktpositie op nationaal en internationaal gebied. Naast het hoofdkantoor in Nederland hebben ze vestigingen in België, Duitsland, Oostenrijk, Engeland, Frankrijk en Denemarken. Heroes of Print is het laatste merk dat is toegevoegd.

1.2 HEROES OF PRINT Al ruim 70 jaar is Plato Group met haar verkoopkanalen alleen actief geweest op de zakelijke markt van de productie en verkoop van relatiegeschenken en promotionele artikelen. Door intern onderzoek naar de markt en de ontwikkeling dat individuen meer de behoefte hebben om zichzelf te onderscheiden, heeft Plato Group gesignaleerd dat er een groeiende consumentenbehoefte is om gepersonaliseerde artikelen in lagere aantallen af te nemen. Om deze reden heeft Plato Group ervoor gekozen om een nieuw thematisch verkoopkanaal toe te voegen aan haar merken genaamd “Heroes of Print” en zo in te spelen op deze behoefte. Heroes of Print is een startende onderneming gericht op de verkoop van gepersonaliseerde artikelen aan consumenten, ZZP’ers en overige kleine ondernemingen. Ze richten zich dus in tegenstelling tot Clipper, IGO en Compacon op de consumentenmarkt. Heroes of Print wil via een online platform de consument de mogelijkheid bieden om unieke producten samen te stellen en door zich te richten op het hero-moment in plaats van op het product onderscheidend zijn ten opzichte van de concurrentie.

17 17

18 18

1.3 MERKVERHAAL HEROES OF PRINT In december 2016 is de nieuwe strategie voor Plato Group intern gepresenteerd. Hieruit komt voort dat buiten de zakelijke markt ook de consumentenmarkt benaderd moet gaan worden. Vanaf dat moment is er gestart aan de bouw van dit merk. In juni 2017 heeft dit project een naam en logo gekregen met het volgende merkverhaal. “Het doel van Heroes of Print is simpel. Onvergetelijke momenten creëren voor onze heroes. Gepersonaliseerde producten vertellen veel over wie je bent, de passie die je deelt met je groep of team en de creativiteit die je onderscheidt van de rest. Onze producten hebben de kracht om gewone situaties om te toveren tot speciale momenten met blijvende herinneringen. Jouw hero momenten drukken op een custom product, dat is kort gezegd wat we faciliteren. Anders gezegd, jouw verhaal maakt ons verhaal. Dankzij jouw speciale foto, boodschap of creatie zijn wij in staat om eindeloos veel unieke producten te produceren die voor de ontvanger(s) een speciale betekenis hebben. Of het nu gaat om een stedentrip met je vrienden, het in het zonnetje zetten van een collega of een kampioenschap met je sportteam. Verleng het gevoel van vreugde, trots of plezier met je eigen gepersonaliseerde producten en maak deze (hero) momenten onvergetelijk!” Aldus Robert Staal, Market Offering Lead. Momenten Heroes of Print is een thematisch online platform dat elk moment of elke belevenis nog unieker/specialer kan maken met een gepersonaliseerd product. Deze momenten worden dus, door een gepersonaliseerd artikel omgetoverd tot een hero-moment. Door op deze thema’s in te spelen en deze voor de consument te veranderen in Hero-momenten stopt de beleving van het merk niet vanaf het moment dat de order geplaatst wordt. Een ‘normaal’ moment wordt door een gepersonaliseerd product een blijvende herinnering voor de klant. Assortiment Het assortiment van Heroes of Print varieert van mokken, openers, knuffels, mappen, thermoskannen, powerbanks, tassen en kleding.

1.4 HET TEAM Vanaf Augustus 2017 bestaat “team Heroes of Print” uit drie leden. Samen met Robert Staal (Marked Offering Lead) en Floris Boon (afstudeerder Commerciële economie) zijn we verantwoordelijk voor het opzetten van het nieuwe platform. Naast het onderzoek bestonden de werkzaamheden uit het samenstellen van het assortiment, het bekijken van de processen en druktechnieken, het configureren van de design tool, het toevoegen van betaalmethodes en nog veel meer. Dit gebeurde in samenwerking met verschillende afdelingen en collega’s binnen Plato Group.

Afbeelding 1: Organigram

19 19

DE OPDRACHT

2.1 ANALYSE VAN DE OPDRACHT

21 21

Hoofdvraag

Hoe kan Heroes of Print conversie en merkbeleving het best combineren en hoe vertaalt zich dit door op de belangrijkste pagina’s van de webshop?

Deelvragen 1. Welke structuur van de webshop draagt bij aan een optimale conversie? 2. Wat zijn de belangrijkste pagina’s voor de webshop van Heroes of Print? 3. Hoe kunnen de producten op deze pagina’s het beste worden weergegeven om zowel de merkbeleving als conversie te realiseren? 4. Wat zijn de belangrijkste elementen van de design-tool en welke weergave zorgt voor de beste user experience?

2.2 ONDERZOEKSMETHODES 22 22

Aan de hand van het literatuuronderzoek en een concurrentenonderzoek is de structuur voor Heroes of Print bepaald. Om deze pagina’s in te vullen zijn interviews gehouden met de doelgroep om alle wensen en behoeftes in kaart te brengen. De homepagina is ingevuld door middel van literatuuronderzoek en de gebruikersanalyse. Hierbij is gekeken naar de wensen en behoefte van de doelgroep en het doel van de pagina. Vervolgens is samen met Patrick Asselman, een interne grafisch designer, de pagina definitief gemaakt. Uit de gebruikersanalyse bleek dat de themapagina’s regelmatig als landingspagina’s gebruikt zullen worden. Dit is een belangrijk gegeven en natuurlijk meegenomen in het ontwerpproces van de pagina’s. De themapagina’s zijn gevuld door middel van literatuuronderzoek en de gebruikersanalyse. Hieruit zijn een aantal elementen geselecteerd en hiervan zijn de drie belangrijkste elementen getest door middel van een vijf-seconden onderzoek. Uit het onderzoek is de de layout (boven de vouw) bepaald voor alle themapagina’s. Uit een tweede test is gebleken op welke manier de producten worden weergegeven. De rest van de layout is afhankelijk van het thema en de producten.

De Productdetailpagina (PDP) is ontworpen door een combinatie van de interviews, brainstormen en de vergelijking met grote webshops. Om de design-tool te configureren is gebruik gemaakt van de gebruikersanalyse en de online knowledge base die is meegestuurd door InkXE. Tot slot is de tool getest door vier personen uit de doelgroep.

Om antwoord te kunnen geven op onze hoofd en deelvragen wordt gebruik gemaakt van het door Fontys gehanteerd onderzoeksframework. Hieronder een overzicht van de gebruikte onderzoeksmethodes.

23 23

Veld

Lab

Tijdens het veldonderzoek wordt er gekeken wat de wensen en behoeftes zijn van de doelgroep en dit meegenomen kan worden bij het bouwen van de webshop. Dat kan bijvoorbeeld door het houden van enquĂŞtes, het maken van personaâ&#x20AC;&#x2122;s en het observeren van gedrag.

Labonderzoek wordt gebruikt om te toetsen of de webshop wel gebruikt wordt zoals verwacht. Denk hierbij aan het houden van usertest. Via deze strategie kun je goed nagaan hoe de consument gebruikt maakt van de webshop. De term meten is weten staat hierin centraal.

Werkplaats Met de werkplaats-strategie wordt door middel van ontwerpen en prototyping het product steeds meer geoptimaliseerd. De planning is dat de webshop redelijk snel live kan. Vervolgens krijgen we feedback van de gebruikers en kunnen we met deze informatie de webshop steeds beter maken.

Bieb Met bieb onderzoek wordt beschikbaar werk onderzocht. Wat kan er al worden gevonden op het gebied van marketing, webdesign en strategie. Deze informatie kan worden gebruikt bij het invullen van de webshop. Denk hierbij aan het kiezen van bepaalde kleuren, het indelen van de webshop of het invullen van de content.

Showroom Tijdens de showroom-strategie wordt gekeken hoe de webshop ervoor staat. Straalt de webshop uit wat we willen uitstralen? Is de webshop zo optimaal mogelijk ingedeeld? Hoe kan ik dit nog aanscherpen?

24 24

DE DOELGROEP

3.1 DOELGROEP De doelgroep van Heroes of Print is zeer divers. Het zijn consumenten uit de Y en Z generatie woonachtig in Nederland. Hieronder vallen alle mannen en vrouwen met een leeftijd van 14 t/m 35 jaar die de behoefte hebben om op te vallen. Mensen die zich durven te onderscheiden van de massa en leuke momenten willen delen. De doelgroep is computervaardig, zowel via mobiel als pc. Ze zijn actief op social media en zijn minimaal bezig met een VMBO-T opleiding. In het ideale geval zijn ze naast een individu ook onderdeel van een groep. Denk hierbij aan een sportteam, dansvereniging, vriendengroep en/of familie.

25 25

26 26

3.2 GEBRUIKERSANALYSE Om de wensen en behoefte van de doelgroep beter in kaart te brengen zijn er 10 interviews gehouden met de doelgroep. Uit dit onderzoek moet naar voren komen wat de doelgroep verwacht op een site van gepersonaliseerde producten. Om verschillende inzichten te krijgen is er gekozen om 5 personen te interviewen die al ooit een gepersonaliseerd product hebben besteld en 5 personen die dit nog nooit hebben gedaan. De volledige interviews zijn weergegeven in bijlage V. Uit de interviews zijn de volgende inzichten gekomen.

9/10

Respondenten beginnen bij Google wanneer ze een gepersonaliseerd product willen kopen.

9/10

8/10

Respondenten willen graag afbeeldingen zien om inspiratie op te doen.

6/10

Respondenten geven aan dat de prijs bepalend kan zijn in het bestelproces.

Respondenten vinden een verzorgde look-and-feel erg belangrijk.

7/10

6/10

Respondenten geven aan reviews te willen lezen op een website.

Respondenten vinden het belangrijk dat de producten makkelijk en snel kunnen worden gevonden

27 27

Aan alle respondenten is gevraagd wat ze verwachten of belangrijk vinden op een site van gepersonaliseerde producten en op welke paginaâ&#x20AC;&#x2122;s ze deze elementen graag terug willen zien. Vervolgens is per pagina een selectie gemaakt. Wanneer een element door minimaal vijf respondenten is benoemd wordt deze meegenomen in de realisatie van de paginaâ&#x20AC;&#x2122;s. De elementen staan op volgorde van het aantal keer dat deze benoemd zijn door de respondenten.

HOMEPAGINA

THEMAPAGINA

PRODUCTPAGINA

Verzorgde look-and-feel

Prijs

Navigatie

Verzorgde look-and-feel

Product reviews

Prijs

Navigatie

Verzendkosten

Inspiratie

Reviews HoP

ONTWERP-PAGINA

KASSA

Prijs

Navigatie design opties

Verzendkosten Verzorgde look-and-feel

28 28

CONCLUSIE GEBRUIKERSANALYSE

GEBRUIKTE METHODES

Uit de gebruikersanalyse zijn de volgende inzichten gekomen. Uit de interviews blijkt dat de doelgroep begint bij Google en niet alleen zoekt op “gepersonaliseerde producten” maar ook op thema’s. Dit betekent dat de themapagina’s als landingspagina’s zullen worden gebruikt. Hier moet rekening mee worden gehouden in de ontwerpfase. Omdat de doelgroep aangeeft graag reviews te willen lezen om de betrouwbaarheid van een webshop te vergroten komen op de landingspagina’s en de PDP reviews te staan. Uit het onderzoek blijkt dat de doelgroep graag inspiratie op wil doen op de landingspagina’s. Om die reden is het belangrijk dat op deze pagina’s veel sfeerafbeeldingen komen te staan. Meer dan de helft van de respondenten geeft aan dat een verzorgde look-and-feel de betrouwbaar sterk vergroot en dit is een cruciaal aspect bij het kiezen van een webshop (Van Kollenburg, z.j.). De webshop zal er daarom overzichtelijk, strak en clean uit moeten zien.

29 29

STRUCTUUR

31 31

4.1 STRUCTUUR De eerste stap die nodig is voor het invullen van de belangrijkste pagina’s is het bepalen van de juiste structuur. Een goede structuur vormt de basis van elke website en is de kapstok die alle elementen met elkaar verbindt. Een duidelijke structuur helpt de bezoeker beter te vinden waar hij of zij naar op zoek is en dit heeft een positief effect op de conversie (Geenen, z.j.). Om de structuur voor Heroes of Print te bepalen zijn eerst een aantal vergelijkbare webshops onderzocht (zie bijlage X). Dit zijn CustomInk, Spreadshirt, YourSurprise en Shirtinator. Hierbij is gekeken naar structuren en de titels die worden gebruikt. Wat opvalt is dat deze sitestructuren nagenoeg gelijk zijn. Het grootste verschil is de verschillende termen die worden gebruikt zoals ‘momenten’, ‘merken’, ‘templates’ voor dezelfde pagina’s. Bij CustomInk en Shirtinator is het mogelijk om direct van de homepagina naar de design-omgeving te navigeren terwijl er nog geen product is geselecteerd. Vanwege het beperkte assortiment is het overzichtelijk om hier nog een product te selecteren. Bij een breder assortiment is het gebruikelijk om eerst een product te selecteren en vervolgens naar de design-omgeving te gaan zoals bij Spreadshirt en YourSurprise. Om de structuur van Heroes of Print verder in te vullen is er gekeken naar de belangrijkste pagina’s van de webshop. Dit zijn de homepagina, thema- en product-pagina’s, de product pagina en de design-omgeving. Met deze inzichten kan de structuur worden bepaald die te vinden is op de volgende pagina.

Afbeelding 2: Structuur Heroes of Print

32 32

Uit onderzoek (Karsten, 2014) is gebleken dat er voor een optimale conversie maximaal drie lagen mogen zitten in de subcategorieĂŤn. Bijvoorbeeld: hoofdcategorie - sub-categorie - product. Een grote hoeveelheid categorieĂŤn schrikt mensen af. Om die reden is ervoor gekozen om het aantal lagen te beperken zodat de bezoeker minder klikken nodig heeft om een product af te rekenen. Dit is naast een aangename gebruikerservaring en optimalisatie van de conversie ook goed voor de vindbaarheid in Google.

33 33

4.2 FOCUSPUNTEN ONDERZOEK 34 34

Nu de structuur is bepaald kan er gekeken worden naar de focuspunten van het onderzoek. Na intern overleg is besloten dat de volgende vier paginaâ&#x20AC;&#x2122;s de belangrijkste paginaâ&#x20AC;&#x2122;s vormen van de webshop. Afbeelding 3: Structuur Heroes of Print met focuspunten

HOMEPAGINA

De homepagina is het beginpunt van de kapstok. De eerste indruk is goud waard en dit is bij een webshop niet anders. Toch is er meer nodig dan alleen een strak design. Een homepagina kan er heel mooi en verzorgd uitzien maar het is belangrijker dat de boodschap goed overkomt en dat de bezoeker snel inzicht krijgt in de producten en/of diensten (Cremers, 2017). Via de homepagina moet de bezoeker rechtstreeks naar de producten en thema’s kunnen navigeren.

PRODUCT DETAIL PAGINA

De PDP is vaak de laatste pagina die de consument bezoekt voordat deze besluit om een product te personaliseren. De PDP moet overzichtelijk zijn en alle noodzakelijke productinformatie bevatten. Denk hierbij aan een productafbeelding en de prijs. Maar ook productgrootte, gewicht en andere specifiecaties.

CONCLUSIE STRUCTUUR

THEMAPAGINA

Heroes of Print wil heel het jaar door relevant zijn door het gebruik van thema’s. Hiermee willen ze inspelen op herkenbare momenten voor de doelgroep om gepersonaliseerde artikelen aan te schaffen. Deze thema’s kunnen variëren van vaderdag, studenten, jubileum, teambuilding etc. Uit de gebruikersanalyse is gebleken dat de themapagina’s ook gebruikt zullen worden als landingspagina’s en dat de doelgroep graag op de pagina geïnspireerd wil worden door middel van sfeerbeelden. 4

DESIGN-OMGEVING

Omdat Heroes of Print gepersonaliseerde artikelen gaat verkopen is het logisch dat de bezoeker altijd door de design-omging moet om een order te kunnen plaatsen. Vanwege het brede assortiment is het vanzelfsprekend dat de bezoeker eerst een product moet kiezen om deze vervolgens te kunnen personaliseren (zie bijlage 2: concurrentieanalyse). Hierdoor komt op elke product-pagina een duidelijke ingang naar de design-omgeving.

GEBRUIKTE METHODES

Uit de concurrentenanalyse is gebleken dat de concurrenten nagenoeg dezelfde structuur gebruiken en daarop is de structuur van Heroes of Print bepaald. Uit het literatuuronderzoek is gebleken dat voor een optimale conversie er maximaal drie lagen in de subcategorieën mogen zitten. Na intern overleg is besloten dat de homepagina, themepagina’s, PDP en de design-omgeving de belangrijkste pagina’s worden van de nieuwe webshop.

35 35

REALISATIE

5.1 HOMEPAGINA Alhoewel een deel van de consumenten de homepagina zal overslaan (zie gebruikersanalyse) is het toch een van de belangrijkste paginaâ&#x20AC;&#x2122;s van een webhop. Met de homepagina maakt de consument kennis met Heroes of Print. Merkbeleving speelt hierin een belangrijke rol. Om te voorkomen dat de consument bij binnenkomst snel afhaakt is het belangrijk dat het doel van de homepagina direct duidelijk is. Uit onderzoek (Van Riet, 2014) blijkt dat er vier stappen nodig zijn voor het duidelijk maken van het doel van een site. Stap1: bepaal de plek De meest logische plek voor het duidelijk maken van het doel is de ruimte onder de navigatie. Door trends als mobile first-development wordt hier steeds meer ruimte voor gebruikt. Afbeelding 4: Plaats voor het doel van de homepagina

Carrousel Uit meerdere onderzoeken blijkt dat het gebruik van een carrousel niet zorgt voor meer conversie. De eerste slide levert nog wel doorkliks op, maar alle slides die daarop volgen niet (Landeweerd, 2015). Voor meer beleving en het aanspreken van een bredere doelgroep is aan te raden om wĂŠl een carrousel te gebruiken. Hierdoor zal het merkverhaal van Heroes of Print beter naar voren komen.

37 37

38 38

Stap 2: bepaal de inhoud Nu de plek is gekozen kan de inhoud worden bepaald. Maar om de inhoud te bepalen moet eerst gekeken worden naar het doel van de pagina. Het doel van de homepagina is de bezoeker snel inzicht geven in de producten en diensten van Heroes of Print. Stap 3: schrijf een goede tekst mĂŠt call-to-action Houd de tekst kort. Short copy is de kunst van het weglaten. De kunst is om de bezoeker te verleiden om verder te willen lezen en om op de call-to-action button te klikken. Stap 4: de juiste visual Een bijpassende visual is erg belangrijk. Gebruik een visual die past bij de inhoud. Uit deze vier stappen zijn de volgende 3 banners ontstaan. Omdat Heroes of Print gaat richten op themaâ&#x20AC;&#x2122;s en het daarom een dynamische website wordt dienen deze banners als richtlijn voor de juiste merkbelving.

Afbeelding 5: Banner 1

Afbeelding 6: Banner 2

39 39

Afbeelding 7: Banner 3

40 40

Het assortiment van Heroes of Print is zeer divers. Uit de gebruikersanalyse blijkt dat de doelgroep snel inzicht wil krijgen in de producten en de webshop er strak en clean uit moet zien. Hierdoor wordt er geadviseerd om de belangrijkste productcategorieën te visualiseren onder de carrousel door middel van icoontjes. Een voorbeeld hiervan is te zien in afbeelding 8. Afbeelding 8: Productweergave met icoontjes

Navigatie Uit de gebruikersanalyse is naar voren gekomen dat de doelgroep graag makkelijk wil kunnen navigeren naar de pagina’s. Omdat Heroes of Print zich wil onderscheiden door in te spelen op thema’s is het belangrijk dat dit ook duidelijk wordt gecommuniceerd op de homepagina. Door enkele thema’s weer te geven door middel van passende sfeerafbeeldingen wordt de merkbeleving versterkt en kan de bezoeker makkelijk door de thema’s navigeren. Afbeelding 9: Themaweergave met sfeerbeelden

De keuze van deze thema’s kunnen door het jaar heen relevant zijn. Sommige thema’s zijn vertaald naar het Engels omdat de organisatie ‘stelletjes’ en ‘beste vrienden’ niet vindt passen bij het gewenste imago van Heroes of Print.

Stappenplan Om aan te geven dat het bestelproces uit slechts drie stappen bestaat is aan te raden om een stappenplan weer te geven op de homepagina. Raadpleeg pagina 53 voor de verdere onderbouwing van dit stappenplan. Afbeelding 10: Stappenplan

Producten Om een beter beeld te geven van het assortiment zijn er een aantal producten geselecteerd voor de homepagina. Hoe deze producten het beste kunnen worden weergegeven voor de juiste combinatie tussen merkbeleving en conversie is te vinden op pagina 53. Afbeelding 11: Productweergave

Uit de gebruikersanalyse komt naar voren dat de consumenten graag inspiratiebeelden willen zien. Ook een prijsweergave wordt erg gewaardeerd. Om die reden zal de prijs niet alleen weergegeven moeten worden op de PDP maar ook op eerdere paginaâ&#x20AC;&#x2122;s zoals de homepagina. Daarnaast dient deze productweergave als inspiratie voor de consument.

41 41

42 42

Pay-oﬀ Door in te zetten op hero-momenten en daarmee een unieke merkbeleving neer te zetten onderscheidt Heroes of Print zich van de concurrenten. Om deze positionering krachtig te communiceren is de volgende pay-off tot stand gekomen:

“Jouw [HERO MOMENT] op een [CUSTOM PRODUCT]” Deze pay-off is dynamisch en kan voor iedereen verschillend zijn. Door deze pay-off communiceert Heroes of Print dat de mogelijkheden eindeloos zijn en dat de consument zelf aan het stuur zit. In afbeelding 12 worden een aantal mogelijke uitwerkingen van deze pay-off weergegeven.

Afbeelding 12: Mogelijkheden pay-oﬀ

Om deze pay-off te kunnen communiceren is er een script geschreven doormiddel van HTML, CSS en Javascript. Door intern overleg is bepaald dat de pay-off in het Engels het beste overkomt en om de leesbaarheid te vergroten worden de producten weergegeven met dezelfde icoontjes die worden gebruikt onder de carrousel. In HTML zijn een aantal elementen aangemaakt die door middel van een “class” worden aangegeven. Afbeelding 13: HTML pay-oﬀ

Vervolgens worden deze elementen opgeroepen in Javascript. Elke drie seconden krijgen de elementen een andere waarde waardoor de pay-off verandert. Afbeelding 14: Javascript pay-oﬀ

43 43

Afbeelding 15: Pay-oďŹ&#x20AC; zonder CSS

44 44

Nu de functionaliteiten werken kan de pay-off worden opgemaakt met CSS. Uit de gebruikersanalyse is naar voren gekomen dat de doelgroep het belangrijk vindt dat een website overzichtelijk en clean is. Dit is daarom ook doorgevoerd in de pay-off zoals hieronder is weergegeven op afbeelding 16.

Afbeelding 16: Pay-oďŹ&#x20AC; met CSS

Over ons Uit de concurrentieanalyse (zie bijlage II) is gebleken dat de concurrenten geen algemene informatie plaatsen op de homepagina. Omdat Heroes of Print nieuw is op de markt van gepersonaliseerde artikelen wordt aangeraden om hier wel algemene informatie te plaatsen. Dit draagt ook bij aan de organische vindbaarheid in Google, aldus Hans Hendrikx (SEO specialist Plato Group).

Afbeelding 17: Over ons homepagina

Nu alle elementen compleet zijn kunnen deze worden toegevoegd op de homepagina. Vervolgens is de homepagina een aantal keer doorlopen en samen met Asselman om de puntjes op de i te zetten. Een voorbeeld van de homepagina wordt weergegeven op de volgende pagina.

45 45

Afbeelding 18: Mogelijke homepagina

46 46

47 47

CONCLUSIE HOMEPAGINA

GEBRUIKTE METHODES

Het doel van de homepagina kan het best duidelijk gemaakt door middel van een carrousel aan het begin van de homepagina en de dynamische pay-off die is geformuleerd. Om de diversiteit van het assortiment te weerspiegelen en de webshop strak en clean te houden wordt geadviseerd om de belangrijkste productcategorieĂŤn weer te geven door middel van icoontjes. Om de merkbeleving van Heroes of Print te vergroten en makkelijk te navigeren naar de themapaginaâ&#x20AC;&#x2122;s kunnen deze worden weergeven door middel van bijpassende sfeerbeelden. Een bestelling plaatsen bij Heroes of Print bestaat in slechts drie simpele stappen. Om dit te communiceren wordt aan te raden om dit te verwerken in een overzichtelijk stappenplan. Om een extra inzicht te geven over het assortiment kunnen er een aantal producten worden geselecteerd voor de homepagina. Hoe deze het best kunnen worden weergegeven voor de juiste combinatie tussen merkbeleving en conversie wordt beschreven op bladzijde 56. Omdat Heroes of Print nieuw is op de markt van gepersonaliseerde artikelen wordt aangeraden om een korte algemene informatie te plaatsen. Dit is tevens goed voor de vindbaarheid in Google.

48 48

5.2 THEMAPAGINA’S Uit de gebruikersanalyse is gebleken dat de themapagina’s van Heroes of Print veel gebruikt zullen worden als landinsgpagina’s. Of het nou is via een advertentie of via een zoekresultaat, bezoekers komen via een link of een zoekmachine op de pagina op zoek naar een gericht product of thema. Merkbeleving speelt hierin een belangrijke rol. Omdat de consument via de themapagina’s naar de PDP navigeert moet er in de ontwerpfase ook nagedacht worden over conversie. Door middel van vooronderzoek en testen moet erachter gekomen worden wat de beste layout is voor de themapagina’s van Heroes of Print. Doel Het doel van de themapagina’s is om verkeer te trekken via zoekmachines en social media. Daarnaast zullen bezoekers hier worden geïnspireerd en dit moet leiden tot conversie. Vooronderzoek Voordat er begonnen kan worden met het ontwerpen van prototypes is er eerst literatuuronderzoek gedaan. Uit een overvloed informatie zijn de belangrijkste elementen geselecteerd die van toepassing zijn voor de webshop van Heroes of Print. Deze elementen zijn geselecteerd op basis van relevantie en merkbeleving. Vervolgens zijn deze elementen vergeleken met de themapagina’s van Bol.com, Ikea en Zalando. Er is voor deze webshops gekozen vanwege de focus op conversie en er naar alle waarschijnlijkheid teams van e-commerce specialisten op dagelijkse basis bezig zijn om deze webshops zo optimaal mogelijk in te richten. Het volledige onderzoek is te vinden in bijlage III.

49 49

50 50

Uit het vooronderzoek in combinatie met de gebruikersanalyse zijn de volgende acht elementen gekomen. 1. Banner De banner is erg bepalend en is eerste element dat de bezoeker ziet en daarom ideaal om de merkbeleving zo Om de banner zo optimaal mogelijk te benutten is het belangrijk dat er gekozen wordt voor een bepalende afbeelding. Verder moet de banner voorzien zijn van duidelijke tekst en een call-to-action button. 2. Producten De themapagina’s hebben als doel om zoveel mogelijk producten te laten zien met hetzelfde overkoepelende thema. Om de keuzemogelijkheid te beperken en de consument enigzins te sturen wordt aangeraden om voorkeuren aan te geven. De producten kunnen op verschillende manieren worden weergegeven. Welke weergave de beste is voor zowel merkbeleving als conversie is de vinden op pagina 56. 3. USP’s Om vertrouwen te wekken is het belangrijk dat de USP’s op alle pagina’s worden weergegeven. Dit kan op de pagina’s zelf maar dit kan ook in de header of in de footer. 4. Categorieën Afhankelijk van de themapagina’s kunnen vergelijkbare categorieën worden getoond. Denk hierbij aan een broer/ zus themapagina op een geboortepagina. 5. Prijs Uit de gebruikersanalyse is gebleken dat de doelgroep graag de prijs terugziet op de themapagina’s. Dit zie je ook terug bij Bol.com, Ikea en Zalando. 6. Navigatie Uit de gebruikersanalyse is naar voren gekomen dat de consument graag makkelijk wil navigeren tussen verschillende pagina’s. 7. Inspiratie Voor inspiratie kunnen de themapagina’s voorzien zijn van verschillende sfeerbeelden. Deze zullen per thema verschillend en relevant moeten zijn voor optimale merkbeleving. 8. Stappenplan Om aan te geven dat het bestelproces uit slechts in drie stappen bestaat wordt er op verzoek van de organisatie een stappenplan weergegeven op de themapagina’s.

VIJF SECONDEN TEST Nu de elementen van de themapagina’s bekend zijn kan er gekeken worden naar de beste structuur. Omdat deze pagina’s veel gebruikt zullen worden als landingspagina’s is het belangrijk dat de bezoeker in één oogopslag weet dat hij of zij op het juiste adres is. Volgens onderzoek (FATbit, 2014) zijn de eerste vijf seconden voor een bezoeker essentieel. In deze vijf seconden is het bouncepercentage het hoogst en maken de meeste bezoekers de beslissing om te blijven of om te pagina te verlaten. Om deze reden is er gekozen voor een vijf-seconden onderzoek. Tijdens het onderzoek hebben 30 respondenten uit de doelgroep willekeurig een van de drie pagina’s gekregen. Na vijf seconden werd het scherm zwart en kregen ze de volgende vier vragen: 1. Waar gaat de pagina over? 2. Welke producten kun je er kopen? 3. Wat valt het meest op? 4. Hoe ziet het stappenplan eruit? Omdat de test niet de hele pagina kan testen is in overleg met de organisatie vastgesteld dat de header, de producten en het stappenplan de belangrijkste elementen worden van de themapagina’s. Voor het onderzoek zijn drie verschillende pagina’s ontworpen met elk een verschillende layout maar met dezelfde drie elementen. De opbouw van de vijf secondentest staat hieronder schematisch weergegeven. Afbeelding 19: Weergave van de vijf-seconden test

51 51

52 52

Uitkomst onderzoek 1 Uit het onderzoek zijn de volgende resultaten naar voren gekomen. Voor het overzicht zijn alleen de antwoorden weergegeven waar conclusies uit zijn getrokken. Het volledige vijf-seconden onderzoek is te vinden in bijlage 4. Afbeelding 20: Uitkomst vijf-secondentest1A

9/10

3/10het

zegt dat vaderdag het thema is

Heeft plan stappen gezien

Afbeelding 21: Uitkomst vijf-secondentest1B

7/10

zegt dat deze titel het meest opvalt

0/10 het

Heeft plan stappen gezien

Afbeelding 22: Uitkomst vijf-secondentest1C

53 53

10/1a0an

7/10

geeft banner dat de est het me opvalt

kan aangeven om welke producten het gaat

Banner Uit het onderzoek is gebleken dat de banners zeer effectief zijn. Bij test 1A geeft 9/10 aan dat het om vaderdag gaat en bij test 1C geven alle testpersonen aan dat de banner het meest opvalt. Heroes of Print wil zich onderscheiden door te richten op de momenten en niet op de producten. Hierdoor is ervoor gekozen om in de banner altijd te gebruiken voor sfeerafbeeldingen. Titels Uit het onderzoek is gebleken dat ook de titels goed worden bekeken. Bij test 1B met de duidelijke titel naast de afbeelding, zegt 7/10 dat de titel het meest opvalt. Producten Uit dit onderzoek worden zowel product-afbeeldingen als sfeerbeelden goed gezien. Welke oplossing het beste werkt moet blijken uit een volgende test. Stappenplan Het stappenplan wordt het best gezien zoals hij weergegeven is op test 1A. Dit wil zeggen met een witte achtergrond en een passende titel boven het stappenlan. 3/10 respondenten kan na 5 seconden vertellen hoe het stappenplan eruit ziet.

54 54

Producten Uit de eerste test is veel bruikbare informatie gekomen en de structuur is bepaald. Omdat er uit de eerste test nog niet duidelijk naar voren is gekomen op welke manier de producten moeten worden getoond is er een tweede test afgenomen. Wederom worden er drie pagina’s ontwikkeld met dezelfde content. Het enige verschil is dat de producten op verschillende manieren worden weergegeven. Test 2A laat alleen sfeerbeelden zien, test 2C laat alleen productafbeeldingen zien en bij test 2B worden deze gecombineerd. Uit deze test moet de volgende informatie komen: 1. Bij welke weergave komt de boodschap “gepersonaliseerde producten” het beste over. 2. Bij welke weergave worden de producten het beste onthouden. Met de gele post-it’s is aangegeven hoeveel van de respondenten de producten benoemd na het zien van de pagina.

Afbeelding 23: Uitkomst vijf-secondentest 2A

Afbeelding 24: Uitkomst vijf-secondentest 2B

55 55

Afbeelding 25: Uitkomst vijf-secondentest 2C

56 56

Uitkomst test 2 Uit de tweede test komt naar voren dat de sfeerafbeeldingen het beste effect hebben op het benoemen van de producten. Echter komt bij test 2B (combinatie sfeerbeelden en productafbeeldingen) het duidelijkst naar voren dat de pagina gaat om het verkopen van producten. Bij test 2C (alleen productafbeeldingen) wordt het vaakst benoemd dat de pagina gaat over gepersonaliseerde producten. Om die redenen is ervoor gekozen om een combinatie te gebruiken van sfeerbeelden en productafbeeldingen. Het is belangrijk dat de bezoeker snel een overzicht heeft van de beschikbare producten maar daarnaast is het belangrijk dat hij of zij weet dat het gaat over een webshop voor gepersonaliseerde producten. Afbeeldingen Uit het merkverhaal van Heroes of Print komt duidelijk naar voren dat gepersonaliseerde producten het gevoel van vreugde trots of plezier vergroten. Omdat Heroes of Print dit gevoel door wil voeren in de paginaâ&#x20AC;&#x2122;s is ervoor gekozen om afbeeldingen weer te geven met geperonsaliseerde producten. Omdat het lastig is om alleen producten te vinden met gepersonaliseerde producten zullen afbeeldingen aangepast moeten worden. Om te beginnen zijn er een aantal online tutorials bekeken. Daarna zijn er afbeeldingen met toepasselijke situaties aangeschaft via Getty Images en zijn de afbeeldingen aangepast zoals wordt weergegeven op afbeelding 26.

Afbeelding 26: Afbeeldingen voor en na aanpassingen

57 57

58 58

Nu de elementen “boven de vouw” zijn onderzocht kan er gekeken worden naar de verdere invulling van de themapagina’s. Producten Vanwege de diversiteit van het assortiment wordt aangeraden om gerelateerde producten op de themapagina’s te plaatsen. Hierdoor heeft de bezoeker beter inzicht in het assortiment. Wegens de deadline voor de webshop is ervoor gekozen om deze producten voorlopig zonder opdruk weer te geven. Om de nadruk beter te leggen op gepersonaliseerde producten is het een verbeterpunt voor de toekomst om deze producten met opdruk weer te geven. Uit de gebruikersanalyse is gebleken dat de doelgroep graag de prijs wil zien op de themapagina’s. Voor extra conversie zullen de producten voorzien moeten zijn van een duidelijke call-to-action button zoals dat te zien is op afbeelding 27. Afbeelding 27: Productweergave themapagina

Over ons Om nieuwe bezoekers kennis te laten maken met Heroes of Print kan algemene informatie geplaatst worden op de themapagina’s. Afbeelding 28: Mogelijke weergave over ons themapagina

Voor optimale merkbeleving kan de content die hiervoor wordt gebruikt gaat worden voor elke themapagina verschillend en door het gebruik van een bijpassende afbeelding heeft iedere themapagina een unieke uitstraling. Vergelijkbare themapagina’s. Om makkelijk naar verschillende pagina’s te kunnen navigeren en als extra inspiratie is ervoor gekozen om op elke themapagina vergelijkbare pagina’s te tonen met de kop “bekijk ook”. Afbeelding 29: Mogelijke weergave vergelijkbare themapagina’s

59 59

Afbeelding 30: Mogelijke uitwerking themapaginaâ&#x20AC;&#x2122;s

60 60

61 61

CONCLUSIE THEMAPAGINA’S

GEBRUIKTE METHODES

De drie belangrijkste elementen voor de themapagina’s zijn de banner, het stappenplan en de producten. Uit een vijf-secondentest is gebleken dat de banner zeer effectief is. Een sfeerafbeelding in combinatie met de juiste boodschap moet zorgen dat de bezoeker getriggerd is om op de pagina te blijven. Om de bezoeker te overtuigen dat een product in slechts drie stappen besteld kan worden is een stappenplan ontwikkeld. Uit de vijf-secondentest is gebleken dat deze het best kan worden weergegeven onder de banner met een titel. Omdat het belangrijk is dat de producten goed opvallen en dat de bezoeker weet dat de pagina gaat over een webshop van gepersonaliseerde producten is ervoor gekozen om een combinatie weer te geven van productafbeeldingen en sfeerafbeeldingen. Vervolgens worden de overige producten weergegeven met een prijs en een duidelijke call-to-action button voor optimale conversie. De algemene informatie over Heroes of Print wordt op elk themapagina weergegeven door middel relevante content. De themapagina’s eindigen met drie vergelijkbare pagina’s als inspiratie en om de navigatie naar de pagina’s te optimaliseren.

5.3 PRODUCT DETAIL PAGINA 62 62

De PDP is de laatste pagina voordat de consument naar de design-tool gaat. Daarom is het de belangrijkste pagina als het aankomt op conversie. Heroes of Print heeft ervoor gekozen om Flatsome te gebruiken als WordPress thema. Om die reden zijn ze soms beperkt met de ontwerpmogelijkheden. Zo is dat ook het geval bij de Product Detail Pagina (PDP). De PDP van het Flatsome thema ziet er als volgt uit. Afbeelding 31: PDP Flatsome thema

Afbeelding 32: Uitwerking brainstorm

Om te komen een duidelijke en complete PDP is er begonnen met een brainstormsessie met het Heroes of Print team. Hieruit is een lijst gekomen met alle benodigde elementen. Vervolgens is deze lijst vergeleken met de concurrenten (zie bijlage X) en waar nodig is verder aangevuld. 1. gerelateerde producten * 2. beoordelingen (product) 3. CTA button -> Design Tool 4. specifieke USPâ&#x20AC;&#x2122;s 5. Prijs 6. Bulk / staffelkorting 7. kleur opties * 8. Aantallen 9. Maten *

10. Productafbeeldingen 11. Social media * 12. Voorraad 13. URL / structuur 14. Broodkruimels 15. Label / Promo *

* Dit zijn optionele elementen. Deze zijn afhankelijk van het product omdat niet alle producten te verkrijgen zijn in verschillende maten of kleuren.

Uit deze elementen is het volgende wireframe gemaakt van de PDP. Afbeelding 33: Wireframe PDP

63 63

Het wireframe is door Robert Staal goedgekeurd en vervolgens doorvertaald naar een Photoshop ontwerp.

64 64

Afbeelding 34: Photoshop ontwerp aan de hand van het wireframe

Specialist Als laatste check is het ontwerp bekeken door Patrick Asselman, een interne designer voor Clipper. Asselman gaf aan dat de pagina behoorlijk breed is en dat het overzichtelijk wordt wanneer je bepaalde elementen dichter op elkaar plaatst. In overleg met Asselman is ervoor gekozen om een widget area toe te laten voegen zodat er altijd de mogelijkheid is om zelf informatie toe te voegen zoals aanbiedingen of verzendkosten. Met deze aanbevelingen is het laatste ontwerp ontstaan en doorgestuurd naar een externe devoloper die het ontwerp heeft doorgevoerd in de webshop. Het ontwerp is tot slot ook doorvertaald voor mobiel. Zie afbeelding 36.

Afbeelding 35: PDP ontwerp na goedkeuring Asselman

Afbeelding 36: PDP ontwerp mobiel

65 65

CONCLUSIE PDP

GEBRUIKTE METHODES

Uit een brainstormsessie en het vergelijken van concurrenten zijn 15 elementen geselecteerd voor de PDP. Deze elementen zijn samengevoegd door middel van een wireframe. Na goedkeuring van Staal is het wireframe doorvertaald naar een photoshop ontwerp. Dit ontwerp is goedgekeurd door Asselman en doorgestuurd naar een externe developer en geĂŻntegreerd in de webshop.

5.4 DESIGN-TOOL 66 66

De design-tool is het belangrijkste element van de webshop. Alles wat op eerdere pagina’s wordt beloofd moet de design-tool waar kunnen maken. Het is daarom belangrijk dat de tool simpel en overzichtelijk is maar vooral functioneel goed werkt. Conversie speelt hierin een belanrijkere rol dan merkbeleving. De InkXE tool uit India is in juni 2017 door de organisatie aangeschaft en is in meer dan 500 webshops geïntegreerd over de hele wereld. Het installeren van de design-tool was redelijk eenvoudig maar het configureren is een lang proces geweest waar een team van vijf personen een aantal weken mee bezig is geweest. Een aantal werkzaamheden worden er hieronder beschreven: - - - - -

De design-tool is volledig vertaald van Engels naar Nederlands. Er zijn drukvlakken gemaakt voor alle producten die niet rechthoeking kunnen worden bedrukt. Voor alle 200 producten is een color mask gemaakt om de afbeeldingen om te kleuren in de tool. Er zijn ruim 500 cliparts toegevoegd en verdeeld over verschillende categorieën. Er zijn 30 verschillende lettertypes toegevoegd die voor commerciële doeleinden bruikbaar zijn.

De volledige configuratie van de design-tool is te vinden in bijlage VI.

Uit de gebruikersanalyse is gebleken dat de doelgroep verwacht dat de tool simpel en overzichtelijk is. Verder geeft de doelgroep aan om ook de prijs te willen zien. Deze elementen zijn meegenomen in de configuratie. Om de desgin-tool te integreren in de webshop is deze zo ingesteld dat de kleuren overeenkomen met de kleuren van de webshop. Afbeelding 38: Design-tool

Tijdens de configuratie zijn alle onderdelen grondig getest en nagekeken door het team. Het team bestaat uit twee marketeers, een ICTâ&#x20AC;&#x2122;er en twee stagiaires. Of alle functies duidelijk zijn voor de doelgroep moet blijken uit een gebruikerstest. De uitkomst hiervan is te vinden op de volgende pagina.

67 67

5.5 GEBRUIKERSTEST 68 68

Voor de gebruikerstest zijn twee producten geselecteerd. Dit zijn de Coaster opener en een standaard T-shirt. Deze producten zijn compleet ingesteld productafbeeldingen, prijzen, kleuren, printarea’s etc. Voor het onderzoek zijn twee scenario’s geschetst. Deze zijn door vier personen uit de doelgroep uitgevoerd. Zowel het beelscherm als het geluid is opgenomen en aan de respondenten wordt gevraagd om hardop te denken. Scenario I: Familieweekend

Scenario II: Kampioenschap

Het einde van het jaar is in zicht. Begin volgend jaar staat het familieweekend weer voor de deur en dit jaar heb jij het georganiseerd. Als bedankje besluit je een opener te ontwerpen voor de hele familie. Wat je op de opener zet mag je helemaal zelf weten, ben hierin lekker creatief. De familie bestaat uit 25 personen.

Na een heel seizoen hard trainen ziet het erna uit dat jullie eindelijk kampioen worden met het sportteam. Aankomende zondag staat de laatste wedstrijd van het seizoen op het programma en bij winst kan het kampioenschap worden gevierd. Om het gevoel van vreugde, trots en plezier te versterken besluit je een kampioenschapshirt te ontwerpen voor het hele team. Het team bestaat uit 15 spelers.

Vragen: 1. Hoe ben je te werk gegaan? Wat viel je daarbij op? 2. Welke functies heb je gebruikt? Kon je deze makkelijk gebruiken? Mis je nog functies? 3. Hoe heb je de snelheid van de design-tool ervaren? 4. Wat vind je over het algemeen van de design-tool? Wat vind je goed? Wat kan beter? De volledige gebruikerstest is te vinden in bijlage VII.

Uit de gebruikerstest in combinatie met de gebruikersanalyse is naar voren gekomen dat de belangrijkste functies van de design-tool zijn: Het gebruikmaken van cliparts, het uploaden van eigen foto’s en het toevoegen van teksten.

Nagenoeg alle functionaliteiten zijn gebruikt door de respondenten en deze konden goed worden gevonden. Er zijn een aantal punten naar voren gekomen om de design-tool te optimaliseren. Tekst kleur Wanneer een tekst wordt toegevoegd krijgt deze standaard de kleur wit. Vanwege de witte achtergrond is deze button moeilijk te zien. Om die reden is ervoor gekozen om de standaard kleur te veranderen naar zwart. Deze verandering is getest door drie collega’s van Plato Group en goedgekeurd.

Product kleur De gekozen product kleur van de PDP wordt niet meegenomen naar de design-tool. Hiervoor is een ticket gemaakt voor de developers van InkXE (zie bijlage VI). Zij hebben deze functie aangepast en geïmplementeerd in de design-tool.

CONCLUSIE DESIGN-TOOL

Cliparts Uit de tweede test kwam naar voren dat er nog een aantal cliparts ontbreken. Op dit moment staan er ruim 500 cliparts in de design-tool. Het is voor livegang geen pre om deze uit te breiden maar een aandachtspunt voor in de toekomst. Belangrijk hierin is dat geen invloed heeft op de snelheid van de tool. Tekst wijzigingen Vanwege het kopje “ontwerpen” duurde het lang voordat andere elementen werden gevonden. De respondenten gaven aan dat ze verwachten dat alles onder “ontwerpen” stond. Het advies is om dit kopje te veranderen naar “templates” en om de tool te openen met het tabblad “tekst toevoegen”. Inspiratie Twee respondenten gaven aan dat ze graag voorbeelden willen zien op de design-tool. Ook dit is geen pre voor livegang maar een aandachtspunt voor in de toekomst.

GEBRUIKTE METHODES

De design-tool wordt door de doelgroep ervaren als makkelijk en overzichtelijk. De button om de tekstkleur te veranderen was moeilijk te zien. Deze is aangepast en opnieuw getest. Om de user experience te vergroten wordt geadviseerd om meer cliparts toe te voegen mits dit de snelheid van de tool niet beïnvloed. Omdat bepaalde elementen niet snel konden worden gevonden wordt aangeraden om een tekst wijzigingen door te voeren en de tool te openen in een ander tabblad. Voor in de toekomst wordt geadviseerd om voorbeelden van producten weer te geven in de design-tool. De cliparts, afbeelding uploaden en het toevoegen van tekst zijn de belangrijkste functies van de design-tool zijn.

69 69

70 70

CONCLUSIES & AANBEVELINGEN

CONCLUSIES In het begin van het onderzoek is de volgende hoofdvraag geforumuleerd: Hoe kan Heroes of Print conversie en merkbeleving het best combineren en hoe vertaalt zich dit door op de belangrijkste pagina’s van de webshop? Door deze te kunnen beantwoorden zal eerst antwoord gegeven moeten worden op de deelvragen.

1. Welke structuur van de webshop draagt bij aan een optimale conversie? Het onderzoek toont aan dat de structuur van Heroes of Print bestaat uit een homepagina die vervolgens gesplitst wordt in producten en hero-momenten. Voor optimale conversie mogen er maximaal drie lagen in de subcategorieën zitten. 2. Wat zijn de belangrijkste pagina’s voor de webshop van Heroes of Print? Na intern overleg is besloten dat de homepagina, themepagina’s, PDP en de design-omgeving de belangrijkste pagina’s worden van de nieuwe webshop. 3. Hoe kunnen de producten op deze pagina’s hetbeste worden weergegeven om zowel de merkbeleving als conversie te realiseren? Homepagina Om het merkverhaal van Heroes of Print duidelijk naar voren te laten komen en om een brede doelgroep aan te spreken is een carrousel gebruikt. Om de diversiteit van het assortiment te weerspiegelen worden de belangrijkste productcategorieën weergegeven door middel van icoontjes. Daaronder staan een aantal thema’s met bijpassende sfeerbeelden om de merkbeleving te vergroten.

Themapagina’s De themapagina’s van Heroes of Print zullen veel gebruikt zullen worden als landingspagina’s. Het is hierin belangrijk dat de bezoeker in één opslag weet dat hij of zij op het juiste adres is. Merkbeleving speelt hierin een belangrijke rol. De banner moet altijd voorzien zijn van een passende titel en een sfeerbeeld met daarop een product met opdruk. De producten moeten worden weergegeven door middel van een combinatie tussen sfeerbeelden en productafbeeldingen voor de juiste balans tussen merkbeleving en conversie. Productdetail pagina De productdetail pagina is de laatste pagina voordat de bezoeker naar de design-tool gaat. De productdetail pagina is daarom clean, duidelijk en puur gericht voor conversie. 4. Wat zijn de belangrijkste elementen van de design-tool en welke weergave zorgt voor de beste user experience? De design-tool wordt door de doelgroep ervaren als makkelijk en overzichtelijk. Uit de gebruikersanalyse en de gebruikerstest blijkt dat de belangrijkste functies van de design-tool zijn het toevoegen van cliparts, het uploaden van eigen afbeelding en het toevoegen van tekst.

71 71

AANBEVELINGEN 72 72

Tijdens het onderzoek zijn er een aantal punten naar voren gekomen die nu niet konden worden gerealiseerd maar waarvan het de moeite waard is om deze in de toekomst uit te voeren. Productweergave Als extra merkbeleving en inspiratie is het voor de home- en themapaginaâ&#x20AC;&#x2122;s aan te raden om alle productafbeeldingen te voorzien van een opdruk. Om teleurstellingen te voorkomen is het belangrijk dat de opdruk ook wordt meegenomen naar de design-tool. Reviews Uit de gebruikersanalyse blijkt dat 7 van de 10 respondenten graag een review wil lezen om de betrouwbaarheid van een webshop te bepalen. Dit zal daarom ook zorgen voor meer conversie. Het is daarom aan te raden om deze in de toekomst mee te nemen op de home- en themapaginaâ&#x20AC;&#x2122;s. Cliparts design-tool Op dit moment staan er ruim 500 cliparts in de design-tool. Toch zullen er een hoop bezoekers cliparts missen. Aan te raden is om na een bepaalde periode te bekijken welke producten het meest worden verkocht en met welke opdruk en aan de hand hiervan bepalen welke cliparts er toegevoegd kunnen worden. Inspiratie Twee respondenten gaven aan dat ze graag voorbeelden wilden zien van producten met een opdruk. Dit zal de user experience vergroten en eventueel bijdragen aan conversie.

EVALUATIE De afgelopen stageperiode is voorbij gevlogen. Ik kan terugkijken op een zeer leerzame en gezellige tijd. Ik heb ervoor gekozen om stage te gaan lopen bij een grote organisatie en hier heb ik geen seconden spijt van gehad. Ik was onderdeel van het marketing team en had dagelijks contact met collegaâ&#x20AC;&#x2122;s van Clipper en IGO. Ik heb ondervonden dat het prettig is om te werken met een jong team waarbij alle ogen dezelfde kant op staan. Als ik terugkijk naar mijn stageperiode heb ik de meeste moeite gehad met een persoonlijke planning. In week 10 heb ik een nieuwe planning gemaakt en ben ik begonnen met het maken van een sprint. Dit was lastiger dan verwacht maar dit heeft mij enorm geholpen met het uitvoeren van de opdracht. Ik heb naast mijn opdracht veel meegewerkt aan het bouwen van de webshop maar ik heb alle tijd en ruimte gekregen voor het uitvoeren van mijn opdracht. Het is jammer dat we er niet in zijn geslaagd om eind het jaar te halen met de livegang van de webshop maar ik ben ervan overtuigd dat dit niet heel lang meer gaat duren. Ik heb met veel plezier gewerkt aan deze opdracht en heb er veel van geleerd. Zo is mijn kennis op het gebied van webdesign, WordPress, onderzoek en marketing in korte tijd enorm verbeterd. Ik ben tevreden op het eindresultaat en trots dat ik mee heb mogen werken aan deze webshop.

73 73

74 74

LITERATUURLIJST Bearends, J. (2015, 16 december). 5 learnings na een A/B-test van $1.000.000. Geraadpleegd op 27 september 2017, van https://www.adcrowd.com/nl/blog/5-learnings-na-een-ab-test-van-1000000 Borchert, M. (2017, 18 februari). Adobe Photoshop Displacement Map Tutorial [Video]. Geraadpleegd op 20 september 2017, van https://www.youtube.com/watch?v=DErqXzQ3Qkw&t=1s Cremers, M. (2017, 24 maart). Indeling in categorieën en subcategorieën. Geraadpleegd op 27 september 2017, van https://www.heuvelmarketing.com/blog/moderne-website-maken-dit-zijn-de-elementen-van-een-goedehomepage Damveld, J. (2014, 14 oktober). 11 tips voor een krachtig converterende landingspagina. Geraadpleegd op 27 september 2017, van https://www.frankwatching.com/archive/2014/10/14/11-tips-voor-een-krachtig-converterende-landingspagina/ De Kruijf, D. (z.j.). Indeling in categorieën en subcategorieën. Geraadpleegd op 20 september 2017, van https:// www.sageon.nl/de-perfecte-landingspagina-7-tips-voor-hogere-conversie/ Geenen, K. (z.j.). Een goede sitestructuur ziet er zo uit. Geraadpleegd op 20 september 2017, van https://www. karelgeenen.nl/26/een-goede-sitestructuur-ziet-er-zo-uit/ Jongejan, J. (2011, 26 oktober). De perfecte landingspagina: 7 tips voor een hogere conversie. Geraadpleegd op 20 september 2017, van https://www.frankwatching.com/archive/2011/08/26/20-tips-voor-een-hogere-conversie-op-productpaginas/ Karsten, D. (2014, 16 december). Indeling in categorieën en subcategorieën. Geraadpleegd op 20 september 2017, van https://www.frankwatching.com/archive/2014/12/16/optimaliseer-de-categorieen-van-je-webshop-5-handige-tips-case/ Landeweerd, M. (2015, 1 december). Verwijder de slider van je homepage. Geraadpleegd op 7 december 2017, van https://www.webwinkelkeur.nl/verwijder-de-slider-van-je-homepage/ FATbit. (2014, 18 april). How to make people stay on your website for more than 5 seconds? Geraadpleegd op 23 oktober 2017, van https://www.fatbit.com/fab/make-people-stay-website-5-seconds/ Patel, N. (2017, 4 december). The Homepage is Dead: How to Personalize Pages to Each Unique Visitor. Geraadpleegd op 5 december 2017, van http://wpinitiate.com/index.php/2017/12/04/the-homepage-is-dead-how-to-personalize-pages-to-each-unique-visitor-2/

75 75 Van Kollenburg, A. (z.j.). Meer verkopen door een betrouwbare uitstraling. Geraadpleegd op 4 december 2017, van https://succesmetjewebshop.nl/meer-verkopen-door-een-betrouwbare-uitstraling/ Van Riet, R. (2014, 22 september). In 4 stappen een overtuigende homepage? Zo doe je dat! Geraadpleegd op 5 december 2017, van https://www.frankwatching.com/archive/2014/09/22/in-4-stappen-een-overtuigende-homepage-zo-doe-je-dat/

BIJLAGE I - PROJECTDOCUMENT 76 76

PROJECTDOCUMENT Afstudeeropdracht bij Plato Group BV.

Auteur: Thijs van Uden Studentnummer: 2189393 Opleiding: ICT & Media Design Fontys Hogeschool

Bedrijfsbegeleidger: Robert Staal Stagebegeleider: Anke Bardie

Datum: 13 - 09 - 2017

INHOUDSOPGAVE 1. Het bedrijf

77 77

Plato Group Heroes of Print

2. De opdracht

Huidige situatie Opdrachtomschrijving Doelstellingen Analyse

3. Aanpak Onderzoek Activiteiten Planning

1. HET BEDRIJF 78 Plato Group 78 Plato Group is het moederbedrijf van Clipper, IGO, Compacon en in de nabije toekomst ook Heroes of Print (HoP) en is met deze verkoop-kanalen actief op de markt van bedrukte promotionele artikelen. Plato Group beschikt in Helmond over een groot magazijn van 26.000 m2, een in- en uitpakafdeling en een drukkerij. Hier worden de orders van Clipper, IGO, Heroes of Print en een groot deel van de orders van Compacon afgehandeld. Binnen Plato Group werken ca. 380 mensen, waarvan 90 in het buitenland. Plato Group heeft een sterke marktpositie op nationaal en internationaal gebied. Naast het hoofdkantoor in Nederland hebben ze vestigingen in BelgiĂŤ, Duitsland, Oostenrijk, Engeland, Frankrijk en Denemarken.

Heroes of Print Plato Group is op dit moment met haar verkoopkanalen alleen actief op de zakelijke markt van de productie en verkoop van relatiegeschenken en promotionele artikelen. Door intern onderzoek naar de markt en de trend dat individuen meer de behoefte hebben om zichzelf te onderscheiden heeft Plato Group gesignaleerd dat er een groeiende consumentenbehoefte is om gepersonaliseerde artikelen in lagere aantallen af te nemen. Om deze redenen heeft Plato Group ervoor gekozen om een nieuw online verkoopkanaal toe te voegen aan haar merken. Dit verkoopkanaal in de vorm van een webshop is op dit moment nog in ontwikkeling en zal de naam â&#x20AC;&#x153;HEROES OF PRINTâ&#x20AC;? gaan dragen. Heroes of Print is een startende onderneming gericht op de verkoop van gepersonaliseerde artikelen aan consumenten, ZZPâ&#x20AC;&#x2122;ers en overige kleine ondernemingen. Ze richten zich dus in tegenstelling tot Clipper, IGO en Compacon op de consumentenmarkt. Heroes of Print biedt consumenten de mogelijkheid om een uniek product samen te stellen en zich op die manier te kunnen onderscheiden. De focus van de webshop ligt dus niet op het product, maar volledig op het design en op de beleving.

79 79

2. DE OPDRACHT 80 80

Huidige situatie Medio juni 2017 is er binnen Plato Group een project gestart, geleid door Robert Staal, om een nieuw afzetkanaal toe te voegen aan het reeds bestaande merkenportfolio. Dit nieuwe verkoopkanaal wat zich gaat richten op de consumentenmarkt is volledig online ingericht in de vorm van een webshop. Na een eerste markonderzoek te hebben uitgevoerd waarbij er gekeken is naar hoe andere spelers in de markt het aanpakken werd geconcludeerd dat veel van de concurrenten zich enkel focussen op de producten. De webshops van deze aanbieders zijn vaak simpel ingericht en hebben weinig gevoel voor sfeer en emotie. Enkele van deze concurrenten hadden wel een designtool waar producten mee gepersonaliseerd konden worden. Alleen waren deze tools vaak erg simpel of werkten niet naar behoren. Toen de markt in kaart was gebracht was het tijd om te gaan nadenken over een naam en een logo. Na een tijd van brainstormen, testen en vergelijken is er gekozen voor de naam â&#x20AC;&#x2DC;Heroes of Printâ&#x20AC;&#x2122;. Nadat de naam gekozen was kon er ook concreet worden nagedacht over een logo. Hiervoor is een online ontwerpwedstrijd uitgezet waar meer dan 360 inzendingen op zijn teruggekomen. Uit al deze inzendingen van over de hele wereld is vervolgens een passend logo voor het merk Heroes of Print gekozen.

Vervolgens is Robert gaan nadenken over de structuur en invulling van de webshop. Dit zijn nu nog voornamelijk schetsen gebaseerd op persoonlijke ideeën en smaak. Hier zal nog veel over nagedacht moeten worden en in de toekomst zal ook data uit gaan wijzen wat het beste werkt en wat niet. Vanwege persoonlijke ervaringen, gebruiksvriendelijkheid en uitgebreide mogelijkheden is er gekozen om de webshop te bouwen via WooCommerce. WooCommerce in combinatie met Wordpress werkt snel en makkelijk. Het thema dat gebruikt wordt is ‘Flatsome’. Flatsome is een responsive thema waarbij snelheid en aantrekkelijkheid voorop staan. Ook beschikt het thema over een live page builder en veel unieke elementen. Hierdoor is Flatsome zeer geschikt voor de webshop. Op dit moment bestaat het team uit drie personen. Samen met Floris Boon (afstudeerder Commerciële Economie) en Robert Staal (Marked Offering Lead) zijn we eind augustus begonnen met het verder ontwikkelen van het nieuwe online verkoopkanaal. Instapmoment afstudeerstage De customer journey is de fundering van elke website maar ontbreekt nog bij Heroes of Print. Op dit moment bestaat de webshop voornamelijk uit dummy content en er is nog niet nagedacht over een bepaalde structuur of layout. Dit is mijn instapmoment en tevens mijn 0-meting. Het ontbreken van een gestructureerde customer journey Heroes of Print een wens om deze zo snel mogelijk neer te zetten.

een

probleem

vanuit

81 81

Opdrachtomschrijving Door het uitvoeren van verschillende UX-onderzoeken moet erachter gekomen worden wat de optimale customer journey is voor de webshop van Heroes of Print.

82 82

De eerste deelopdracht zal bestaan uit het ontwikkelen van de customer journey van de webshop. Dit is de kapstok van de opdracht. Vervolgens worden deze paginaâ&#x20AC;&#x2122;s ingevuld op het gebied van UX, look-and-feel en conversie (zie figuur 1). De onderdelen van mijn onderzoek zijn analyseren & onderzoeken. Visualiseren, implementeren, testen, evalueren en optimaliseren. Doelstelling Heroes of Print wil door middel van UX onderzoek een optimale customer journey definiĂŤren waarmee ze in december 2017 een complete webshop kunnen lanceren. Hoofdvraag Wat is de optimale Customer Journey (vanuit UX) en op welke manieren kan deze worden geimplementeerd in de webshop?

Analyse van de opdracht Deelvragen Welke UX aspecten en features van de webshop, met de focus op de design tool, zijn het belangrijkst en spelen een grote rol bij het ontwerpen van een persoonlijk product? Met welke look-and-feel weet Heroes of Print zich het best te onderscheiden ten opzichte van de concurrent? Welke factoren hebben invloed op het design en bestelproces en hoe dragen deze bij aan een optimale conversie?

Werkzaamheden Om beter inzicht te krijgen in de markt wordt er gestart met een concurrentieanalyse. Hier wordt gekeken wat de sterkte en zwakke eigenschappen zijn en waar er kansen liggen voor Heroes of Print. Verder wordt de doelgroep door middel van doelgroepsegmentatie verdeeld en onderzocht. Met deze inzichten wordt de customer journey verder ingevuld en door middel van de volgende 3 elementen geoptimaliseerd.

Figuur 1: Customer Journey

User experience Om de flow in de webshop te optimaliseren moet er gekeken worden naar de juiste structuur, layout en features. Dit kan worden getoetst door middel van A/B testing en prototyping. Look-and-feel Om te komen tot de juiste Look-and-feel moet er gekeken worden naar het gevoel en emotie wat Heroes of Print over wil brengen naar de consument. Daarnaast wordt er getest met lettertypes, kleuren en fotografie. Conversie Om de belangrijkste paginaâ&#x20AC;&#x2122;s van de webshop te optimaliseren wordt er gekeken naar de uitstapmomenten en de call to actions. Ook dit wordt getoetst door middel van A/B testing. De opdracht wordt uitgevoerd op een agile manier om zo door middel van kleine iteraties sneller resultaten te zien en steeds dichter bij een zo optimaal mogelijke customer journey te komen.

83 83

Oplevering

84 84

User experience Op dit moment bestaat de sitestructuur uit een homepagina, productpagina en themapaginaâ&#x20AC;&#x2122;s. Verder ontbreekt de design-tool en zijn er nog geen verdere features geĂŻnstalleerd. Het onderzoek naar de juiste structuur en layout worden getoetst en vormen mijn tussenproducten. Look-and-feel Het onderzoek naar het gewenste imago van Heroes of Print zal worden vertaald naar een Look-and-feel. Hierbij wordt gekeken naar kleuren, fotografie, tekst en lettertypes. De verschillende designs worden getest en getoetst om zo te komen tot de beste optie. Conversie Op de huidige webshop van Heroes of Print is het nog niet mogelijk om producten af te rekenen. Het is belangrijk dat het bestellen en betalen vloeiend en makkelijk is maar ook dat de huisstijl wordt doorgevoerd in het kassa-systeem. De flow, emotie en gevoel spelen hierin een grote rol. Toetsing Vanwege het ontbreken van een huidige customer journey is het moeilijk om concrete doelstellingen op te stellen. Uit recent onderzoek (Van Kan)1 blijkt dat het gemiddelde bounchepercentage tusssen de 40% en 60% ligt. Dit is per webshop en branche verschillend maar Heroes of Print streeft naar een bouncepercentage dat lager ligt dan 40%. Wanneer we dit bereiken kan er gesproken van het gewenst resultaat van de opdracht.

Analyse van de opdracht De MoSCoW-methode heeft betrekking op de complete webshop.

Must haves De webshop moet compleet zijn met alle producten, prijzen en toebehorende functies zoals: inloggen, bestellen, betalen en verzenden. De webshop moet voorzien zijn van een design tool waarbij de consument makkelijk en overzichtelijk zelf producten kan ontwerpen en bestellen.

Should haves De webshop moet voorzien zijn van een originele look-and-feel zoals originele teksten en pakkende afbeeldingen om de beleving en de emotie zo sterk mogelijk te maken. Er is een logische en duidelijke structuur zodat de de consument makkelijk producten kan vinden, designen en kan bestellen.

Could haves Een social media plan waarbij er gekeken wordt welke kanalen er moeten worden gebruikt en op welke manier deze kunnen worden ingezet.

Wonâ&#x20AC;&#x2122;t haves Een online designer community waarbij eerder gemaakte designs op commissiebasis kunnen worden verkocht.

85 85

3. AANPAK 86 86

Tijdens mijn afstudeerstage worden de onderzoeksstrategieën veld, bieb, showroom, lab en werkplaats gebruikt.

VELD

LAB

Tijdens het veldonderzoek wordt er gekeken wat de wensen en behoeftes zijn van de doelgroep en dit meegenomen kan worden bij het bouwen van de webshop. Dat kan bijvoorbeeld door het houden van enquêtes, het maken van persona’s en het observeren van gedrag.

BIEB

SHOWROOM

WERKPLAATS

Met bieb onderzoek wordt beschikbaar werk onderzocht. Wat kan er al worden gevonden op het gebied van marketing, webdesign en strategie. Deze informatie kan worden gebruikt bij het invullen van de webshop. Denk hierbij aan het kiezen van bepaalde kleuren, het indelen van de webshop of het invullen van de content.

Tijdens de showroom-strategie wordt gekeken hoe de webshop ervoor staat. Straalt de webshop uit wat we willen uitstralen? Is de webshop zo optimaal mogelijk ingedeeld? Hoe kan ik dit nog aanscherpen?

Met de werkplaats-strategie wordt door middel van ontwerpen en prototyping het product steeds meer geoptimaliseerd. De planning is dat de webshop redelijk snel live kan. Vervolgens krijgen we feedback van de gebruikers en kunnen we met deze informatie de webshop steeds beter maken.

Activiteiten Tijdens mijn afstudeerstage komen de volgende onderdelen aan bod: User Experience Layout Structuur UX onderzoek design-tool Look-and-feel Branding Heroes of Print Huisstijl Fotografie Conversie Uitstapmomenten Call to action A/B testing

In het begin zullen mijn werkzaamheden bestaan uit het onderzoeken van de concurrentie en de doelgroep. Ondertussen gaan we hard werken om de webshop live te krijgen door middel van testing. Door het houden van usertests en de website stap voor stap te verbeteren willen we de uitkomsten van het onderzoek direct opnemen in de opzet van de webshop om live kunnen in december 2017. Er zal dagelijks contactmomenten met Robert plaatsvinden over mijn onderzoek en de webshop. We hebben een zeer flexibele werkplek wat ervoor zorgt de communicatielijnen erg kort zijn.

87 87

88 88

BIJLAGE I - CONCURRENTIEANALYSE Om te bepalen op welke manier Heroes of Print zich het beste kan onderscheiden zijn eerst een aantal vergelijkbare webshops onderzocht (zie bijlage X). Dit zijn CustomInk, Spreadshirt, YourSurprise en Shirtinator. Hierbij is gekeken naar pagina pagina’s, de flow, het design en de merkbeleving. Conclusie Homepagina De meeste homepagina’s zijn redelijk goed verzorgd. Vooral de 1e indrukken zijn sterk maar wanneer de pagina’s worden bekeken is er nog veel ruimte voor verbetering. De banners zijn van goede kwaliteit en worden regelmatig veranderd. Wat opvalt is dat veel webshops geen algemene informatie op de homepagina’s zetten. Navigatie Wat opvalt is dat de structuur van de concurrenten veel op elkaar lijken. De shops gebruiken verschillende termen zoals momenten, merken, templates etc. voor dezelfde functies. De homepagina’s worden onderverdeeld in categorieen themapagina’s die vervolgens door worden doorverwezen naar sub-categorieën en/of producten. Vanaf de producten kan de bezoeker de producten personaliseren in een design-omgeving. Design Het design op de meeste webshops is netjes en verzorgd. Er is goed nagedacht over kleuren, lettertypes en afbeeldingen. Wat opvalt is dat niet alle webshops even consistent zijn in het doorvoeren van het design. De eerste indruk is goed maar ze verzaken om dit door te voeren naar alle elementen. Merkbeleving Bij de concurrenten wordt er weinig tot geen emotie of gevoel gevangen in de pagina’s. Bij de pagina’s staan de producten voorop en deze worden zonder enige beliving getoond. Totale indruk De totale indruk van de concurrenten is redelijk goed. Het zijn verzorgde webshops die veel aangdacht besteden aan look-and-feel. Echter wanneer de pagina’s beter worden bekeken komen er steeds meer schoonheidsfouten tevoorschijn. De navigaties van de concurrenten zijn nagenoeg gelijk. De kleine verschillen hierin zitten in de termen die worden gebruikt. Verder gebruiken de concurrenten weinig tot geen merkbeleving. Dit is een grote kans voor Heroes of Print.

89 89

90 90

SPREADSHIRT

Bij spreadshirts kun je producten kopen die gemaakt zijn door andere designers of zelf een product ontwerpen. Spreadshirt richt zich vooral op designs/afbeeldingen die gemaakt zijn door andere designers.

91 91

Homepagina ****

De homepagina van spreadshirts bevat veel kleuren en is redelijk druk. De homepagina staat vol met afbeeldingen die gesorteerd zijn in verschillende categorieën. Verder kun je op de homepagina aanbiedingen en kortingen vinden en geven ze algemene informatie over spreadshirt. De footer bevat alle nuttige informatie zoals: klantbeoordelingen, service, over ons en social media.

Navigatie *****

De navigatie van spreadshirts is duidelijk en makkelijk. Je kunt kiezen uit “winkelen, ontwerpen en verkopen”. Elke pagina is duidelijk ingedeeld in categorieën en sub-categorieën. Je kunt makkelijk producten vinden, kopen en ontwerpen.

Design ****

Het design is redelijk strak en clean. Het is jammer dat de homepagina wat druk oogt maar de rest van de pagina’s zijn netjes ingedeeld en zien er verzorgt uit. De pagina’s zijn over het algemeen zwart/wit maar door enkele groene accenten is het een mooi geheel. Het lettertype is goed te lezen en ook de marges zijn netjes op elkaar afgestemd.

Inhoud ****

Het aanbod van Spreadshirt is zeer uitgebreid en compleet. Spreadshirt heeft veel producten en wil deze allemaal onder de aandacht brengen. Helaas gaat dit soms ten kosten van het overzicht.

Gevoel / emotie *

Spreadshirt richt zich volledig op het design van de producten. Deze staan echt centraal en komen op elke pagina terug. De afbeeldingen bevatten bijna alleen maar producten wat zorgt voor weinig tot geen gevoel en emotie.

Totale indruk

De webshop van Spreadshirt is zeer netjes en compleet. Er is goed nagedacht over de look-and-feel van de webshop en de navigatie. Minpunten van de site zijn dat het soms wat rommelig oogt en er geen tot weinig gebruik wordt gemaakt van gevoel en emotie.

92 92

STRUCTUUR SPREADSHIRT

PDP SPREADSHIRT

93 93

94 94

YOURSURPRISE

YourSurprise wordt gezien als een van de grootste concurrenten van Heroes of Print. Your Surprise richt zich vooral op gepersonaliseerd cadeaus. Met een assortiment van meer dan 1500 cadeaus is YourSurprise uitgegroeid tot de grootste online cadeaushop voor gepersonaliseerde cadeaus. Het assortiment bestaat uit glazen, pennen, kinderboeken, bonbons, textiel, telefoonhoesjes, broodtrommels, tegels, kussend etc.

Homepagina *****

De homepagina van YourSurprise is erg overzichtelijk en compleet. De banner is duidelijk en wordt regelmatig aangepast naar verschillende thema’s zoals bijv. vaderdag of kinderboekenweek. Onderaan de pagina banadrukken ze dat de producten met liefde worden bedrukt en laten ze verschillende klantenbeoordelingen zien. Dit komt zeer betrouwbaar over.

Navigatie *****

De homepagina van Your Surprise is ingedeeld in Cadeaus, momenten en Merken waarbij cadeaus standaard is opengeklapt. De homepagina en de cadeaus-pagina zijn dus precies dezelfde pagina’s. Op de homepagina staan verder een aantal categorieën met producten. Via deze producten kan de design-tool worden bereikt. De momenten-pagina bevat allemaal thema’s zoals : “Liefdescadeaus, cadeau voor haar, cadeau voor hem, kindercadeaus”. Deze pagina wordt weer onderverdeeld in productcategorieën met daaronder weer een nieuwe pagina met de producten. De Merken-pagina heeft hetzelfde principe maar dan zonder de sub-categorieën.

Design *****

Het design van Your Surprise is erg netjes en verzorgd. Er is gekozen voor een speels lettertype dat goed past bij de kinderlijke uistraling van het bedrijf. Ook de kleurcombinatie is speels en past goed bij de afbeeldingen. De categorieën en producten zijn weergegeven in vierkante blokken met dezelfde kleur achtergrond. Het gebruik van banners die de complete breedte van de pagina gebruiken zijn verzorgd en thematisch.

Gevoel / emotie **

Op de pagina’s van YourSurprise wordt weinig gewerkt met gevoel en emotie. Net als bij de rest van de concurrenten draait alles om de producten. Op de productpagina’s proberen ze een klein beetje emotie te pakken door voorbeelden te laten zien van gepersonaliseerde producten maar ook hier staan de producten weer centraal.

Totale indruk

De totale indruk van Your Surprise is erg goed. Het is een zeer professionele webshop en dat is op elk vlak terug te zien. Het design is goed, de pagina’s zijn logisch indegeeld en ze webshop is zeer compleet. Een gemiste kans is net zoals bij de rest van de concurrenten dat er weinig tot geen gevoel terugkomt in de pagina’s.

96 96

STRUCTUUR YOURSURPRISE

PDP YOURSURPRISE

97 97

98 98

CUSTOM INK

Custom Ink is een amerikaans bedrijf dat is gespecialiseerd in het bedrukken van gepersonaliseerde T-shirts. Custom Ink richt zich net als Heroes of Print op groepen. Naast een desgin-tool om zelf t-shirts te ontwerpen beschikt de webshop ook over een heleboel templates die kunnen worden gekozen.

99 99

Homepagina ***

CustomInk maakt gebruik van een enorme banner waarbij telkens verschillende afbeeldingen te zien zijn. Naast de banner is de rest van de pagina redelijk slordig. De afbeeldingen zijn van slechte kwaliteit en ook de opmaak kan wat aandacht gebruiken. De pluspunten van CustomInk staan duidelijk en groot op de homepagina maar een uitgebreide omschrijving ontbreeekt.

Navigatie *****

De navigatie van CustomInk is hetzelfde als dat van Your Surprise alleen is het niet mogelijk om rechtstreeks van de homepagina naar de design-tool te navigeren. Dit is logisch omdat CustomInk alleen textiel verkoopt en het dus niet nodig is om eerst een product te selecteren. CustomInk maakt gebruik van sub-categorieën maar dit voelt niet omslachtig.

Design ****

De eerste indruk van het design is erg goed. De banner bevat professionele afbeeldingen en de combinatie van de kleuren oranje en rood maken het een mooi geheel. Ze verkopen veel producten en deze worden Helaas wordt dit design niet op alle vlakken even goed doorgevoerd. Op de homepagina zijn de afbeeldingen van slechte kwaliteit en ook de footer oogt rommelig.

Gevoel / emotie ***

De afbeeldingen in de banner bestaan uit sporters met een gepersonaliseerd shirt. Deze bevatten veel gevoel en emotie. Helaas wordt dit niet doorgevoerd in de rest van de pagina’s. Ook hier weer ligt de focus op het product en op het design.

Totale indruk

De totale indruk is van de webshop is redelijk goed. De producten zijn snel te vinden, het design is op veel punten netjes en ook de banner scoort veel punten. Helaas zijn niet alle design elementen doorgevoerd in alle pagina’s en wordt er weinig tot geen emotie gecreeërd.

100 100

STRUCTUUR CUSTOM INK

PDP CUSTOM INK

101 101

102 102

SHIRTINATOR

Shirtinator is een grote partij uit Duitsland dat gespecialiseerd is in het bedrukken van gepersonaliseerde puzzels, mokken, textiel en nog veel meer. Op de webshop is het mogelijk om een eigen ontwerp te maken of om te kiezen uit standaard designs.

103 103

Homepagina ****

Het eerste wat opvalt op de homepagina is de enorme banner. Deze banner is duidelijk en van uitstekende kwaliteit. Daaronder staan 3 kleinere banners met dezelfde goede kwaliteit. Vervolgens wordt de pagina steeds minder van kwaliteit. De producten die worden getoond staan verzameld in een kleine ruimte met weinig tussenruimte en er is geen algemene informatie te vinden.

Navigatie ****

Shirtinator kiest ervoor om de consument heel snel naar de design-tool te leiden. Op de homepagina staan designs en producten die meteen doorlinken naar de design-tool. Het is ook mogelijk om via de homepagina naar categorieën en standaard designs te navigeren.

Design ****

Het design van Shirtinator is erg goed. De blauwe accenten komen duidelijk naar voren, de afbeeldingen zijn goed en ook het lettertype is duidelijk en strak. Helaas zijn er bepaalde elementen die niet meegenomen worden in het design zoals “payment mothods” en “social media”.

Gevoel / emotie **

Ook Shirtinator vangt weinig tot geen gevoel en emotie in de pagina’s. In sommmige banners proberen ze het wel door middel van gepersonaliseerde producten maar ook hier zit nog veel ruimte voor verbetering.

Totale indruk

De totale indruk van Shirtinator is redelijk tot goed. Het design is netjes en de banners zijn van goede kwaliteit. Op een paar schoonheidsfoutjes na is het een mooie en complete webshop.

104 104

STRUCTUUR SHIRTINATOR

PDP SHIRTINATOR

105 105

106 106

BIJLAGE III - ONDERZOEK THEMAPAGINA’S LITERATUUR Voordat er begonnen kan worden met het ontwerpen van prototypes wordt eerst gekeken naar bestaande informatie en onderzoeken. Uit een overvloed van informatie is de volgende relevante informatie gefilterd. Waardevol en relevantie Wanneer een bezoeker rechtstreeks via een zoekmachine op de pagina terecht komt heeft hij of zij bijna altijd een probleem. Het is de kunst om zo snel mogelijk het probleem te identificeren en een oplossing te bieden. Zorg daarom voor waardevolle content dat speciaal past bij de desbetreffende landingspaigina. Ben relevant (Damveld, 2014). Vertrouwen Bij een nieuwe bezoeker is de kans groot dat hij of zij nog geen voorkennis heeft van het bedrijf. Belangrijk is om uitleg te geven over de voordelen en Unique Selling Points (USP’s) van de webshop. Visualiseer daarom altijd de USP’s op de landingspagina’s. Dit wekt vertrouwen op en hiermee wordt de bezoeker eerder overtuigd om het product aan te schaffen (Jongejan, 2011). Banner De banner is het eerst dat de bezoeker ziet van de pagina. Zorg ervoor dat deze direct duidelijk maakt wat het aanbod is voor de bezoeker door middel van interessante en relevante afbeeldingen. Maak daarnaast gebruik van activerende teksten om dit gevoel te versterken zoals ‘download nu’, ‘vraag sample aan’ etc. (Damveld, 2014). Afbeeldingen van mensen als achtergrond werken het beste. Uit recent onderzoek (Bearends, 2015) is gebleken dat banners met afbeeldingen van mensen een 12% hogere klikfrequentie hebben. Keuzemogelijkheden Een keuzemogelijkheid is voor veel bezoekers een grote drempel en zal zorgen voor een lagere conversie. Zorg dat er altijd een optie duidelijk de voorkeur krijgt zoals “meest gekozen” of “beste deal” (De Kruijf, z.j.). Benoem voordelen Realiseer dat de websitebezoeker op zoek is naar voordelen, geen eigenschappen (Jongejan, 2011). Met de producten van Heroes of Print worden speciale momenten Hero momenten. Die toegevoegde waarde is voor de bezoeker veel belangrijker dan de producteigenschappen.

call-to-action button Voeg een call-to-action button toe aan de landingspagina die direct de aandacht trekt. Zorg voor een afwijkende kleur zodat meteen duidelijk is waar de focus moet liggen van de bezoeker (Damveld, 2014). Concreet Voorkom zoveel mogelijk afleidende informatie op de landingspagina zoals hyperlinks en informatie die niks te maken heeft met het onderwerp. Een klant komt met een bepaalde verwachting. Hoe meer afleiding hoe groter de kans dat de bezoeker anders handeld dan wordt verwacht (Damveld, 2014).

GROTE WEBSHOPS Vergelijking webshops Om de elementen van de themapagina’s verder te bepalen zijn er ook een aantal grote webshops onderzocht. Hier is speciaal gekozen voor grote bekende webshops omdat Zalando (https://www.zalando.nl/kinderen-home/) Zalando begint de landinsgapagina’s met een grote banner. De banners bevatten simpele afbeeldingen met overheen grote en opvallende teksten. Verder staan er veel producten op de pagina’s met daarbij een call-to-action button om alle producten te kunnen zien. Onderaan de pagina’s staan nog extra themapagina’s die relevant zijn voor de producten. Ikea (http://www.ikea.com/nl/nl/catalog/categories/departments/lighting/) Ikea gebruikt grote kopteksten en grote call-to-action buttons in de landinspagina’s. Daarnaast maken ze gebruik van grote bijpassende afbeeldingen van de producten. Hierdoor is in een oogopslag duidelijk waar de pagina over gaat. De pagina’s staan verder vol met producten gecategoriseerd in verschillende thema’s. Tekst en sfeerafbeeldingen wisselen elkaar af wat zorgt voor overzicht en rust. Hema (https://www.hema.nl/winkel/heren) Ook Hema gebruikt een grote banner met productafbeeldingen, grote teksten en een call-to-action button. De banner is 80% breed en daarnaast staan een aantal sub-categorieën. Verder staan de pagina’s vol met producten. Onderaan de pagina’s staan contactgegevens links naar de klantenpas of de folder.

107 107

BIJLAGE IV - VIJF SECONDEN TEST TEST 1 - STRUCTUUR

108 108

Uitslag test 1A

Antwoorden onderzoek Waar gaat de pagina over

Welke producten kun je er kopen?

Wat valt het meest op?

Hoe ziet het stappenplan eruit?

1. 2. 3. 4. 5. 6. 7. 8. 9. 10.

1. T-shirts, mokken 2. Tshirt, mok 3. Petten, mokken, zonnebrillen 4. Petten en mokken 5. Mokken, T-shirts,... 6. Shirts 7. Shirt, pet 8. Mokken 9. Vaderdagcadeaus 10. Shirts

1. Heroes of print 2. 3. Iets met ‘vaderdag’ en de 4 subcatogorieen 4. Dad 5. Grote foto van vader met kind 6. Header foto 7. Foto’s mannen met kinderen 8. Dat vaders als heroes beschreven worden 9. Plaatjes in het midden 10. Afbeelding vader en kind

1. 2. 3. 4. 5. 6.

Vaderdag Vaderdagcadeaus Unieke producten Vaders Vaderdagproducten Drukwerk Vaderdag Vaders Vaderdag Vaderdag cadeau’s

7. 8. 9. 10.

? Niet gezien Geen idee 3 stappen Stappenplan? Opbouw menu --> Slider --> Producten --> Stappenplan Kies een shirt, bedrukking en versturen Geen idee Geen stappenplan gezien, dus geen idee Geen idee

109 109

Uitslag test 1B

Antwoorden onderzoek Hoe ziet het stappenplan eruit?

Waar gaat de pagina over

Welke producten kun je er kopen?

Wat valt het meest op?

1. Vaderdag cadeau 2. Kleding 3. T shirts die je kunt customizen en/of zelf kunt ontwerpen 4. Webshop voor T-shirts 5. Vaderdag 6. Cadeaus voor vaderdag 7. kleding 8. Over design 9. kleding voor mannen 10. Vaderdagproduct

1. 2. 3. 4. 5. 6. 7. 8. 9.

1. Dat je kleren kunt kopen 1. 2. 2. Vaderdag 3. 3. linksboven het zwarte t-shirt. 4. 4. Het zwarte T-shirt links5. bovenin, vervolgens de informatie rechts ervan. 6. 5. banner bovenaan 7. 6. Het logo (Heroes) en de 8. afbeelding (vader met zoon9. in zijn nek) 10. 7. het t-shirt aan het begin 8. Foto met mannen 9. Heroes 10. De jongen in de nek

petten en shirts Kleding t-shirt T-shirts cadeaus Babyspullen? kleding Desing print kleren t-shirts, mokken, pompers, vaderdagcadeaus 10. Hero producten

Weet ik niet Geen idee Niet in 5 seconden kunnen zien Welk stappenplan? Passed Geen idee Passed Passed Passed Teveel gefocust op de tekst niet gezien

110 110

Uitslag test 1C

Antwoorden onderzoek Waar gaat de pagina over

Welke producten kun je er kopen?

Wat valt het meest op?

Hoe ziet het stappenplan eruit?

1. 2. 3. 4. 5. 6. 7.

1. Shirt 2. vader met kind op schouder 3. vader met kind 4. Papaâ&#x20AC;&#x2122;s en kind 5. Vader met kind 6. vader en kind 7. De vader met het kind op zâ&#x20AC;&#x2122;n rug 8. de header 9. afbeelding bovenin 10. banner van vader met kind

1. 2. 3. 4. 5.

Ne internet pagina Vaderdag Vaderdag producten Petten Kleding (petten, shirts) kleding Kleding voor vader en zoon 8. Vaderdagcadeau 9. Vaderdag en cadeaus 10. Vaderdag t-shirt design

N shirt t shirts, petten petten Petten petten, shirts petten en t-shirts Shirts, petten en ik verwacht overige kleding 8. shirts, petten 9. t-shirt 10. t-shirt

6. 7. 8. 9. 10.

Best mooi geen idee ? Welke? informatie geven en categorie kiezen Product kiezen, je eigen design maken, bestellen Niet gezien geen idee gestructureerd 1. kies je product 2. maak je eigen design 3. bestellen

TEST 2 - PRODUCTAFBEELDINGEN

111 111

Uitslag test 2A

Antwoorden onderzoek Wat zie je?

Wat is de boodschap van de pagina?

1. Petten, helmen, fietsen, mountainbike, bergen, zand, stuur, witte helm, blauw shirt 2. Thermobekers, t-shirts 3. Een website 4. 4 mensen op fiets met helm 5. Thermobeker, koffie mokken, petten, vrouwen 6. webshop 7. Vier mannen op een fiets met een helm op 8. Een website 9. Producten die je kan kiezen en het zelf ontwerpen hiervan 10. 4 gasten op een BMX

1. 2. 3. 4. 5. 6. 7. 8. 9. 10.

Sport Iets over mountainbiken? Producten verkopen Vriendschap Om dingen te verkopen? Onderwerpen en themas voor iedereen Of je en ﬁets wil kopen? verkopen Product kiezen en zelf ontwerpen wat erop Aanbieden van merchandise

Welke producten kun je er kopen? 1. Fietsen? 2. T-shirts, thermobekers.. fietsen? 3. Mollen, thermobeker, petten en shirts? 4. Thermobekers petten en mokken 5. Petten, koffie mokken, thermoskan 6. Tshirts, mokken, teksten 7. Fietsen, fietstoebehoren 8. Shirts 9. Mokken, petten, shirts? 10. Petten, mokken, thirts

112 112

Uitslag test 2B

Antwoorden onderzoek Wat zie je?

Wat is de boodschap van de pagina?

1. Bedrukte zwarte petten, bedrukte bekers, 4 jongens op een ďŹ ets 2. website met producten petten mokken t shirt 3. webshop 4. Een webwinkel 5. Heroes website met mokken petten en andere producten 6. Sport kleren en spullen 7. een website die spullen verkoopt 8. Een site om producten te bestellen 9. Heroes of print. Freeride. Fietsers. 10. Website die producten verkoopt

1. Plezier 2. promoten van mokken petten kleding? 3. Om kleding te kopen 4. Producten aanbieden/verkopen 5. Online webshop? 6. Passed 7. Spullen verkopen 8. Bestellen van producten 9. 10. Verkoop

Welke producten kun je er kopen? 1. Bedrukte; petten, bekers, t-shirts 2. Pet, mok, t shirt 3. Kleding 4. Petten, t-shirts, mokken 5. Mokken, petten, helmen 6. Kleren 7. kleding 8. Mokken, petten, thermosďŹ&#x201A;essen/mokken 9. Shirts 10. Petten mokken t-shirts

113 113

Uitslag test 2C

Antwoorden onderzoek Wat zie je?

Wat is de boodschap van de pagina?

Welke producten kun je er kopen?

1. Mokken, Shirtjes, Bedrukte artikelen, vrienden op vriendentrip 2. 4 gasten met kleurige shirts en dezelfde opdruk. 3. Site van HOP 4. Crossﬁets shop 5. Kado’s voor vrienden 6. petten mokken thermobekers mannen op sportﬁetsen 7. afbeeldingen van producten waar je zelf een design kunt maken. 8. Petten 9. Thermomokken, t-shirts, petten 10. Webshop voor mountainbikers met toebehoren?

1. Het laten bedrukken voor artikelen voor leuke dingen zoals vriendenweekend 2. Samen mooie momenten delen. 3. Deel je hero momenten 4. Crossﬁets artikelen 5. Dat je spullen voor je vrienden kan kopen 6. Passed 7. ontwerp je eigen design op je product 8. Passed 9. Samen zijn 10. Verkoop

1. Alles wat je kan laten bedrukken 2. Shirts met opdruk. 3. Promotionele artikelen, voor particulier gebruik 4. Helmen, shirts, mokken, bekkers 5. Mokken, petten, t-shirts 6. Passed 7. mokken, petten, shirts 8. Kleding 9. petten, mokken, t-shirts, thermomokken 10. T-shirts, mokken

114 114

BIJLAGE V - INTERVIEWS NAAM

Thomas Beniers

LEEFTIJD

23 jaar

OPLEIDING

HBO, bestuurskunde & overheidsmanagement

WOONPLAATS

Tilburg

HOBBY’S

Voetbal, ﬁtness, stappen

Het interview gaat over gepersonaliseerde producten.

Stel je gaat een gepersonaliseerd artikel kopen.

Wat versta je hieronder? Ik denk hierbij aan persoonsgebonden producten met foto’s of een naam erop.

Hoe ga je te werk? Ik ga naar dezelfde winkel. Dat is mij goed bevallen. Vragen wat de mogelijkheden zijn en daar mijn bestelling plaatsen.

Heb je weleens een gepersonaliseerd artikel gekocht of besteld? Ik heb twee keer gepersonaliseerde producten besteld. Een keer voor het sportteam toen we kampioen werden en een keer polo’s voor de vriendengroep. Hoe ging je te werk? Ik wist dat er in de buurt een drukkerij zat. Ik ben op internet gaan kijken naar het aanbod en toen heb ik de drukkerij bezocht en heb hier een offerte aangevraagd. Bij goedkeur van de vriendengroep heb ik de bestelling geplaatst en een week later waren de T-shirts klaar.

Stel je gaat online zoeken? Hoe ga je te werk? Ik ga online zoeken naar “Drukkerij tshirt Tilburg”. Ik vind het fijn als het bedrijf bij mij in de buurt zit zodat ik zelf langs kan gaan. Waar let je op? Ik beslis vaak in een paar seconden of ik een webshop betrouwbaar vind. Dat vind ik het belangrijkste. Hij moet er verzorgt uitzien, overzichtelijk zijn en ik moet producten makkelijk kunnen vinden. Ik vind het fijn als een webshop met goede afbeeldingen werkt. Een onverzorgde website met weinig afbeeldingen klik ik heel snel weg.

Wat vind je belangrijk? Ik vind de prijs/kwaliteit verhouding erg belangrijk en een goede zoekfunctie is cruciaal.

Stel je bent op een site en je gaat een artikel personaliseren.

Wat verwacht je? 115 Ik verwacht dat je heel makkelijk en simpel een product 115 aan kunt passen. De tool moet realistisch zijn, zodat het product dat ik op mijn scherm zie gelijk is aan het product dat ik krijg.

Stel je hebt een vriendenweekend voor de boeg. Je gaat een gepersonaliseerd artikel bestellen. Hoe ga je te werk? Ik ga eerst naar de bekende winkel. Mocht ik de producten niet mooi vinden of te duur ga ik via het internet een alternatief zoeken.

Wat wil je kunnen? Ik wil een kleur van het product aan kunnen passen en dit ook terugzien in het ontwerp. Verder wil ik tekst en afbeeldingen toe kunnen voegen en deze kunnen slepen in het ontwerp.

Waar let je op? Wanneer je iets besteld voor een groep moet je altijd kijken naar budget. Dit is een belangrijk aspect. Verder hetzelfde als wanneer ik voor mezelf iets koop.

Hoe maak je een ontwerp? Ik wil heel gemakkelijk teksten en afbeeldingen op het product kunnen slepen. Een logo mogen ze voor mij ook achter de schermen uploaden maar mijn voorkeur gaat uit naar een tool waarbij ik dit zelf kan doen.

Wat vind je belangrijk? Ik vind het belangrijk dat een webshop er betrouwbaar uitziet. Hoog in Google vind ik belangrijk en een verzorgde uitstraling.

Uit het interview zijn de volgende elementen genoemd 1. Locatie 2. Zoekfuntie

3. Hoog in Google 4. Navigatie

5. Inspiratie 6. Prijs

7. Productafbeeldingen

Op welke paginaâ&#x20AC;&#x2122;s zie je deze elementen graag terug in de website?

HOME

THEMA

PRODUCT

ONTWERP

KASSA

2-4-5-6-7

6-7

116 116

NAAM

Bjorn Brouwers

LEEFTIJD

21 jaar

OPLEIDING

HBO, Commerciële economie

WOONPLAATS

Helmond

HOBBY’S

Tennis, reizen, ﬁlms kijken

Het interview gaat over gepersonaliseerde producten.

Stel je gaat een gepersonaliseerd artikel kopen.

Wat versta je hieronder? Naar jouw smaak gemaakte producten. Qua producten denk ik aan T-shirts, petten en mokken.

Hoe ga je te werk? Ik ga oriënteren via Google. Hier maak ik mijn keuze.

Heb je weleens een gepersonaliseerd artikel gekocht of besteld? Ik heb zelf nog nooit producten gepersonaliseerd. Wel heb ik ooit gepersonaliseerde producten gedragen tijdens een voetbaltoernooi. Ik weet helaas niet waar dit is gemaakt.

Waar let je op? Ik let hierbij op welke site het product het goedkoopst is en waar het product het snelst wordt geleverd. Wat vind je belangrijk? Daarnaast let ik op service, reviews en ik zou het fijn vinden om dat ik inspiratiebeelden te zien zodat ik weet wat ik met het product kan doen.

Stel je hebt een vriendenweekend voor de boeg. Je gaat een gepersonaliseerd artikel bestellen.

Stel je bent op een site en je gaat een artikel personaliseren.

Hoe ga je te werk? Ik ga hier hetzelfde te werk als bij een persoonlijk gepersonaliseerd product.

Wat verwacht je? Ik verwacht dat ik in een omgeving kom waar ik zo creatief mogelijk kan zijn.

Waar let je op? Ik let op de kwaliteit van de producten en vind het belangrijk dat een website hoog in Google staat.

Wat wil je kunnen? Ik wil afbeeldingen kunnen uploaden, afmetingen aanpassen en kunnen spiegelen. Teksten kunnen toevoegen met verschillende lettertypes en de kleuren van de tekst aanpassen.

Wat vind je belangrijk? Als extra toevoeging vind ik een chat-functie altijd fijn. Snel schakelen met het bedrijf vind ik belangrijk. Kijk je nu anders? Ik kijk hierbij hetzelfde als bij een individueel product.

Hoe maak je een ontwerp? Een handige toevoeging hierin lijkt me een chat-functie om eventuele ontwerp tips te geven.

Uit het interview zijn de volgende elementen genoemd 1. Levertijd 2. Prijs

3. Service 4. Reviews

5. Inspiratie 6. Chat-functie

7. Ontwerp tips

Op welke paginaâ&#x20AC;&#x2122;s zie je deze elementen graag terug in de website?

HOME

THEMA

PRODUCT

ONTWERP

KASSA

1-4-6

2-5-6

3-6-7

6-7

117 117

118 118

NAAM

Erwin van Dijk

LEEFTIJD

25 jaar

OPLEIDING

HBO, Werktuigbouwkunde

WOONPLAATS

Helmond

HOBBY’S

Voetbal, uiteten, reizen

Het interview gaat over gepersonaliseerde producten.

Stel je gaat een gepersonaliseerd artikel kopen.

Wat versta je hieronder? Kleren en attributen die je naar eigen smaak kunt ontwerpen of aanpassen.

Hoe ga je te werk? Ik ken zelf nog geen bedrijf dat daarin is gespecialiseerd dus mijn zoektocht begint via Google. Ik ga zoeken naar “gepersonaliseerde producten” en ik ga verschillende websites vergelijken.

Heb je weleens een gepersonaliseerd artikel gekocht of besteld? Een jaar geleden heb ik mijn eigen Nike schoenen ontworpen. Hoe ging je te werk? Ik was op zoek naar nieuwe schoenen en het aanbod viel me tegen. Toen zag ik de mogelijkheid om mijn eigen schoenen te ontwerpen. Dit vond ik gaaf. Via een speciale website kon ik het product naar eigen smaak ontwerpen.

Waar let je op? Wat ik erg belangrijk vind is dat ze webshop een verzorgde look-and-feel heeft. De webshop moet overzichtelijk zijn. Je moet makkelijk kunnen navigeren en het moet snel duidelijk snel welke producten ze verkopen. Wat vind je belangrijk? Daarnaast lijkt het me fijn om voorbeelden te zien van verschillende ontwerpen. Wat is mogelijk en wat kan ik allemaal aanpassen?

Stel je hebt een vriendenweekend voor de boeg. Je gaat een gepersonaliseerd artikel bestellen.

Stel je bent op een site en je gaat een artikel personaliseren.

Hoe ga je te werk? Eerlijk gezegd zou ik hier hetzelfde te werk gaan als bij een persoonlijk product.

Wat verwacht je? Ik verwacht een online tool waar ik live aan mijn product kan werken. Ik wil de maten, pasvorm, kleuren kiezen. Een maattabel is ook altijd fijn.

Waar let je op? Ik zou misschien extra letten op het aanbod. Je hebt met meer mensen te maken en de keuze moet je hierdoor afstellen. Wat vind je belangrijk? Ik vind de kwaliteit belangrijker dan de prijs. Je wilt een persoonlijk product, dit mag iets kosten. Reviews vind ik hierin ook wel belangrijk. Deze lees ik altijd voor ik een product aanschaf.

Wat wil je kunnen? Ik wil teksten kunnen toevoegen. Lettertypes, kleuren en grootte bepalen. Verder lijkt het me gaaf om emblemen, logoâ&#x20AC;&#x2122;s of afbeeldingen toe te voegen en om deze te bewerken. Hoe maak je een ontwerp? Ik wil een product zien en daarin live mijn ontwerp aanpassen.

Uit het interview zijn de volgende elementen genoemd 1. Aanbod 2. Inspiratie

3. Verzorgde look-and-feel 4. Navigatie

5. Reviews 6. Prijs

Op welke paginaâ&#x20AC;&#x2122;s zie je deze elementen graag terug in de website?

HOME

THEMA

PRODUCT

ONTWERP

KASSA

1-3-4-6

2-5-6

2-6

3-6

119 119

120 120

NAAM

Iris van de Mortel

LEEFTIJD

20 jaar

OPLEIDING

Universiteit, Rechten

WOONPLAATS

Bakel

HOBBYâ&#x20AC;&#x2122;S

Tennis, winkelen

Het interview gaat over gepersonaliseerde producten.

Stel je gaat een gepersonaliseerd artikel kopen.

Wat versta je hieronder? Ik denk hierbij aan producten die je naar eigen smaak en wens kunt aanpassen.

Hoe ga je te werk? Ik zou beginnen met zoeken via Google. Daarna zou ik kijken naar het aanbod en de betrouwbaarheid van een webshop.

Heb je weleens een gepersonaliseerd artikel gekocht of besteld? Ik heb ooit voor mijn oma een puzzel besteld met een foto van alle kleinkinderen erop. Hoe ging je te werk? In de groepsapp met alle kleinkinderen stuurde een neef een advertentie door over deze gepersonaliseerde puzzels. Dit leek ons een leuk cadeau en via de link ben ik naar de site toe gegaan. Ik weet niet meer welke site het was maar je kon een foto uploaden en tekst toevoegen.

Waar let je op? Ik vind het belangrijk dat een webshop er betrouwbaar uitziet. De hele site moet er verzorgd uitzien, afbeeldingen en het moet makkelijk zijn om te navigeren. Wat vind je belangrijk? Naast een verzorgde site is het belangrijk dat ze leuke en verschillende producten verkopen.

Stel je hebt een vriendenweekend voor de boeg. Je gaat een gepersonaliseerd artikel bestellen.

Stel je bent op een site en je gaat een artikel personaliseren.

Hoe ga je te werk? Ik zou eerst in de groep vragen of iemand nog een goed bedrijf weet. Als dit niet het geval is zou ik dezelfde stappen ondernemen als bij een gepersonaliseerd product voor mezelf.

Wat verwacht je? Ik verwacht dat je groot het product ziet en d.m.v. icoontjes kun je het product aanpassen.

Waar let je op? Voor een groep is prijs vaak belangrijker. Er is meestal een budget waar je aan moet houden. Wat vind je belangrijk? Bijna altijd lees ik eerst een aantal reviews voor ik een product aanschaf.

Wat wil je kunnen? Ik verwacht dat ik afbeeldingen en tekst toe kan voegen. Lettertypes kan kiezen en het product kan veranderen van kleur. Hoe maak je een ontwerp? Je voegt afbeelden en tekst toe en d.m.v. sleepwerk kun je deze aanpassen.

Uit het interview zijn de volgende elementen genoemd 1. Aanbod 2. Verzorgde look-and-feel

3. Inspiratie 4. Navigatie

5. Prijs 6. Reviews

Op welke paginaâ&#x20AC;&#x2122;s zie je deze elementen graag terug in de website?

HOME

THEMA

PRODUCT

ONTWERP

KASSA

1- 2 - 3 - 4 - 5

2-5-6

2-5

121 121

122 122

NAAM

Jan van der Schoot

LEEFTIJD

26 jaar

OPLEIDING

HBO, Commerciële economie

WOONPLAATS

Beek en Donk

HOBBY’S

Voetbal, wielrennen

Het interview gaat over gepersonaliseerde producten.

Stel je gaat een gepersonaliseerd artikel kopen.

Wat versta je hieronder? Ik denk hierbij aan producten met een eigen naam. Gegrafeerde pennen of T-shirt met je eigen naam erop.

Hoe ga je te werk? Ik ga onderzoek doen via Google. Ik vind het belangrijk dat een webshop in de top 5 staat in Google. Anders maakt hij al geen kans. Ik zou zoeken naar “gepersonaliseerde Tshirts”.

Heb je weleens een gepersonaliseerd artikel gekocht of besteld? Ikzelf heb nog nooit een product gepersonaliseerd. Wel een gepersonaliseerd voetbal shirt gekregen met mijn initialen erop. Hoe ging je te werk? Dit was een actie van onze voetbalvereniging. Wanneer je daar een voetbalshirt kocht werden daar gratis je initialen opgezet.

Waar let je op? Ik vind de prijs echt belangrijk. Ik open 5 schermen met verschillende webshops en de prijs is vaak doorslaggevend. Verder moet de site betrouwbaar overkomen. Een verzorgde site komt meteen betrouwbaar over. Verder wil ik snel kunnen zoeken en makkelijk kunnen navigeren. Wat vind je belangrijk? Ik kijk altijd naar reviews. Dit vind ik een belangrijk onderdeel om de betrouwbaarheid te toetsen.

Stel je hebt een vriendenweekend voor de boeg. Je gaat een gepersonaliseerd artikel bestellen.

Stel je bent op een site en je gaat een artikel personaliseren.

Hoe ga je te werk? Ik zou hier hetzelfde doen als bij een enkel artikel. Mijn zoektocht begint weer bij Google. Ik zou zoeken op “Gepersonaliseerde vriendengroep shirts”.

Wat verwacht je? Ik verwacht een soort paint 2.0. Ik zie het product in het midden en door middel van makkelijke tools kan ik alles doen met het product wat ik maar wil.

Waar let je op? Het lijkt me fijn om te zien wat ik met de producten kan doen. Kan ik alleen een naam toevoegen of het complete product aanpassen?

Wat wil je kunnen? Ik wil afbeeldingen toevoegen in alle soorten formaten (jpg, png, eps etc.) Ik wil emoticons toe kunnen voegen, teksten plaatsen en deze aanpassen.

Wat vind je belangrijk? Dat de website vloeiend werkt en ik makkelijk producten kan personaliseren.

Hoe maak je een ontwerp? Door middel van kleine icoontjes kan ik teksen en/of afbeeldingen toevoegen. Dit moet heel simpel zijn en voor iedereen te begrijpen.

Kijk je nu anders? Ik kijk hierbij hetzelfde als bij een individueel product.

Uit het interview zijn de volgende elementen genoemd 1. Prijs 2. Verzorgde look-and-feel

3. Inspiratie 4. Verzendkosten

5. Reviews

Op welke pagina’s zie je deze elementen graag terug in de website?

HOME

THEMA

PRODUCT

ONTWERP

KASSA

2-3-4-5

1-3-4-5

1-3-4

1-4

123 123

124 124

NAAM

Mike Kelders

LEEFTIJD

24 jaar

OPLEIDING

HBO, Communicatie

WOONPLAATS

Eindhoven

HOBBYâ&#x20AC;&#x2122;S

Gamen, tekenen, festivals

Het interview gaat over gepersonaliseerde producten.

Stel je gaat een gepersonaliseerd artikel kopen.

Wat versta je hieronder? Ik denk hierbij aan massa producten die je kunt personaliseren d.m.v. een tool.

Hoe ga je te werk? Ik ga kijken via een bekende site of zoeken via Google. Verder kan ik ook getriggerd worden via Social Media.

Heb je weleens een gepersonaliseerd artikel gekocht of besteld? Ja, Bij Nike ID heb ik mijn eigen schoenen ontworpen en een label voor mijn koffer heb ik ooit gepersonaliseerd. Hoe ging je te werk? Via een bekende site ben ik gekomen tot de producten en heb deze vervolgens gepersonaliseerd.

Waar let je op? Ik let vooral op vertrouwen en navigatie. Is de site een mooi geheel en klopt de navigatie. Wat vind je belangrijk? Verder vind ik reviews erg belangrijk, die lees ik altijd. Ook let ik op de USPâ&#x20AC;&#x2122;s.

Stel je bent op een site en je gaat een artikel personaliseren.

Stel je hebt een vriendenweekend voor de boeg. Je gaat een gepersonaliseerd artikel bestellen.

Wat verwacht je? Ik verwacht dat de UX perfect werkt zoals drag and drop functies. Ik verwacht dat het design dat ik maak niet afwijkt van het uiteindelijke resultaat. Verder vind ik het gaaf als ik het product 360 graden kan bekijken en dat ik voorbeeld designs zie zodat ik weet wat de mogelijkheden zijn.

Hoe ga je te werk? Hetzelfde als voor een persoonlijk gepersonaliseerd artikel. Waar let je op? Voor mij is deze journey precies hetzelfde. Ik zal waarschijnlijk wel beter kijken naar het aanbod van de producten en de mogelijkheden om aan te passen. Voor iedereen moet er een passend product zijn.

Wat wil je kunnen? Ik wil het product kunnen ontwerpen zoals ik zelf wil. Foto’s en logo’s makkelijk kunnen uploaden in veel bestandformaten. Hoe maak je een ontwerp? Zoals ik verwacht dat het werkt. Foto’s toevoegen, tekst toevoegen en via drag and drop alles kan toevoegen en aanpassen.

Uit het interview zijn de volgende elementen genoemd 1. Reviews 2. Navigatie

3. USP’s 4. Hoog in Google

5. Aanbod 6. Inspiratie

Op welke pagina’s zie je deze elementen graag terug in de website?

HOME

THEMA

PRODUCT

ONTWERP

KASSA

1-2-3-5-6

1-3-5-6

125 125

126 126

NAAM

Renate van de Ven

LEEFTIJD

34 jaar

OPLEIDING

HBO, Personeelsmanagement

WOONPLAATS

Eindhoven

HOBBY’S

Fotograﬁe, winkelen

Het interview gaat over gepersonaliseerde producten.

Stel je gaat een gepersonaliseerd artikel kopen.

Wat versta je hieronder? Ik denk hierbij aan producten met merknamen erop of producten met een persoonlijke naam.

Hoe ga je te werk? Ik ga zoeken in Google op “shirtje laten bedrukken”. En vanuit daar maak ik mijn keuze.

Heb je weleens een gepersonaliseerd artikel gekocht of besteld? Ik zelf heb nog nooit een gepersonaliseerd product besteld. Maar met onze vriendinnen groep hebben we een paar keer een T-shirt laten bedrukken.

Waar let je op? Ik vind het altijd belangrijk dat een website hoog in Google staat. Dat geeft mij het gevoel dat de website betrouwbaar is.

Hoe ging je te werk? We hebben alle wensen op een mail gezet en naar de lokale drukkerij gestuurd. Na een week hadden we de T-shirts binnen.

Wat vind je belangrijk? Ik zoek altijd via een zoekfunctie naar een product. Zonder zoekfunctie ben ik snel weer weg. Verder moet een site een verzorgde look-and-feel hebben en het aanbod moet snel duidelijk zijn.

Stel je hebt een vriendenweekend voor de boeg. Je gaat een gepersonaliseerd artikel bestellen.

Stel je bent op een site en je gaat een artikel personaliseren.

Hoe ga je te werk? Ook hier begint mijn zoektocht op Google.

Wat verwacht je? Ik verwacht vooral dat het heel makkelijk is werkt en overzichtelijk uitziet. Een kind moet kunnen begrijpen wat de bedoeling is van de tool.

Waar let je op? Bij een groep kijk je sneller naar de prijs dan wanneer je alleen voor jezelf een product koopt. Wat vind je belangrijk? Daarnaast hou ik van veel afbeeldingen/sfeerbeelden. Deze geven altijd een bepaalde rust. Ook vind ik het fijn als een website een chat-functie heeft om specifieke vragen te kunnen stellen.

Wat wil je kunnen? Ik wil het hele product kunnen aanpassen. Voor- en achterkant. Verder wil ik tekst en afbeeldingen toevoegen en deze per element aan kunnen passen. Dus per tekst de kleur en het lettertype aanpassen. Hoe maak je een ontwerp? Via een drag-and-drop functie wil ik alle elementen toevoegen en het lijkt me gaaf om achteraf een 3d model van het ontwerp te zien.

Uit het interview zijn de volgende elementen genoemd 1. Hoog in Google 2. Zoekfunctie

3. Prijs 4. Aanbod

5. Inspiratie 6. Chatfunctie

Op welke paginaâ&#x20AC;&#x2122;s zie je deze elementen graag terug in de website?

HOME

THEMA

PRODUCT

ONTWERP

KASSA

2-3-4-6

2-3-4-5-6

3-4-6

2-3-6

3-6

127 127

128 128

NAAM

Teun van Asten

LEEFTIJD

24 jaar

OPLEIDING

HBO, Sporthogeschool

WOONPLAATS

Aarle-Rixtel

HOBBY’S

Voetbal, stappen, reizen

Het interview gaat over gepersonaliseerde producten.

Stel je gaat een gepersonaliseerd artikel kopen.

Wat versta je hieronder? Producten die je zelf kunt ontwerpen of bestaande producten die je kunt laten bedrukken.

Hoe ga je te werk? Ik ga online zoeken op het internet. Er zijn voortaan heel veel sites waar je je eigen gepersonaliseerde producten kunt ontwerpen.

Heb je weleens een gepersonaliseerd artikel gekocht of besteld? Ja, ik heb wel eens polo’s besteld voor de vriendengroep die we vervolgens lieten bedrukken zoals we wilden. Daarnaast heb ik een keer online een klok besteld waar ik een foto op kon laten drukken. Hoe ging je te werk? Bij de polo’s ben ik samen met een vriend bij een drukkerij in Stiphout (Helmond) langs geweest, Multi Print. Bij de klok ging ik googelen of er sites waren waarbij je producten kon bestellen en deze kon laten personaliseren. Hier kun je allerlei producten laten bedrukken en/of aanpassen naar je smaak.

Waar let je op? De look-and-feel van een website. De look-and-feel moet er verzorgd uit zien. Een grote banner met sfeerbeelden bijvoorbeeld. Wat vind je belangrijk? Daarnaast moet de website gebruiksvriendelijk zijn. Het moet niet te veel tijd in beslag nemen om producten te vinden. Als de website er niet overzichtelijk uit ziet klik ik meestal snel weg.

Stel je hebt een vriendenweekend voor de boeg. Je gaat een gepersonaliseerd artikel bestellen.

Stel je bent op een site en je gaat een artikel personaliseren.

Hoe ga je te werk? Ook hier ga ik weer zoeken op het internet. Ik zou zoeken naar “vriendengroep tshirts bedrukken”.

Wat verwacht je? Dat ik alles naar wens kan maken zoals ik wil dat het wordt. Het moet makkelijk te ontwerpen zijn.

Waar let je op? Als je met de vriendengroep iets moet kopen speelt de prijs altijd een grote rol.

Wat wil je kunnen? Maten, lengte, kleur kiezen. Tekst en afbeeldingen toevoegen.

Wat vind je belangrijk? Bij een onbekende website lees ik vaak wat reviews door. Dit geeft mij altijd het vertrouwen om een product aan te schaffen.

Hoe maak je een ontwerp? Via een online tool wil ik het product aanpassen naar wens. Ik wil tekst toe kunnen voegen en foto’s kunnen uploaden.

Uit het interview zijn de volgende elementen genoemd 1. Navigatie 2. Verzorgde look-and-feel

3. Reviews 4. Prijs

5. Inspiratie

Op welke pagina’s zie je deze elementen graag terug in de website?

HOME

THEMA

PRODUCT

ONTWERP

KASSA

1-2-3-4-5

2-3-4

1-2

2-4

129 129

130 130

NAAM

Dave Jansen

LEEFTIJD

33 jaar

OPLEIDING

MBO, Tuin en landschap

WOONPLAATS

Aarle-Rixtel

HOBBYâ&#x20AC;&#x2122;S

Muziek maken, uiteten

Het interview gaat over gepersonaliseerde producten.

Stel je gaat een gepersonaliseerd artikel kopen.

Wat versta je hieronder? Bij gepersonaliseerde artikelen denk ik aan doelgroep gerelateerde producten.

Hoe ga je te werk? Bij het vorige bedrijf heb ik bijna 3 maanden moeten wachten vanwege een slechte levering. Daar ben ik nu klaar mee. Ik zou nu weer beginnen via Google en verschillende bedrijven opbellen om te vragen wat ze voor mij kunnen betekeken.

Heb je weleens een gepersonaliseerd artikel gekocht of besteld? Ja, ik heb een aantal keer gepersonaliseerde T-shirts besteld. Zowel voor het dartteam als personeelskleding. Hoe ging je te werk? Ik ben rond gaan kijken op internet of er bedrijven in de buurt zitten. Vervolgens heb ik deze bedrijven gebeld en heb ik gekeken naar service, prijs, verzendkosten en levertijd. Het liefst zie ik de verzendkosten op tijd zodat ik precies weet wat ik in totaal kwijt ben.

Waar let je op? Het allerbelangrijkste vind ik dat de service goed is. Als ik bedrijven bel verwacht ik dat ze mij snel kunnen helpen en met mij meedenken. Wat vind je belangrijk? Wanneer ik puur naar de websites kijk moet hij er natuurlijk strak en verzorgd uitzien en het aanbod moet voldoende zijn.

Stel je hebt een vriendenweekend voor de boeg. Je gaat een gepersonaliseerd artikel bestellen.

Stel je bent op een site en je gaat een artikel personaliseren.

Hoe ga je te werk? Ik zou beginnen met alle maten opvragen. Vervolgens zou ik weer beginnen op Google en dezelfde stappen volgen.

Wat verwacht je? Ik verwacht een duidelijk eindresultaat. Ik wil het product precies zien zoals ik het opgestuurd krijg. Eventueel met een 3D functie.

Waar let je op? Zoals eerder gezegd vind ik service erg belangrijk. Wanneer ik een bedrijf aan de telefoon heb moet het voor mij meteen goed voelen.

Wat wil je kunnen? Ik wil maten kunnen aangeven en de productkleuren kunnen aanpassen.

Wat vind je belangrijk? Ik vind het belangrijk als een bedrijf met mij meedenkt en met passende oplossingen komt.

Hoe maak je een ontwerp? Ik verwacht dat ik teksen kan toevoegen, lettertypes kan aanpassen en logoâ&#x20AC;&#x2122;s kan uploaden. Ik vind het belangrijk dat het snel werkt zodat ik er niet al te lang mee bezig hoef te zijn.

Uit het interview zijn de volgende elementen genoemd 1. Contact 2. Prijs

3. Verzendkosten 4. Levertijd

5. Aanbod 6. Verzorgde look-and-feel

7. Snel en vloeien 8. Locatie

Op welke paginaâ&#x20AC;&#x2122;s zie je deze elementen graag terug in de website?

HOME

THEMA

PRODUCT

ONTWERP

KASSA

1-5-6-7

1-2-3-4-5 -6-7

1-2-3-4

1-2-3-4-7

1-2-3-4

131 131

132 132

NAAM

Iris van den Boogaard

LEEFTIJD

20 jaar

OPLEIDING

HBO, Toerisme management

WOONPLAATS

Beek en Donk

HOBBYâ&#x20AC;&#x2122;S

Reizen, uitgaan, winkelen

Het interview gaat over gepersonaliseerde producten.

Stel je gaat een gepersonaliseerd artikel kopen.

Wat versta je hieronder? Ik denk hierbij aan shirtjes met zelfgemaakte teksten, kussens met fotoâ&#x20AC;&#x2122;s of aan mokken met een leuke print.

Hoe ga je te werk? Ik ga zoeken via Google en dan vergelijk ik een aantal websites om te kijken welke het beste bij mij past.

Heb je weleens een gepersonaliseerd artikel gekocht of besteld? Ik heb zelf nog nooit een gepersonaliseerd artikel besteld. Ik heb wel een keer gepersonaliseerde shirtjes gedragen tijdens de examenstunt maar ik weet niet hoe of waar dit is besteld.

Waar let je op? De website moet er verzorgd en netjes uitzien. Ik moet reviews kunnen lezen en ik moet makkelijk producten kunnen vinden. Wat vind je belangrijk? Natuurlijk kijk ik ook naar de prijs. Een website kan er nog zo mooi uitzien maar wanneer het product ergens anders goedkoper is kies ik toch voor de goedkoopste.

Stel je hebt een vriendenweekend voor de boeg. Je gaat een gepersonaliseerd artikel bestellen.

Stel je bent op een site en je gaat een artikel personaliseren.

Hoe ga je te werk? Ik ga hier hetzelfde te werk dan wanneer ik alleen voor mezelf een gepersonaliseerd product aanschaf.

Wat verwacht je? Ik verwacht dat je het product aan kunt passen zonder dat je een account aan hoeft te maken. Verder wil ik precies zien hoe het product aangepast wordt. Verder wil ik van te voren precies weten wat het product kost zonder daarbij voor verrassingen te komen staan bij het afrekenen.

Waar let je op? Ik let wel op het aantal stuks dat ik minimaal moet bestellen. Je ziet soms websites waarbij je minimaal een aantal producten moet bestellen.

Wat wil je kunnen? Ik wil op een makkelijke manier zoveel mogelijk kunnen aanpassen. Het product kunnen draaien, tekst toevoegen, lettertypes kiezen en afbeeldingen uploaden. Hoe maak je een ontwerp? Door middel van kleine icoontjes wil ik verschillende opties kunnen selecteren om het product aan te passen. Dit moet heel makkelijk en vanzelfsprekend zijn.

Uit het interview zijn de volgende elementen genoemd 1. Reviews 2. Verzorgde look-and-feel

3. Prijs 4. Navigatie

5. Verzendkosten

Op welke paginaâ&#x20AC;&#x2122;s zie je deze elementen graag terug in de website?

HOME

THEMA

PRODUCT

ONTWERP

KASSA

2-3-4

1-3-5

4-5

3-5

133 133

134 134

BIJLAGE VI - CONFIGURATIE DESIGN-TOOL Uit verschillende tools heeft de organisatie uiteindelijk gekozen voor InkXE. InkXE is de eerste HTML5 design-tool en is ontwikkeld door Riaxe Systems, India. InkXE is inmiddels in meer dan 500 webshops geĂŻntegreerd over de hele wereld. Met de tool heeft de bezoeker de mogelijkheid om producten helemaal aanpassen naar wens. Zo is het mogelijk om teksen toe te voegen, afbeeldingen te uploaden, filters en cliparts te gebruiken, QR codes te genereren en nog veel meer. Naast de tool beschikt InkXE over een uitgebreide back-end omgeving waar het mogelijk is om alle functionaliteiten aan te passen en beschikt het pakket over knowledgebase waar alle instellingen staan beschreven. Wanneer er problemen onstaan die niet opgelost kunnen worden door alleen de knowledge base is het mogelijk om via een online omgeving te schakelen met de developers van InkXE.

Afbeelding 39: InkXE back-end omgeving

Om overzicht te hebben in alle werkzaamheden is ervoor gekozen om te werken met Trello. In Trello zijn zes kolommen gemaakt met daaronder alle onderdelen.

Afbeelding 40: Trello bord

135 135

136 136

Shape Printing Area De meeste producten van het assortiment hebben een rechthoekig printvlak. Denk hierbij aan textiel, thermoskannen, mokken etc. Er zijn echter ook producten waarbij het printvlak niet rechthoekig is zoals bijv. bij openers en powerbanks. Voor deze producten moet een op maat gemaakt print vlak worden gemaakt. In de Knowledge Base staat uitgebreid beschreven hoe een printvlak gemaakt kan worden in Adobe Illustrator en vervolgens kan worden opgeslagen als een SVG bestand. Bij het het instellen van het SVG bestand veranderde de tool de afmeting van het printvlak. Om dit probleem op te lossen is er een vraag uitgezet naar InkXE. Het development team van InkXE heeft het probleem opgelost en de printvlakken konden worden gemaakt.

137 137

138 138

139 139

140 140

Color Mask Bepaalde producten biedt Heroes of Print aan in verschillende kleuren. Omdat het lastig is om van elke kleur precies dezelfde afbeelding weer te geven is ervoor gekozen om voor deze producten een color mask te maken. Dit betekent dat via Adobe Photoshop en color mask gemaakt moet worden waar vervolgens de design-tool een kleur laag achter plaatst in elke gewenste kleur. Hierdoor krijgt de consument telkens precies dezelfde afbeelding te zien. Ook wanneer de kleur verandert. In totaal zijn er zoâ&#x20AC;&#x2122;n 200 maskers gemaakt. Hierdoor hoeven niet alle afbeeldingen ingeladen te worden waardoor de design-tool een stuk sneller kan laden.

141 141

142 142

Cliparts De InkXE tool bevat standaard een aantal cliparts. Deze staan gecategoriseerd onder thema’s zoals: geloof, zomer, fun, cool etc. Om het merkverhaal van Heroes of Print beter naar voren te laten komen is ervoor gekozen om deze thema’s te vervangen en dezelfde thema’s te gebruiken als de rest van de webshop. Vervolgens zijn er nieuwe cliparts toegevoegd om alle thema’s in te kunnen vullen. Al snel bleek dat de nieuwe cliparts te groot waren waardoor de design-tool een stuk trager werd. Om de gebruiksvriendelijkheid van de design-tool te vergroten zijn alle nieuwe cliparts verkleind kon de tool weer goed worden gebruikt.

143 143

144 144

Productkleur De gekozen product kleur van de PDP wordt niet meegenomen naar de design-tool. Hiervoor is een ticket gemaakt voor de developers van InkXE. Zij hebben deze functie aangepast en geĂŻmplementeerd in de design-tool.

Lettertypes Om de user experience te vegroten zijn er aan aantal lettertypes toegevoegd aan de design-tool. Om te beginnen zijn een aantal concurrenten bezocht zoals spreadshirt, shirtinator, Yoursurprise en CustomInk om te kijken hoeveel lettertypes er worden gebruikt. Dit aantal varieerde van 10 tot 50. Er is besloten om hiervan een gemiddelde te nemen en zoâ&#x20AC;&#x2122;n 30 lettertypes toe te voegen. Er zijn zoveel mogelijk verschillende lettertypes gebruikt zoals scheerfloos, bold, italic, hoofdletters en sierlijk. Belangrijk was dat deze lettertypes konden worden gebruikt voor commerciĂŤle doeleinden.

145 145

146 146

BIJLAGE VII - GEBRUIKERSTEST SCENARIO I - FAMILIEWEEKEND

Naam: Devy Link: https://youtu.be/oNh20ynYokE Hoe ben je te werk gegaan? Wat viel je daarbij op? Ik begon op de productpagina. Vervolgens de customize-button ben ik naar de tool gegaan. Hier ben ik gaan bladeren tussen de verschillende afbeeldingen om deze toe te voegen op het product. Uiteindelijk had ik er voor gekozen om zelf een afbeelding te uploaden, daarbij viel mij op dat je een optie had om de achtergrond te verwijderen. Vervolgens ben ik tekst gaan toevoegen. Het viel mij op dat alles lekker snel en makkelijk te verschalen en te verplaatsen was. Toen ik de achtergrond ofwel de kleur van het product aan wilde passen viel mij op dat de verschillende opties geen gekleurd vakje hadden. Vervolgens wilde ik het product toe gaan voegen in het winkelmandje door rechtsonderdaan op de knop te klikken. Maar omdat ik er 25 moest bestellen had ik in eerste instantie de gedachte dat ik het aantal eerst in moest vullen alvorens het in het winkelmandje toe te voegen. Uiteindelijk de knop ingedrukt en daar kwam een nieuw schermpje waar ik het aantal in kon voeren. De totaalprijs zag ik maar ik zag niet de stukprijs staan, dit had ik wel verwacht. Daarnaast zag ik geen in of excl. btw staan. Welke functies heb je gebruikt? Kon je deze makkelijk vinden? Mis je nog functies? De functies die ik heb gebruikt zijn het toevoegen van cliparts, afbeelding en tekst. Bij de afbeelding heb ik de achtergrond verwijderd en de tekst heb ik veranderd van kleur en lettertype. Het zou fijn zijn als je bij de tekst een exacte afmeting in mm kan aanpassen. Verder zou een 3D weergave een leuke toevoeging zijn en ik zou voorbeelden willen zien van producten met een opdruk voor extra inspiratie. Hoe heb je de snelheid van de design-tool ervaren? Snelheid is over het algemeen goed Alleen na het klikken van ‘’customize’’ moet je wachten tot de tool geladen is wat logisch is maar je zag alleen een soort zandlopertje zonder tekst, tip: voeg tekst toe zodat men weet waar ze op wachten Wat vind je over het algemeen van de design-tool? Wat vind je goed? Wat kan beter? Over het algemeen een hele nette en duidelijke tool met heel veel leuke functies.

Naam: Thomas Link: https://youtu.be/GCbEtz3x6jk Hoe ben je te werk gegaan? Wat viel je daarbij op? Ik ben begonnen met het kiezen van een kleur. Vervolgens ben ik de tool in gegaan en ik verwachte hier een rood product te zien. Dit was helaas niet het geval. Vervolgens heb ik gekeken naar welke plaatjes er mogelijk zijn, hierbij gekeken naar de mogelijke categorieën. Daarna heb ik een tekst bedacht die ik kon toevoegen. Hierbij vond ik het erg lastig om de kleur van de tekst aan te passen, dit kon ik 1-2-3 niet vinden. Tenslotte was het erg gemakkelijk om het product in het winkelmandje te zetten en het aantal producten aan te geven. Welke functies heb je gebruikt? Kon je deze makkelijk vinden? Mis je nog functies? Achtergrond, dit was gemakkelijk te vinden en gemakkelijk toe te passen. Plaatje, tevens gemakkelijk om te vinden en een keuze te maken tussen de categorieën, hierbij was het nog beter geweest als ik in een oogopslag kon zien dat ik eigen plaatjes/foto’s kon toevoegen. Verder heb ik tekst toegevoegd. Dit was makkelijk te vinden. Het veranderen van de tekstkleur was wel lastig om te vinden, dit zou duidelijker moeten zijn. Hoe heb je de snelheid van de design-tool ervaren? Erg goed, niet lang hoeven wachten. Wanneer ik iets toevoegde werkte dit meteen. Wat vind je over het algemeen van de design-tool? Wat vind je goed? Wat kan beter? Snel en duidelijk over het algemeen. Ik zou alleen eerder aangeven dat je eigen foto’s kan toevoegden en het aanpassen van de tekstkleur. Verder zou het fijn zijn als ik verschillende ontwerp voorbeelden kon zien. Dan weet ik beter wat de mogelijkheden van de design-tool zijn. Dit waren voor mij wat min punten. Verder een prima tool om mee te werken.

147 147

148 148

BIJLAGE VII - GEBRUIKERSTEST SCENARIO II - KAMPIOENSCHAP

Naam: Lonne Link: https://youtu.be/nm9s7MkhgKk Hoe ben je te werk gegaan? Wat viel je daarbij op? Om te beginnen heb ik eerst gekeken welke kleur ik mooi vond. Daarna ben ik op zoek gegaan naar een logo voor mijn sport. Helaas zat er niks tussen over handbal dus heb ik een shirt ontwerpen voor tennis. Toen ik een afbeelding over tennis had toegevoegd heb ik een tekst bedacht. Deze heb ik een ander lettertype gegeven en een andere kleur. Het duurde even voordat ik wist hoe ik de kleur moest veranderen. Dit vond ik onduidelijk. Daarna heb ik de achterkant aangepast. Hier heb ik dezelfde functies voor gebruikt als bij de voorkant. Toen het shirt klaar was heb ik 15 shirtjes besteld met verschillende maten. Dit werkt perfect. Welke functies heb je gebruikt? Kon je deze makkelijk vinden? Mis je nog functies? Ik heb icoontjes gezocht via categorieĂŤn en toegevoegd. Daarnaast heb ik een tekst gemaakt en aanpast naar wens. Ik heb zelf geen afbeeldingen geupload hoewel ik deze functie wel heb gezien. De tool heeft een hoop functionaliteiten en ik zou niet weten wat ik hieraan nog toe kan voegen. Hoe heb je de snelheid van de design-tool ervaren? De snelheid van de tool was goed. Geen problemen mee gehad. Wat vind je over het algemeen van de design-tool? Wat vind je goed? Wat kan beter? Over het algemeen een goede tool. Erg duidelijk en erg overzichtelijk. Het kleur-icoontje van de tekst kan naar mijn mening wat duidelijker en het duurde even voordat ik zag dat ik afbeeldingen en tekst toe kon voegen.

Naam: Teun Link: https://youtu.be/kaCrubP2leE Hoe ben je te werk gegaan? Wat viel je daarbij op? Ik moest een kampioenschap-shirt voor een team van 15 man maken. Als eerste ben ik een kleur gaan kiezen welke aansluit op de clubkleuren. Daarna ben ik het ontwerp gaan maken. Ik wilde graag het clublogo terug laten komen op het shirt. Deze kon ik gemakkelijk uploaden en vervolgens bewerken. Daarna heb ik een speelse afbeeldingen op de voorkant van het shirt gebruikt. Wat later kwam ik er pas achter dat ik ook de achterkant kon bewerken. Dit heb ik dan ook vervolgens gedaan. Je hebt opties om tekst te bewerken zoals je wilt. Welke functies heb je gebruikt? Kon je deze makkelijk vinden? Mis je nog functies? Ik heb tekst toegevoegd, icoontjes/afbeeldingen geupload en tekst bewerkt. Deze functies kon ik makkelijk vinden. Hoe heb je de snelheid van de design-tool ervaren? Het laden van de tool duurde even maar dit is begrijpelijk. In het begin was de design-tool snel maar omdat ik her en der wat heb rondgeklikt werd de tool minder snel. Dit was jammer. Wat vind je over het algemeen van de design-tool? Wat vind je goed? Wat kan beter? Ik vind de design-tool over het algemeen goed. Je hebt veel opties om je product te bewerken naar jouw smaak. Ook het feit dat je afbeeldingen kunt uploaden zorgt ervoor dat je heel veel opties hebt. Ik kon niet meteen vinden hoe ik een kleur aan kon passen en ik zag pas later dat je ook afbeeldingen kunt toevoegen en tekst kunt plaatsen. Wat mij betreft kan dit wat duidelijker.

149 149