Koffiekaartje klaarstomen voor de toenemende groei

Bekijk de leeswijzer

Introductie

Gravity Media is een relatief nieuw mediabedrijf dat pas sinds 2017 haar klanten ondersteunt met de ontwikkeling van digitale oplossingen voor gevarieerde vraagstukken. Het bedrijf is ontstaan vanuit een samenwerking tussen twee alumni van de opleiding ICT & Media design en International Business en Management studies. Op dit moment zijn er zeventien werknemers werkzaam binnen alle bedrijven van Gravity Media. Het team van Gravity Media zelf is momenteel elf man sterk.


Afbeelding een: Team Gravity Media.

Gravity Media biedt meer dan de standaard oplossingen. Tussen de bedrijven door werken ze namelijk ook veel aan losse concepten. Dit zijn concepten waar Gravity Media denkt haar marktaandeel mee te kunnen vergroten.  Al deze concepten worden intern uitgewerkt en worden uiteindelijk als individueel product gelanceerd.

Gravity Media heeft alleen tijd voor concepten waar het bedrijf daadwerkelijk in gelooft, het Koffiekaartje is er hier een van. Het Koffiekaartje is een fysieke tegoedbon waarmee je op pad kan gaan om acht kopjes koffie bij de leukste koffiezaken te drinken.

Het platform is razend populair, steeds meer bedrijven willen een plekje op het Koffiekaartje. Op een kaartje is er namelijk maar plek vier koffiezaken. De plekjes worden verdeeld door te lobbyen met de bedrijven die willen deelnemen. Dit is érg tijdrovend. Gravity Media is opzoek naar een manier om het Koffiekaartje gemakkelijker te laten groeien zonder dat het teveel kost, en daarmee de marginale kosten te hoog worden. Ook zien ze kansen om meerdere platformen te ontwikkelen binnen hetzelfde concept. Je kan hierbij denken aan concepten zoals: Hamburgerkaartje, Bierkaartje en Sushikaartje.

Opdrachtomschrijving

Het Koffiekaartje is een fysieke tegoedbon. Met deze tegoedbon geniet je samen met een vriend of vriendin van acht heerlijke kopjes koffie bij vier voorgeselecteerde koffiebars in jouw stad. Alleen de allerbeste koffiezaken krijgen een plekje op het Koffiekaartje. De tegoedbonnen worden telkens in kleine edities uit gebracht. Dit zijn oplages van ongeveer 250 Koffiekaartjes per editie, die razendsnel uitverkocht zijn.


Afbeelding twee: Oude situatie van het Koffiekaartje.

Het personeel van Koffiekaartje gaat per editie om tafel zitten met een aantal Koffiezaken om te bepalen wie er op het kaartje mag komen. Zoals je je kan voorstellen is dit een erg tijdrovend proces.

Koffiekaartje krijgt dan ook vaak de vraag van de gebruiker “waarom staat “Koffiezaak X” niet op het Koffiekaartje?”.

Door al deze vaste taken lukt het Koffiekaartje top op heden maar om in drie grote steden operationeel te zijn. Het bedrijf heeft de visie om meer koffiebars aan te sluiten bij het Koffiekaartje Koffiekaartje en om een platform te bieden waar vraag en aanbod op het gebied van koffie samengebracht wordt. Er staan al een tiental bars in de wachtrij voor een plekje op een toekomstig kaartje.

 

Afbeelding drie: Koffiekaartje in de huidige vorm.

Uit gesprekken met de klanten van Koffiekaartje blijkt dat de gebruiker opzoek is naar meer inspraak bij de samenstelling van een Koffiekaartje. Doordat het Koffiekaartje alleen via een editie per stad wordt verkocht is dit in de huidige situatie niet mogelijk.

Door deze edities blijft het Koffiekaartje ook moeilijk verkrijgbaar, omdat na iedere oplage opnieuw afspraken gemaakt moeten worden met de nieuwe of bestaande koffiebars. Het Koffiekaartje voor Eindhoven is nu al enkele maanden uitverkocht omdat het bedrijf momenteel geen tijd heeft om een nieuwe editie samen te stellen.

De gebruiker is nu de dupe van de slecht geregelde businesskant van het Koffiekaartje. Ze zitten nu al maanden zonder Koffiekaartje terwijl de vraag hoog blijft.

Koffiekaartje is onderdeel van een overkoepelend concept genaamd Horekaartje. Onder de naam van Horekaartje wil Gravity Media in de toekomst meerdere concepten lanceren net zoals Koffiekaartje, waarbij je kan denken aan concepten zoals een Bierkaartje of een Sushikaartje.

Tijdens de herontwikkeling ligt er een mooie kans om het platform makkelijker inzetbaar te maken voor deze toekomstige concepten.

De opdracht vanuit Gravity Media was: bouw een schaalbaar dynamisch Koffiekaartje 2.0. Het stukje dynamisch en schaalbaar maakte de opdracht érg vaag en omvat niet de gehele scope. Het grootste probleem van het concept Koffiekaartje is namelijk dat ze de groei van het platform niet aankunnen.

Gravity Media geeft aan drie eisen en een randvoorwaarde te hebben bij de realisatie van de opdracht.

Eisen

  1. De gebruiker verlangt naar een dynamisch Koffiekaartje wat de mogelijkheid biedt om zelf een Koffiekaartje online samen te stellen
  2. Het Koffiekaartje moet ook digitaal beschikbaar zijn als coupon
  3. Het nieuwe Koffiekaartje moet samenwerken met horecasoftware die gebruikt wordt in de horecazaak

Randvoorwaarde

  1. Het platform moet met kleine aanpassingen inzetbaar zijn voor toekomstige Horekaartje concept zoals: Hamburgerkaartje, Bierkaartje of Sushikaartje

De hoofdvraag luidt daarom:

Hoofdvraag
Hoe kan het Koffiekaartje meegroeien met het toenemende aantal koffiezaken dat wil deelnemen aan het Koffiekaartje?

 

Doestelling

Het doel is om gedurende de stageperiode de eerste versie van een tool te ontwikkelen die het mogelijk maakt om mee te groeien met het toenemende aantal horecazaken van het Koffiekaartje. Deze tool moet gemakkelijk om te bouwen zijn naar een nieuw Horekaartje concept zoals bijvoorbeeld Bierkaartje. Ook moet de gebruiker meer inspraak krijgen bij de samenstelling van een Koffiekaartje.

Om deze doelen te behalen, is er een overzichtelijke planning gemaakt met een bijhorend onderzoek diagram om de haalbaarheid van het project te waarborgen.


Afbeelding vier: Planning stageperiode

Disclaimer

Op sommige plekken in de website kom je wellicht nog de term Koffiecaartje tegen. Dit is de originele naam van het platform. Dit stamt namelijk af van de naam Horecaartje, het idee is namelijk om meerdere type horecategoedbonnen te lanceren. Tijdens de ontwikkeling van het platform is de keuze gemaakt om de naam te veranderen naar Koffiekaartje en Horekaartje omdat er vanuit gebruiker veel opmerkingen zijn ontvangen dat ze de “C” in de naam Koffiecaartje erg verwarrend vonden.

Wanneer er naar de term stakeholders gerefereerd wordt bedoel ik de volgende personen;

  • Thierry Schout
  • Michel Winkels
  • Mike Vereijken

Ook is de barista, Danny van Vroenhoven, uitgebreid betrokken binnen het project. Danny is dé koffie-expert van Eindhoven en omstreken.

 

