Section No. 1

Webshop realisatie | Webshop

Wat heb ik gedaan

Het eindontwerp is omgezet naar een custom WordPress thema door min en een mede groepgenoot Timo Verberne. Timo had al aardig wat kennis van WooCommerce, dus heeft hij zich hier voornamelijk op gefocust tijdens de development fase.

Zelf heb ik mijzelf gefocust op het uiterlijke schil van de webshop, namelijk de front end. Ook heb ik mijzelf gefocustop de verschillende plugins die een toegevoegde waarde hebben voor de webshop achterkant en voor de gebruiker van de webshop.

Een kleine greep uit het lijstje:

  1. Tidio chatbot, customer experience
  2. PWA, voor een offline applicatie
  3. Abondend Basket, stuurt een mail naar de gebruiker als hij of zij de website verlaat
  4. Cookies
  5. Pop-up voor promotieĀ  doeleinde

Hoe heb ik dit gedaan

In het begin heb ik een subdomein aangemaakt en een automatische back-up ingesteld. Dit zorgde ervoor, als er iets mis ging, dan konden we altijd terug naar een andere versie. Ook is er een SSL certificaat op de host gezet, hierdoor heeft de webshop een beveiligde verbinding.

De vervolgstap was om de WordPress installatie klaar te zetten, hierbij zijn er users aangemaakt zodat Timo en ik tegelijkertijd aan de webshop konden werken.

Aangezien er een flinke tijdsdruk was, hebben we ervoor gekozen om een basis thema te pakken genaamd Salient. Dit thema werkt met WP-Bakery, je kan daardoor de site in elkaar zetten als een blokkendoos. Binnen deze doos kan je wel je eigen design kwijt, maar hoef je niet alles vanaf het begin op te bouwen.

Voor de verschillende plug-ins ben ik op onderzoek uitgegaan, heb er vele getest en mee gespeeld. Door dit te doen kwam ik uiteindelijk tot een selectie van plug-ins die goed binnen de webshop zouden werken.

Wat heb ik eraan gehad

Door veel te onderzoeken en te spelen, heb ik het volledige basis thema onder de knie. Het was een onderzoek, probeer proces. Uiteindelijk heeft dit wel tot gewenste resultaten mogen leiden.

Ook heb ik mijn kennis mogen verbreden op chatbots, hiervoor had ik nooit een chatbot gebruikt. Tijdens dit project hebt ik een custom script gemaakt binnen Tidio de chatbot plugin die reageerde op de gebruikers.

Doorgevoerd in het project

Aan het einde van de relatief korte ontwikkelfase is er een nette website neergezet. Het uiteindelijke resultaat is te zien op www.sneakc.digicc.oneĀ .
De website is in een eindpresentatie gepresenteerd aan docenten en klasgenoten van de minor.

Relevantie leerdoel UIX

Binnen de webshop heb ik voornamelijk op UIX gezeten Binnen dit gedeelte heb ik voornamelijk aan leerdoel level 3 gewerkt. Hierbij heb ik dus alle stappen van 1 & 2 doorlopen met nog de extra stappen van level 3. Voorheen had ik de verschillende persona’s gemaakt voor de webshop, deze persona’s waren nodig om een beeld te schetsen wat voor personen de webshop zouden bezoeken. Net zoals je gaat tekenen zet je eerst grove schetsen neer voordat je een definitieve tekening maakt, dit geld ook voor een ontwerp van een website of applicatie. Zelf ben ik dus begonnen om eerst de lijnen neer te zetten van de webshop en er een klikbaar prototype van te maken.

Door dit te doen kon ik een A/B test te gebruiken. Van de wireframes had ik verschillende varianten gemaakt, zodat gebruikers deze verschillende versies konden testen. Door deze te laten testen kwam het beste van twee werelden naar boven met aanvulling / feedback van de participanten van de A/B tests. De volgende stap was om de wireframes om te zetten tot ontwerp, hierbij heb ik nogmaals verschillende iteraties neergezet als high fidelity prototype.

Bij deze test ronde heb ik een andere manier van testen ingezet namelijk: Field Trial, deze test methode loopt niet een keer, deze loopt een aantal keer. Zo heb ik personen de prototypes laten testen over drie verschillende dagen, door dit te doen kwam soms op dag drie nog een bevinding van de gebruiker die bij dag een niet opgevallen was. De laatste stap was dan ook het realiseren van de webshop, door de voorheen geteste onderdelen, kon ik in een razend tempo de webshop bouwen. Toen de webshop online stond, heb ik nog een laatste ronde usability testen gedaan, dit om eventuele CSS of andere code foutjes er uit te halen.