Hoe kan het Koffiekaartje meegroeien met het toenemende aantal koffiezaken dat wil deelnemen aan het Koffiekaartje?

User experience aspect

Design aspect

Technisch aspect

Deelvraag 1

Wat verwachten koffiedrinkers van de werking van het Koffiekaartje?

Deelvraag 2

Hoe creëer je een Koffiekaartje waarin iedere koffiezaak een gelijke kans krijgt om op een Koffiekaartje te komen?

Deelvraag 3

Hoe kan ik het Koffiekaartje ontwerpen zodat Horekaartje concepten zoals Koffiekaartje in de toekomst sneller gelanceerd kunnen worden ?

Deelvraag 4

Met welke technische oplossingen kan ik er voor zorgen dat een Koffiekaartje in de toekomst Horekaartje platformen sneller kan lanceren?

Deelvraag 5

Hoe creëer je een Koffiekaartje waarin een klant zijn eigen kaartje kan samenstellen?

Deelvraag 1

Vooronderzoek

Deelvraag
Wat verwachten koffiedrinkers van de werking van het Koffiekaartje ?

Aanleiding

Na de opdracht goed geanalyseerd te hebben, kwam ik tot de conclusie dat de gebruikers van het Koffiekaartje tegen een hoop obstakels aan lopen binnen de huidige vorm van het Koffiekaartje. Het is daarom verstandig om me als eerste goed te verdiepen in deze koffiedrinkende doelgroep.

Het is van groot belang om enige voorkennis van de koffiebranche op te doen. Ik heb nog nooit eerder gewerkt voor deze branche, daarom ben ik een literatuuronderzoek gestart waarbinnen ik mezelf breed heb georiënteerd om zo de wensen en de trends binnen de koffiecultuur te ontdekken.

Doel

  • De verwachte werking van het Koffiekaartje documenteren
  • Onderzoeken waarom mensen een koffiebar bezoekt
  • Doelgroep concreet vastleggen
  • Functionaliteiten prioriteit geven op basis van enquête en data-analyses

Opzet

  • Een literatuuronderzoek doen om wensen en de trends binnen de koffiecultuur te ontdekken
  • De doelgroep vastleggen vanuit een Instagram Online analytics onderzoek
  • Op basis van deze resultaten een enquête opstellen waarin ik direct de doelgroep target
  • Resultaten van de drie bovenstaande onderzoeken visualiseren en analyseren
  • Persona opstellen vanuit de analyses

Resultaten

Koffiebranche onderzoek
Koffietje is een vertegenwoordiger van de Nederlandse koffiesector. Koffietje heeft in 100 bars enquêtes afgelegd in 2019. Uit dit onderzoek is een lijst gekomen met de meest gewenste eigenschappen van een koffiebar in afbeelding vijf zie je een overzicht van de top vijf eigenschappen.

Het grote deel van de bars komt uit de stad en maar zelden komen er bezoekers uit een dorpje aldus (Koffietje, 2019).

Afbeelding vijf: Top vijf gewenste eigenschappen binnen een koffiebar

Instagram  Online Analytics
Via een de Online Analytics methode heb ik de gebruikersdata van de Instagram van het Koffiekaartje geanalyseerd. In dit account kun je via Instagram Business Insights het Instagram gedrag van je volgers nauwkeurig volgen. Uit deze resultaten blijkt het dat het Koffiekaartje vooral populair is bij jongvolwassen met een leeftijd van 25 tot 34. Het kaartje is bij vrouwen populairder dan bij mannen, slechts 33% van de volgers zijn man.

  1. Doelgroep: Jongvolwassenen vrouwen met de leeftijd van 25 tot 34 jaar
  2. Secundaire doelgroep: Volwassen vrouwen met de leeftijd van 35 tot 44 jaar

Afbeelding zes: Leeftijd volgers van het Koffiekaartje Instagram-acount

Algemene enquête
Via een enquête heb ik onderzoek gedaan naar de mogelijkheden om e-tickets in te zetten binnen het Koffiekaartje. In totaal hebben 19 respondenten de enquête ingevuld waarvan 47.7 % uit de primaire doelgroep komt. Dit zou een mogelijkheid kunnen zijn om het Koffiekaartje compleet digitaal te krijgen en zo het probleem van de beperkte oplages te verhelpen. Het gebruik van een e-ticket als tegoedbon wordt echter nauwelijks gedaan. Slechts 5 van de 19 respondenten hebben ooit een digitale tegoedbon cadeau gegeven aan een ander. Ze ervaren het gebruik ervan ook als onprettig.

Ook heb ik binnen de enquête wat vragen besteed aan de algemene ervaring binnen koffiebars. Uit het literatuuronderzoek is een hele lijst met gewenste eigenschappen gekomen die mensen belangrijk vinden bij het bezoeken van een koffiebar. Ik heb deze termen anders geformuleerd en dezelfde soort vragen gesteld aan mijn testpubliek. Dit in het kader van triangulatie. De resultaten van deze gewenste eigenschappen zijn zo goed als hetzelfde als het literatuuronderzoek. Mijn testpubliek geeft wel nadrukkelijk aan dat ze graag meer informatie willen ontvangen over zowel de koffie als de koffiebar. Het professionele advies ontbreekt echt bij een bezoek. Door deze enquête weet ik met grote zekerheid wat de gebruikers voor eigenschappen waarderen binnen een koffiebar, zie video een voor een compleet overzicht.

Video een: Alle gewenste eigenschappen bij een Koffiebar bezoek

Door de resultaten van de enquête heb ik besloten om het Koffiekaartje als fysiek product te behouden, het Koffiekaartje digitaal maken haalt de charme van een Koffiekaartje ontvangen als cadeau compleet weg. Ook durf ik nu met zekerheid te stellen dat de tiental eigenschappen zeker meegenomen kunnen worden in het uiteindelijk product in bijvoorbeeld de filtering van de zaken.

Afbeelding zeven: veertien van de negentien respondenten geeft aan geen digitale tegoedbon cadeau te geven

 

Persona
Uit het onderzoek, de analyse en de enquête bleek dat een drietal punten belangrijk zijn voor het vormen van de juiste persona. Deze persona is gebruikt om de obstakels van de klant beter inzichtelijk te maken via een overzichtelijke visual.

  • Primaire doelgroep van jongvolwassenen vrouwen met de leeftijd van 25 tot 34 jaar
  • Uitdagingen van de persona, die het concept kan aanpakken
  • Gevoel van de persona bij de aanschaf
  • Waarom iemand een Koffiekaartje aanschaft
  • Wat iemand belangrijk vindt bij een Koffiebar bezoek

Beneden zie je een voorbeeld van een van de persona’s vanuit de primaire doelgroep. Sanne valt nog net binnen de doelgroep. Haar vriend is een echte Koffiepurist. Ze geeft hem een Koffiekaartje cadeau omdat ze het leuk vindt om met haar vriend op pad te gaan. Ze wou graag een Koffiekaartje die zaken in meerdere steden aanbiedt. Deze bestaat echter niet.

Afbeelding acht: Persona Sanne Janssen

Customer Journey
Voor de Customer Journey zijn meerdere informatiebronnen gebruikt een daarvan is het complete gebruikersonderzoek vanuit het literatuuronderzoek, de Instagram analyse, de enquête en de persona. Ook is er informatie vanuit de stakeholders gekomen, zij hebben mij inzichten gegeven binnen de huidige processen en mij hierbij verteld tegen wat voor problemen gebruikers aanlopen.

Per Customer Journey zijn er twee processen in kaart gebracht.

  1. Probleen binnen de huidigie situatie
  2. Oplossing voor het probleem in de huidige situatie

Deze lopen ongeveer hetzelfde maar in versie 2.0 wordt een  “key-point” in het proces opgelost waardoor het aankoopgedrag van de gebruiker totaal veranderd. Dit is een goede methode om je in te leven in de problemen van de gebruiker en zo nodig een mogelijk oplossing te bedenken.

Afbeelding negen: Customer Journey een Sanne Janssen met een probleem

In de versie hieronder heeft er een kleine proces optimalisatie plaatsgevonden waardoor de klant met een tevreden gevoel de aankoop kan voltooien, terwijl er eerst geen aankoop mogelijk was.

Afbeelding tien: Customer Journey twee Sanne Janssen met de oplossing

MoSCoW
Alle bovengenoemde inzichten zijn besproken met de stakeholders van het Koffiekaartje. Vanuit deze inzichten en gesprekken is een tweede versie van de MoSCoW analyse ontstaan. Dit is een geüpdatete versie ten opzichte van de eerste versie die in mijn PID stond. In deze MoSCoW methode zijn de wensen voor een online Koffiekaartje coupon tegoedbon aangepast naar de mogelijkheid voor een dynamische printbare variant.

Afbeelding elf: MoSCoW versie twee

Onderzoek

Koffiebranche onderzoek

Onderzoek

Instagram Online Analytics

Onderzoek

Algemene enquête

Product

Persona

Product

Customer Journey

Product

MoSCoW

Conclusie

Er zijn een tiental categorieën (video een) ontstaan vanuit gewenste eigenschappen die de gebruikers belangrijk vinden binnen een koffiebar. Deze zijn mogelijk inzetbaar bij bijvoorbeeld categorisering of filtering van koffiezaken. De doelgroep is nu vastgesteld, dit zijn vrouwen van 24 tot 35 jaar. Doormiddel van de Customer Journey heb ik een aantal mogelijk oplossingen bedacht voor problemen waar gebruikers momenteel tegenaan lopen in het proces. Deze worden meegenomen naar de wireframe-fase om daar verder onderzocht te worden. De stakeholders vroegen in het begin nadrukkelijk om een volledig digitaal Koffiekaartje, door de enquête is de voorkeur van het Koffiekaartje in fysieke vorm duidelijk uitgesproken. Vanuit deze inzichten uit het onderzoek heb ik de stakeholders geadviseerd om het digitale Koffiekaartje idee te schrappen. Hiermee komt ook de eis voor de integratie binnen horecasystemen te vervallen.

Kernpunten

  • Primaire doelgroep vrouwen van 24 tot 35 jaar
  • Fysiek cadeau behouden en geen digitale vorm van een tegoedbon
  • Tiental categorieën om koffiezaken te filteren
Deelvraag 2

De vorm bepalen

Deelvraag
Hoe creëer je een Koffiekaartje waarin iedere koffiezaak een gelijke kans krijgt om op een Koffiekaartje te komen?

Aanleiding

Nu de problemen binnen het Koffiekaartje duidelijker zijn en de doelgroep vast is gesteld kan ik gaan kijken of doormiddel van een nieuw platform deze problemen kan verhelpen. Koffiekaartje wil een groter aantal zaken aanbieden en de gebruiker meer ruimte geven voor inspraak. Het is daarom belangrijk dat iedere koffiebar een gelijke kans krijgt binnen het concept, zonder dat er onderlinge concurrentie ontstaat.

Doel

  • Het mogelijk maken om gebruikers meer inspraak te geven binnen de samenstelling van een Koffiekaartje
  • Zorgen dat het Koffiekaartje niet meer stad gebonden is
  • Mogelijkheid vinden om een bulk aan Koffiezaken de ruimte te geven om zichzelf te promoten
  • Filtering/categorisering uitdenken via de bovengenoemde eigenschappen uit de onderzoeken
  • Mogelijkheden van een online Koffiekaartje configuratietool onderzoeken

Opzet

  • Randvoorwaarden vastleggen om de scope te bewaken
  • Diverse soorten online configuratietools onderzoeken
  • Met stakeholders de inzichten bespreken en vastleggen welke tools minimaals nodig zijn voor een succesvol werkend Koffiekaartje
  • De mogelijke functionaliteiten prototypen om te onderzoeken welke het beste werkt
  • De prototypes testen met experts

Resultaten

Randvoorwaarden
De randvoorwaarden zijn in overleg vastgelegd binnen diverse meetings met de stakeholders. De stakeholders willen het platformen graag gebouwd hebben via de software WordPress. De stakeholders zijn bekend met dit Content Management Systeem waardoor ze  de beheerbaarheid in de toekomst makkelijker kunnen garanderen.

Ook moet het platform met kleine aanpassingen inzetbaar zijn voor toekomstige Horekaartje concept zoals: Hamburgerkaartje, Bierkaartje of Sushikaartje. Er moet dus een systeem en vormgeving bepaald worden die voor meerdere horecatakken gemakkelijk inzetbaar is.

Het zou prettig zijn als het product rond vijf december inzetbaar is zodat ze in de periode het Koffiekaartje goed kunnen promoten tijdens sinterklaas en kerst. Dit moet echter niet de kwaliteit van de voortgang in de weg zitten.

Voor de rest geven de stakeholders mij al de creatieve vrijheid die ik nodig heb om het project goed te laten slagen.

 

Best, good and bad practice
Er is op dit moment geen concepten op de markt net zoals het Koffiekaartje. Een concurrentieanalyse is daarom niet mogelijk. Daarentegen zijn er wel diverse websites die dezelfde functionaliteiten hebben die voor het Koffiekaartje ook gewenst zijn. Ik heb bewust gekeken naar een breed aanbod in platformen om zo vanuit verschillende branches wat te leren.

Bij het Koffiekaartje is het van groot belang dat er een groot maar eerlijk aanbod is. Er worden in de toekomst veel bars aangeboden via het Koffiekaartje maar deze moeten niet te veel onderling concurreren. Iedere zaak verdient namelijk gelijke kansen om zich te promoten binnen het platform. Bij veel platformen wordt dit onderscheid gemaakt doormiddel van reviews, dit lijkt me echter geen slim idee omdat je hier juist onderlinge concurrentie mee creëert. Op het Koffiekaartje zijn reviews namelijk overbodig, alleen de beste zaken verdienen een plekje binnen dit concept.

Bedrijven die koning zijn in het aanbieden van een bulk aan aanbieders zijn Airbnb en Thuisbezorgd.  Het zoeken op afstand is een functionaliteit die ze alle twee super toepassen. Via het invullen van enkele zoekcriteria word je vliegensvlug naar de juiste pagina gestuurd binnen de website waarin je een goed gefilterd overzicht ziet van alle aanbieders. Bij Airbnb valt er vooral veel te leren van de filtering. Binnen de “first fold” op de overzicht pagina kan je namelijk alleen filteren op eigenschappen die bij de residentie passen. Dit sluit perfect aan bij de tiental eigenschappen die uit het koffiebranche onderzoek zijn gekomen.

Afbeelding twaalf: Best practise Airbnb filtering methode

Ook is het samenstellen van een Koffiekaartje een functionaliteit die in de toekomst geïmplementeerd gaat worden. Daarom heb ik ook gekeken naar platformen met een configuratietool. Hier is zowel onderzoek gedaan binnen de automobielen-en drukwerksector. De conclusie was al snel gemaakt dat dit soort configuraties te ver van de scope van het Koffiekaartje afliggen. Dit zijn allemaal tools waarmee je keuzes maakt door meerdere stappen te doorlopen. Het Koffiekaartje bestaat echter alleen uit het selecteren van enkele zaken. Dit kan gemakkelijk gedaan worden door een simpele toevoegen aan winkelmand knop. Het is gebruiksvriendelijker om een simpele oplossing te gebruiken dan, een complexe configurator.

Samengevat zijn dit de belangrijkste inzichten vanuit de diverse bedrijven.

Afbeelding dertien: Belangrijkste inzichten best, good, bad practise analyse

Co-reflection
Alle inzichten en onderzoeken zijn uiteindelijk besproken met de stakeholders doormiddel van een co-reflection. In deze meeting is een Minimum Viable Product (MVP) vastgelegd voor het Koffiekaartje. Een co-reflection is een perfecte manier om wensen van de opdrachtgever te koppelen met de inzichten van mijn onderzoeken.  De belangrijkste inzichten van dit gesprek waren als volgt.

  • De stakeholders willen graag reviews van de koffiezaak weergeven in het platform. Ik heb aangeven dat dit een slecht idee is omdat je hier mee onderlinge concurrentie creëert. Op het Koffiekaartje staan alleen de beste zaken van Nederland, waarom zijn reviews dan nodig? Ze vonden dit een scherp punt en zijn hiermee akkoord gegaan
  • Het filteren van Airbnb lijkt ons beide de beste oplossing, dit is perfect te combineren met de eigenschappen uit het brancheonderzoek
  • Omdat de horeca weer gaat sluiten is de deadline van vijf december geschrapt en neem ik extra tijd om het product beter te maken
  • De configuratietools uit de best, good and bad anlyse zijn inderdaad veel te complex. Ik ga kijken of ik een gebruiksvriendelijker alternatief kan ontwerpen

Als volgt hebben we besproken welke functionaliteiten minimaal nodig zijn om een Koffiekaartje in de “nieuwe” vorm te lanceren.

  • Zoekfunctie
  • Filtersysteem op basis van de eigenschappen uit het onderzoek.
  • Manier om handmatig een kaartje te vullen
  • Kaartje om de zaken op afstand te bekijken
  • Winkelmandje om je keuzes in te zien
  • Afreken mogelijkheid

Dit is de minimale functionaliteit die je nodig hebt om een Koffiekaartje te bestellen. Al deze functionaliteiten moeten nu uitgewerkt worden tot bruikbare pagina’s via een iteratieve wireframe-fase.


Wireframes
Om alle functionaliteiten in te bouwen heb ik minimaal vijf schermen nodig. Deze functionaliteiten zijn ontstaan vanuit het gebruikersonderzoek met de daarbij horende MoSCoW-methode, de lijst met randvoorwaarden en de inzichten van de co-reflection sessie.

  • Homepagina met zoekfunctie
  • Pagina met overzicht van de koffiebars met filtering
  • Pagina met een uitgelichte bar
  • Winkelmand pagina
  • Kassa pagina

De functionaliteit uit de MoSCoW heb ik in meerdere wireframes laten terugkomen om zo via een wireframe proces de juiste vorm te bepalen. Het voordeel hiervan is dat je efficiënt zonder visuele afleiding deze keuzes kan maken.

Door te klikken op de volgende en vorige knop kan je door de wireframes navigeren. Gebruik je muis om te scrollen door de webpagina’s.

Prototype een: Functionaliteiten omzetten naar pagina’s

Uiteindelijk is er een selectie ontstaan van vijf unieke schermen die het meeste potentie hebben. Deze zullen na de expert review in het designproces verder uitgewerkt worden.

Prototype twee: Uiteindelijke wireframes

Expert review
Tijdens de gehele onderzoek- en wireframe-fase heb ik de experts binnen het bedrijf goed up-to-date gehouden. Nadat ik mijn eerste wireframes af had heb ik mijn wireframekeuzes met ze doorgesproken en uitgebreid om feedback gevraagd. Vooral de introductie van het concept met de lijntjes werd zeer lovend ontvangen, echter waren er ook een hoop verbeter punten. UX-designer Mike gaf aan dat de edities binnen het Koffiekaartje altijd populair zijn. Het een moet het andere niet uitsluiten adviseert hij. Het lijkt Mike een goede idee om af en toe toch nog een editie te verkopen die op basis van de experts van het Koffiekaartje is samengesteld. Omdat de horecazaken toch al aangesloten zijn bij het platform kan dit met een enkele kliks online samengesteld worden. Ook mist hij op de “single horecazaak pagina” een beetje het toevoegen van de zaak. Er staat een plus icoontje in het klein, hij adviseert mij om vaker een voeg toe aan kaartje knopje toe te voegen om de Click-Through Rate binnen het platform te vergroten.

Grafisch ontwerpster Laura adviseert mij om ergens in het platform de logo’s van het bedrijf te verwerken. Dit is voor de klant een belangrijk beeldmerk omdat dit ook op het kaartje terugkomt. Al deze feedback is doorgevoerd in een versie 2.0 van het prototype.

Onderzoek

Randvoorwaarden

Onderzoek

Best, good and bad practice

Onderzoek

Co-reflection

Product

Wireframes

Onderzoek

Expert review

Conclusie
De concurrentie binnen het platform wordt minimaal gehouden doordat er geen enkele manier van concurrentie mogelijk is door reviews. Iedere zaak krijgt dezelfde kansen om zichzelf te promoten doormiddel van beeldmateriaal, een omschrijvende tekst van de bar en de unieke eigenschappen waarop gefilterd kan worden.

De vorm biedt potentie tot het oplossen van de rest van de onderzoeksvragen, middels een design fase is het nu tijd om te gaan onderzoeken of deze vorm ook inzetbaar is voor andere Horekaartje takken zoals bijvoorbeeld een Bierkaartje.

Kernpunten

  • WordPress als Content Management Systeem (CMS)
  • Airbnb en Thuisbezorgd als inspiratie voor user-experience
  • Geen reviews
  • Doormiddel van beeld een bar zichzelf de kans geven om te promoten
  • Het blijven aanbieden van edities
  • Vijf uitgekozen wireframes die omgezet worden naar een ontwerp

 

Deelvraag 3

Soortgelijke concepten sneller lanceren

Deelvraag
Hoe kan ik het Koffiekaartje ontwerpen zodat Horekaartje concepten zoals Koffiekaartje in de toekomst sneller gelanceerd kunnen worden ?

Aanleiding
Vanuit de onderzoeken en wireframes bij de vorige deelvraag, heb ik een goed beeld gekregen hoe ik de concurrentie kan minimaliseren binnen het concept. Vanuit de experts van Gravity Media heb ik goede feedback kregen waar ik nog verbetering kan halen binnen de wireframes. De vorm biedt voldoende potentie maar nu is het belangrijk om te kijken of hij ook goed bruikbaar is voor andere Horekaartje concepten zoals bijvoorbeeld een Bierkaartje. Er gaat nu gekeken worden hoe design de wireframes kan ondersteunen. Design is er namelijk om de gebruiksvriendelijkheid te verreiken en niet om het te verslechteren.

Doel

  • Expert review feedback doorvoeren
  • Design opbouwen vanuit een designsysteem
  • Wireframes inzetbaar maken voor diverse horecabranches met minimale aanpassingen

Opzet

  • Design pattern research doen vanuit de bedrijven uit de best, good, bad practise analyse
  • Designsysteem onderzoeken van Google en Airbnb
  • Prototypes verbeteren vanuit de bovenstaande onderzoeken
  • Iteratief een design ontwikkelen dat inzetbaar is voor meerdere branches

Resultaten

Design pattern research
Tijdens dit onderzoek is er onderzocht hoe bedrijven uit de best, good, bad practise analyse hun design patronen opbouwen. Airbnb werkt met een stapsgewijs spacing-systeem, dit houdt in dat de marges opgebouwd worden in stappen die je door het getal vier kan delen. Bij afbeelding veertien zie je een voorbeeld hoe deze stappen worden opgebouwd.

Afbeelding veertien: Design system van Airbnb

Door een spacing-systeem toe te passen in je ontwerpen creëer je een bepaald stramien wat rust brengt in je lay-out. Airbnb probeert ook het gebruik van buttons zoveel mogelijk af te wisselen. Uit een recent onderzoek via een A/B test is namelijk gebleken dat meer verhuurders zich aanmelden bij het platform toen ze een knop breder hadden gemaakt. Airbnb probeert daarom deze afwisseling in hun webpagina’s goed door te voeren.

Thuisbezorgd heeft recent een complete make-over gehad. Ze zijn na deze make-over de prioriteit van beeld in het ontwerp veel hoger gaan plaatsen. Voorheen was de enige mogelijkheid om je restaurant te promoten doormiddel van je logo en een rating. Na de facelift hebben de bedrijven ook de mogelijkheid om hun product te verkopen doormiddel van een sfeer foto. Hiermee zie je in een oogopslag wat je bij de zaak kan bestellen. De reviews zijn een stuk minder prominent in beeld en er is meer ruimte vrijgekomen voor de unieke productcategorieën die een zaak aanbiedt (afbeelding vijftien).

Afbeelding vijftien: Thuisbezorgd voor en na het redesign

Uit dit onderzoek heb ik geleerd hoe ik een spacing- systeem moet toepassen, dat het afwisselen van diverse soort knoppen belangrijk is en hoe ik sfeerbeelden goed moet toepassen binnen een overzichtspagina. Zowel Airbnb als Thuisbezorgd gebruiken deze sfeerbeelden perfect.

 

Design guidelines
Het grid is ontstaan op basis van het stappen systeem uit het design pattern onderzoek. Omdat een vijftienpuntsgrid beter aansluit bij mijn ontwerp maak ik niet gebruik van dezelfde intervallen als Airbnb.

De font groottes komen af van het designsysteem van google genaamd Material Design. Per Horekaartje wil ik een ander font gebruiken wat bij het concept past. In mijn ontwerpen gebruik ik overal Google fonts, dit omdat dit voor het implementeren online gemakkelijk is en je hiermee geen last hebt van copyright rechten.  Omdat het aanschaffen van rechten voor een lettertype een hoop geld kan kosten is het voordeliger om gratis lettertypes van Google te gebruiken. Ook heeft een Google een tooltje genaamd Type Machine waarmee je per lettertype de beste lettertypeformaten kunt berekenen. Dit tooltje zet de formaten van het lettertype om naar de meest recente Google Material webeisen (afbeelding zestien).


Afbeelding zestien: Lettertype font-size advies voor het Merriweather en Inter lettertype

In de guidelines staan nu de kleuren en de lettertypes van het concept Koffiekaartje. Per Horekaartje concept gaat dit nog verschillen. Bij een Bierkaartje hoort namelijk een andere huisstijl dan bij een Koffiekaartje.

Afbeelding zeventien: Design guidelines vanuit onderzoek

 

Wireframe naar design
Bij het eerste design is er gekozen om de beste selectie uit de wireframe-fase verder door te ontwikkelen en vanuit daar verder te kijken naar optimalisaties. Als eerst is de feedback van de experts doorgevoerd in het wireframe. Daarna ben ik stap voor stap de wireframes visueler gaan maken.

Dit is gedaan met de guidelines als basis. In het prototype hieronder zie je het proces waarin ik steeds verder ben gaan door ontwikkelen om zo mijn uiteindelijke huisstijl en pagina’s te ontwikkelen. Tijdens het ontwerpen van alle schermen is er bewust de keuze gemaakt om de kleuren, het lettertype en de foto’s van de zaken de sfeer te laten bepalen. Ik hoop op deze manier door de kleuren en lettertypes te veranderen de stijl per Horekaartje concept eigen te kunnen maken. In de screenshot zie je een overzicht van alle gemaakte ontwerpen die nodig waren om het eindresultaat te behalen (afbeelding achttien).

Afbeelding achttien: Overzicht alle ontwerpen in Adobe XD

Iedere pagina is iedere keer stapsgewijs door ontwikkeld om het gewenste eindresultaat te behalen. Zie prototype drie om het ontwikkelproces van de homepagina te zien.

POC drie: Design iteraties homepagina

Na het bovenstaande proces meerdere keren door lopen te hebben zijn dit de uiteindelijke ontwerpen geworden.

POC vier: Uiteindelijke ontwerp

 

Usablity test
Deze uiteindelijke ontwerpen zijn getest met de doelgroep door middel van een scenario testing usability test. In het begin worden er een aantal scenario’s geschetst die de gebruiker moet kunnen voltooien. Het eerst scenario gaat als volgt; “Je wilt een kopje koffie bij Coffeelab drinken, dit ligt in Eindhoven. Je voegt deze toe aan je persoonlijke Koffiekaartje.” De gebruiker moet enkele van deze opdrachten voltooien waarna ze vervolgens enkele korten vragen moeten beantwoorden om te valideren of ze alle informatie goed hebben opgenomen en de opdracht succesvol hebben uitgevoerd.

Deze test is vervolgens opgestuurd naar een tiental gebruikers uit de doelgroep. Echter was het drop-out percentage redelijk hoog, welgeteld 40% van de gebruikers is afgehaakt na stap een. Na deze drop-out waren de resultaten wel erg positief. Iedere gebruiker heeft vanaf dat moment de complete test feilloos doorlopen.

Het belangrijkste leermoment uit de test is dat de indeling van de categorisering nog niet goed genoeg overkomt. Bij de vraag: “Ik kan de koffiezaken filteren op de volgende onderwerpen” wordt een groot deel van de mogelijke filter opties niet aangevinkt. Hier moet een versie 2.0 van gemaakt worden en deze dient opnieuw getest te worden. De gebruikers geven aan dat het perfect werkt met een minimaal aantal kliks. Ze bevelen het Koffiekaartje aan.

 

Design iteraties
Het ontwerp is bewust heel visueel opgebouwd. In het ontwerp wat al eerder gemaakt is heeft beeldmateriaal, typografie en kleur de overhand. Door de koffiebarren naar een kroeg of sushirestaurant te veranderen, de kleuren en het lettertype aan te passen creeër je snel een nieuwe basis voor een toekomstig Horekaartje. Ik heb dit trucje bij twee branches uitgeprobeerd. De volgende taak is nu om te gaan nadenken hoe ik dit technisch het beste kan realiseren.

Video twee: Drie Horekaartje concepten

    Onderzoek

    Design pattern research

    Product

    Design guidelines

    Product

    Wireframe naar design

    Onderzoek

    Usability test

    Product

    Design iteraties


    Conclusie
    Vanuit de wireframes, het design system en het guideline onderzoek is er een perfecte basis  ontstaan om snel pagina’s te ontwerpen die consistente zijn in design. Door deze onderzoeken en iteraties is er een sterke basis ontstaan om het Koffiekaartje digitaal mee te kunnen ontwikkelen. Er moet alleen nog gekeken worden naar de technische implicaties. Door de usability test weet ik dat de filtering nog een extra design slag kan gebruiken. De resultaten duiden aan dat deze momenteel ondergeschikt is. De rest van het platform werkt compleet naar behoren, de gebruikers kunnen namelijk gemakkelijk een eigen Koffiekaartje samenstellen. Ook is tijdens dit onderzoek met de stakeholders de keuze gemaakt om het Koffiekaartje zaakjes van vier per kaartje naar vijf te verhogen.

     

    Kernpunten

    • Vier uiteindelijke pagina’s ontworpen
    • Ontwerpen getest en de filtering is ondergeschikt bevonden
    • De hoofdpagina kan met minimale aanpassingen doorontwikkeld worden naar een Bierkaartje en Sushikaartje ontwerp
    • Koffiekaartje grootte naar vijf koffiebars
    Deelvraag 4

    Realisatie Horekaartje platformen in de toekomst

    Deelvraag
    Met welke technische oplossingen kan ik er voor zorgen dat een Koffiekaartje in de toekomst Horekaartje platformen sneller kan lanceren?

    Aanleiding
    Nu de onderzoek- en ontwerpfase compleet is afgerond is het tijd om te onderzoeken hoe dit technisch te realiseren is. In het begin is er nauwkeurig onderzoek gedaan zodat ik geen tijd verspil met oplossingen ontwikkelen die geen potentie hebben. Om de beheerbaarheid te waarborgen is er een GIT omgeving opgezet met een custom WordPress template. Via XAMPP is er een lokale WordPress omgeving aangemaakt waarmee via VS-code de website is gebouwd.

    Doel

    • Technische implicaties verhelpen en onderzoeken met POC’s
    • Onderzoeken welke toevoegingen nodig zijn om WordPress als CMS te gebruiken

    Opzet

    • Onderzoeken wat de mogelijkheden zijn om CSS kleuren dynamisch aan te passen
    • Onderzoeken of het WordPress CMS dekkend genoeg is of dat er plug-ins of API’s nodig zijn
    • CMS uittesten of de werking volstaat
    • Onderzoeken hoe je stijling dynamisch aanpast in de backend van een website

    Resultaten

    Dynamisch CSS inladen onderzoek
    Om CSS kleuren aan te passen via de backend zijn er meerdere oplossingen mogelijk. Echter heeft iedere mogelijkheid zijn eigen technische implicaties. Daarom is er eerst een klein onderzoek gemaakt om de mogelijke opties af te wegen. Hieronder vertel ik per methode de voor-en nadelen om op het einde de gekozen oplossing toe te lichten.

    Afbeelding negentien: Vergelijking dynamische CSS mogelijkheden

    ACF lijkt me voor nu de beste optie, de WordPress optie zit te ver verstopt binnen WordPress dit gaat ten koste van de gebruiksvriendelijkheid. De PHP stylesheet optie viel gelijk af omdat hij maar door enkele browsers ondersteunt wordt. Het volgende probleem wat in de POC opgelost moet worden is om te onderzoeken hoe ik kleuren donkerder of lichter kan maken met code maar dat het toch aanpasbaar blijft in het CMS. In het ontwerp zitten namelijk donkere en lichte varianten van de themakleur verwerkt.

     

    CMS ontwikkelen voor herbruikbare websites
    Tijdens eerdere meetings met de stakeholders hebben we samen de randvoorwaarden van het concept doorgesproken en gedocumenteerd. De stakeholders willen het platformen graag gebouwd hebben via de software WordPress. De stakeholders zijn bekend met dit Content Management Syteem waardoor we de beheerbaarheid in de toekomst makkelijker kunnen garanderen.

    Ik heb aangegeven dat standaard WordPress niet genoeg functionaliteiten bevat om een dusdanig complex platform te bouwen. De stakeholders willen al langer een keer experimenteren met de plug-in Advanced Custom Fields. Dit is een aanvulling op WordPress waarmee je volledige controle krijgt over de WordPress bewerkingsschermen en de custom field data. Ik wil hier al langer meer over leren. Dit lijkt me daarom een perfecte kans.

    Een website hergebruiken binnen WordPress werkt het beste doormiddel van een maatwerk gebouwd thema. Via een maatwerk thema kan je de website helemaal bouwen naar jouw eigen specificaties via HTML/CSS en PHP. Zonder dat je allemaal onnodige plug-ins en toevoegingen moet gebruiken die de laadsnelheid en de performance van de website érg vertragen.

    Een page-builder zoals elementor voltstaat bij deze opdracht niet omdat er veel maatwerk in het project zit. Voor nu lijkt mij daarom de combinatie van ACF en WordPress de beste oplossing. Ik gebruik binnen deze opdracht niet als een simpele kant en klaar tool, maar als basis om mijn thema compleet zelf handmatig te realiseren met PHP.

     

    Hoe bouw je een CMS goed op voor het Koffiekaartje?
    Deze POC bestaat uit drie onderdelen die de volledige basis vormt om verder te kunnen uitbouwen naar een compleet dynamisch Koffiekaartje.

    • Custom WordPress thema
    • Inbouwen van ACF
    • Inbouwen van een ACF-site opties pagina
    • Custom Post Type

    Dit zijn de bijzondere onderdelen. Natuurlijk is er uitgebreid rekening gehouden met een goede datastructuur, het koppelen van SCSS, en ruimte voor custom templates en pagina’s. In de video hieronder leg ik het opzetten van de structuur uit doormiddel van voorbeeldjes.

    Video drie: Uitleg opbouw CMS systeem

     

    Dynamische stijling
    Hoe bouw je CSS code op zodat de look en feel gemakkelijk aanpasbaar is in de back-end? Het antwoord daarop is voor de meeste onderdelen heel simpel, namelijk ACF. Met ACF kan je zelf variables aanmaken die je via de backend kan aanpassen. Deze roep je dan aan via PHP in je HTML-code op. Een goed voorbeeld hiervan is het inladen van andere lettertypes. Hieronder een code voorbeeld hoe dit is opgebouwd.

    <!-- Google Font URL dynamisch aanpassen -->
    <?php $horekaartjeFont = get_field('google_font_link', 'option'); ?>
    <?php if( $horekaartjeFont ) : ?>
       <link href="<?php the_field('google_font_link', 'option'); ?>" rel="stylesheet">
    <?php endif; ?>
    
    <!-- CSS var aanroepen met de fontnaam -->
    <style>
    body{
       <?php $horekaartjeFontName = get_field('google_font_name', 'option'); ?>
          <?php if( $horekaartjeFontName ) : ?>
             --header-font: <?php the_field('google_font_name','option'); ?>;
          <?php endif; ?>
       }
    </style>
    
    <!-- CSS var root om altijd een fallback font te hebben -->
    :root{
    --header-font: 'merriweather';
    }
    
    <!-- CSS var aanroepen in SCSS zodat hij in de code meeveranderd -->
    $header-font:  var(--header-font) !default;

    Code voorbeeld een: ACF dynamisch aanpassen via een CSS variables

    Met de rest van de variables is het proces ongeveer hetzelfde. Alleen zijn de stappen met een CSS-variables niet nodig. De kleuren dynamisch aanpassen is echter een compleet ander verhaal. Voor dit moest een complexe HEX-code naar HSL function geschreven worden. Dit is het beste uit te leggen in een video omdat dit een complex deel code is.

    Video vier: Uitleg werking HEX code naar HSL met CSS variables

    Onderzoek

    CSS dynamisch aanpassen

    Onderzoek

    CMS opbouw

    Product

    POC: CMS

    Product

    POC: Dynamische stijling


    Conclusie
    Door een combinatie van de bovenstaande onderzoeken en POC’s is het nu zéér gemakkelijk om een nieuw Horekaartje platform op te bouwen. Door het thema te installeren, vijf input velden in te vullen en op opslaan te drukken bouw je binnen een minuutje een compleet nieuw concept op zoals bijvoorbeeld een Bierkaartje! Deze basis is uitermate geschikt om een dynamisch kaartje mee door te ontwikkelen, de CMS-basis zal in deelvraag vijf verder uitgebouwd worden.

    Video vijf: Demonstratie Koffiekaartje omzetten naar een Bierkaartje

     

    Kernpunten

    • ACF als toevoeging op het WordPress CMS
    • CSS dynamisch inladen via HSL met CSS-variables
    • Horekaartje platform ombouwen binnen slechts één minuut
    Deelvraag 5

    Een kaartje zelf samenstellen

    Deelvraag
    Hoe creëer je een Koffiekaartje waarin een klant zijn eigen kaartje kan samenstellen?

    Aanleiding
    Om alle problemen van het Koffiekaartje te verhelpen is het belangrijk om de gebruiker complete vrijheid te geven in de samenstelling van het kaartje. Het ontwerp is uitgewerkt, getest en goed bevonden. De laatste taak om de hoofdvraag te beantwoorden is dan ook om te kijken hoe dit technisch in zijn werking gaat. Vanuit deelvraag vier is er een goede basis ontwikkeld en is het mogelijk om horecazaken toe te voegen aan het platform. Deze moeten nu online aan een kaartje toegevoegd en betaald kunnen worden.


    Doel

    • Filteren op locatie mogelijk maken
    • Zorgen dat de gebruiker zelf een Koffiekaartje online kan samenstellen en bestellen
    • Zorgen dat een bestelling makkelijk te printen is

    Opzet

    • Proof of Concept: Hoe filter je een Custom Post Type op locatie?
    • Proof of Concept: Hoe stel je online een Koffiekaartje samen?
    • Proof of Concept: Hoe print je een online dynamisch Koffiekaartje?

     

    Hoe filter je een Custom Post Type op locatie?
    Om de zaken goed te kunnen filteren is ook een locatiefilter ontwikkeld en getest in het ontwerp. Op deze manier stap je niet compleet af van het locatie gebonden concept. Dit bouwen is echter een stuk complexer. Er is gebruik gemaakt van de Google Maps API en deze is gekoppeld met ACF-locatie data. Deze data uit ACF werkt helaas niet met longitude en latitude. Iets wat Google Maps wel doet. Ik heb de volgende elementen gebouwd om het zoeken via locatie gebruiksvriendelijk en werkend te krijgen.

    • Input veld met afstandsselectie
    • Functie die een straatnaam omzet naar locaties met longitude en latitude
    • Proximity search op basis van KM afstand hemelsbreed
    • Kaartje met horecazaken gefilterd op afstand
    • Overzicht met horecazaken gefilterd op afstand

    Het tonen van de gehele code is teveel om in snippets te verwerken het belangrijkste stukje code deel ik wel graag. Hieronder staat de “geodecoder” die een adres kan omzetten naar longitude en latitude en doormiddel van een input veld de afstand hemelsbreed kan berekenen tussen twee locaties. De rest van de code bespreek ik in video zes.

    <?php
    // Adres omzetten naar long en lat
    function horecaartje_get_lat_and_lng($origin){
        $api_key = "secret_key";
        $url = "https://maps.googleapis.com/maps/api/geocode/json?address=".urlencode($origin)."&key=".$api_key;
        $result_string = file_get_contents($url);
        $result = json_decode($result_string, true);
        $result1[]=$result['results'][0];
        $result2[]=$result1[0]['geometry'];
        $result3[]=$result2[0]['location'];
        return $result3[0];
    }
    
    
    // Afstand tussen twee locaties berekenen
    function horecaartje_get_distance($origin, $address_lat, $address_lng, $unit){
    
    
        // Long en Lat uit de locatrie halen
        $origin_coords = horecaartje_get_lat_and_lng($origin);
        $lat1 = $origin_coords['lat'];
        $lng1 = $origin_coords['lng'];
    
    
        // Long en lat uit input veld halen
        $lat2 = $address_lat;
        $lng2 = $address_lng;
    
    
        // Afstand tussen de twee berekenen hemelsbreed
        $theta=$lng1-$lng2;
        $dist = sin(deg2rad($lat1)) * sin(deg2rad($lat2)) + cos(deg2rad($lat1)) * cos(deg2rad($lat2)) * cos(deg2rad($theta));
        $dist = acos($dist);
        $dist = rad2deg($dist);
        $miles = $dist * 60 * 1.1515;
        $unit = strtoupper($unit);
    
    
        // Optie voor metrisch omzetten
        if ($unit == "K"){
            return ($miles * 1.609344);
        }
        else if ($unit =="N"){
            return ($miles * 0.8684);
        }
        else{
            return $miles;
        }
    }

    Code voorbeeld twee: Proxomity search adres naar long and lat

    Video zes: Zoeken op locatie

     

    Dynamisch een kaartje vullen
    Als we de functionaliteit vertalen naar burgertaal is het dynamisch vullen niks anders dan een winkelmandje vullen met maximaal vijf producten.
    De producten zijn in dit concept alleen geen echte producten maar horecazaken. De meest gebruikte webshop plug-ins voor WordPress zijn Woocommerce of EDD. Ik moet een van deze toevoegingen koppelen om een winkelmandje en betaalsysteem gemakkelijk te koppelen aan de website. De keuze is dan ook al snel op Woocommerce gevallen omdat deze het meest actief gebruikt wordt er hierdoor informatie over de code te vinden is.

    Ik heb zitten twijfelen om de Horecazaken als Woocommerce product in de website te zetten. Echter zit je dan té erg gebonden aan de code van Woocommerce en is het niet gemakkelijk om dingetjes aan te passen in de code. Ik heb daarom een functie geschreven waarmee ik de Custom Post Type informatie omzet naar Woocommerce data om zaakjes zo toe te kunnen voegen en te bestellen via een winkelmandje. Deze keuzes heb ik besproken met de developers binnen Gravity Media, zij delen de mening om voor een Custom Post Type te gaan.

    Het gebruiken van een Custom Post Type heeft als voordeel dat je qua front-end complete vrijheid hebt om de data en elementen toe te voegen die je zelf wil. Binnen Woocommerce heb je deze code vrijheid helaas niet. In de onderstaande video ga dieper in op dit onderwerp.

    Video zeven: Custom Post Type Data omzetten naar een Woocommerce product

    Door Woocommerce te koppelen met een Custom Post Type behoud ik de vrijheid om qua front-end en back-end te bouwen wat ik wil. Terwijl ik de voordelen heb qua administratie en betalingen van Woocommerce.

     

    Handmatig samengesteld kaartje laten drukken
    De mede-stagiair bij Gravity Media genaamd Tom, heeft een drukwerkportaal gebouwd waarmee je drukwerk automatisch kan laten opsturen naar een drukkerij. Tijdens de stageperiode zijn Tom en ik tot de conclusie gekomen dat onze twee stageopdrachten perfect te combineren zijn. We hebben onze handen ineengeslagen om samen een Horekaartje print plug-in te bouwen. Hiermee worden Koffiekaartje bestellingen automatisch omgezet naar een printbaar PDF dit is gebeurd via een print API genaamd dompdf.  Deze printbare bestanden worden via het drukwerkportaal van Tom direct ontvangen en doorgestuurd naar de drukkerij die vervolgens het geprinte kaartje opstuurt naar de klanten.

    Video acht: Order data omzetten naar een printbaar Koffiekaartje zodat deze gedrukt kan worden

    Afbeelding twintig: Dynamisch samengesteld Koffiekaartje met uniek ID

    Product

    MoSCoW

    Onderzoek

    Randvoorwaarden

    Product

    POC: Locatie zoeken

    Product

    POC: Kaartje vullen

    Product

    POC: Kaartje printen


    Conclusie
    Door de locatie zoekbalk is het mogelijk om zaakjes nog beter te kunnen filteren. Waardoor gebruiker nog beter een koffiebar kan zoeken die bij zijn of haar wensen past. Ook is het kaartje nu automatisch printbaar.

    Door het gebruik van de API ‘dompdf’ is het mogelijk geworden om een PDF te genereren met de exacte specificaties die een drukkerij, in dit geval Probo, nodig heeft om het bestand te drukken en te versturen. Via dit proces is het nu mogelijk om de gebruikers zelf een Koffiekaartje te laten samenstellen. Via een automatisch proces wordt deze order data omgevormd naar een printbaar Koffiekaartje wat direct opgestuurd wordt naar het printportaal van mede-stagiair Tom.

     

    Kernpunten

    • Locatie zoekfunctie
    • Koffiezaken toevoegen en betalen via Woocommerce
    • Plug-in die het kaartje samenstelt en verstuurd naar een drukker
    • Het verzenden wordt door de drukker geregeld

    Conclusie

    Gedurende de stageperiode is er gezocht naar een antwoord op de hoofdvraag: “Hoe kan het Koffiekaartje meegroeien met het toenemende aantal koffiezaken dat wil deelnemen aan het Koffiekaartje?”.

    Om antwoord te krijgen op deze vraag is de hoofdvraag opgedeeld in een aantal losse deelvragen. Deze deelvragen zijn ieder onderzocht door onderzoeken uit te voeren met diverse onderzoeksmethodes. Deze methoden zijn van tevoren opgesteld in een schema dat zich parallel aan het onderzoek heeft ontwikkeld.

    Er zijn diverse literatuuronderzoeken gedaan zoals het koffiebranche onderzoek om informatie op te doen die al bekend is.  Vervolgens zijn er ook veldonderzoeken zoals de enquête gedaan om tot  nieuwe inzichten te komen. Met verschillende onderzoeken naar randvoorwaarden en soortgelijke tools is er in samenwerking met de stakeholders een lijst van functionaliteiten samengesteld die zeker in de tool moesten komen. Om het geheel uiteindelijk vorm te geven zijn vanuit deze lijst pagina’s ontworpen die al deze functionaliteiten bevatten. Dit heeft uiteindelijk de basis van het platform gevormd.

    Deze pagina’s zijn uiteindelijk compleet uitgewerkt via een iteratief Proof of Concept traject waarin is onderzocht op welke manier de functies het beste gerealiseerd kunnen worden.

    Afbeelding eenentwintig: Uiteindelijke ontwerp koffiebar overzichtspagina

    Binnen dit complete systeem is nu plek voor oneindig veel Koffiebars.  Via handige filters en een zoekfunctie is het nu mogelijk om binnen een aantal klikken een Koffiekaartje compleet zelf samen te stellen en te bestellen. Na betaling wordt deze order data omgezet naar een printbaar kaartje dat automatisch verstuurd wordt naar de drukker via een speciale Koffiekaartjes plug-in.

    Als kers op de  taart is er in het hele project rekening gehouden dat dit concept gemakkelijk inzetbaar is voor toekomstige Horekaartje concepten zoals bijvoorbeeld een Bierkaartje. Via een speciale instellingen pagina in het thema is het mogelijk om een nieuwe Horekaartje websites binnen enkele minuten te realiseren.

    Het eindresultaat na de stageperiode bestaat uit een platform wat het mogelijk maakt om gebruikers eigenhandig een kaartje te laten samenstellen. Dit haalt het gehele lobbyproces om een nieuwe editie samen te stellen weg. De keuze ligt nu bij de gebruiker. Ook is het platform zo ontwikkeld dat er oneindig veel koffiebars toegevoegd kunnen worden. De Front-end kan na mijn stage compleet afgebouwd worden op basis van een uitgebreid ontwerp dat is uitgewerkt in Adobe XD.

    Koffiekaartje is nu klaar voor de groei die het voor ogen heeft. Hoe kan het Koffiekaartje meegroeien met het toenemende aantal koffiezaken dat wil deelnemen aan het Koffiekaartje? Via een platform waar ruimte is voor een oneindig aantal aan koffiebars waarin gebruikers zelf hun kaartje kunnen samenstellen. Gravity Media heeft mij aangenomen om Koffiekaartje na mijn stage af te bouwen als werknemer binnen het bedrijf. Dit is naar mijn mening het grootste compliment wat je kan krijgen over je werk.

    Het doel van de stageperiode is daarmee dan ook naar tevredenheid behaald.

    Video negen: Uiteindelijke systeem in werking

     

    Aanbeveling

    Om Gravity Media verder op weg te helpen is er een planning opgesteld in Trello. Hierin staan enkele aanbevelingen die nodig zijn om het slagen van het Koffiekaartje platform te waarborgen. Er zijn nog meerdere taken die uitgevoerd moeten worden om het platform compleet te kunnen lanceren.  In dit Trello bord is ook een uren indicatie gemaakt om in te schatten hoelang het duurt voordat het platform live kan.

    Belangrijke aanbevelingen hierin zijn als volgt:

    Aanmelden voor Koffiekaartje pagina
    Het is belangrijk om nieuwe koffiebars te werven. Er zijn nu pas twaalf zaken aangesloten bij het Koffiekaartje concept. Het platform is niet geschikt om maar vijf zaken aan te bieden. Het is juist ontworpen om een bulk aan zaakjes weer te geven. Ik heb tussentijds daarom goed nagedacht hoe het concept nieuwe klanten kan werven. Er staan natuurlijk al wat zaken in de wachtrij. Maar een mogelijkheid om je aan te melden voor het concept lijkt mij het meest ideaal. Het horecaconcept Bistroo voert dit online uitstekend uit. Het is verstandig om een soort gelijk aanmeld formulier in te bouwen bij het Koffiekaartje.

    Afbouwen Front-end
    De back-end in het systeem is volledig operationeel. Helaas is er daardoor niet voldoende tijd geweest om de Front-end compleet af te bouwen. Ik heb Gravity Media een uitgebreid Adobe XD document overhandigd met daarin ontwerpen van hoe alle pagina’s die nog afgebouwd moeten worden afgebouwd eruit moeten komen te zien. Deze kunnen via HTML/CSS en ACF afgebouwd worden.