Trampoline Ingraven.nl

Bezoekers kunnen op TrampolineIngraven in drie minuten een offerte op maat samenstellen voor het ingraven van een trampoline.

Het is winter 2019-2020 als de mannen van Trampolinewinkel.nl contact met ons zoeken om de mogelijkheden te bespreken voor een nieuw project. Ze hebben een enorme showtuin voor de winkel liggen waar meer dan 40 speelhuisjes en trampolines uit te proberen zijn. Naast verkoop is Trampolinewinkel.nl zich de afgelopen jaren ook gaan toeleggen op het ingraven van de door hun verkochte trampolines. Ze willen daar meer bekendheid aan geven en het offerteproces vereenvoudigen.

Ze hadden de domeinnaam trampolineingraven.nl al een tijdje op de plank liggen en wilden hierop een website lanceren wat hét startpunt moet worden voor iedereen die zijn trampoline wil (laten) ingraven.

Ingraven of laten ingraven
De inhoud van de website is grofweg in te delen in twee informatiestromen: ingraven of laten ingraven. Trampolineingraven.nl deelt op de website handleidingen en tips om de trampolines van Trampolinewinkel.nl zelf in te graven. Voor iedereen die zelf ingraven niet ziet zitten is er een eenvoudige calculator die op basis van enkele vragen een inschatting van de kosten maakt. De bezoeker kan deze offerte vervolgens naar zichzelf versturen.

Prijsformule
De prijs voor het ingraven is afhankelijk van een hoop factoren. Natuurlijk speelt de afstand (voorrijkosten) een belangrijke rol, maar ook het formaat van de trampoline, diepte van de benodigde kuil en bijvoorbeeld kosten voor het afvoeren van de grond maken deel uit van de prijsberekening. Samen met de opdrachtgever maakten we met een event-storming sessie een overzicht van alle variabelen die in de formule meegenomen moesten worden en ontdekten we een aantal situaties waarin er geen offerte verzonden kon worden.

Het resultaat van event storming

Ontwerpfase

Op basis van het logo en de sfeer van het product (tuin, groen, natuur, buiten) besloten we om te werken met een lichter kleurenpallet van grijstinten, groen en turkoois. Bij verwijzingen naar 'moedersite' trampolinewinkel.nl gebruiken we de huisstijl-cyaan van trampolinewinkel.nl. Dit alles werkten we uit in een styleguide waar we naast fonts en kleuren ook knoppen en cards uitwerkten.

In de planning was extra tijd ingeruimd om de offertecalculator goed uit te denken. We wilden dat bezoekers zo gemakkelijk mogelijk een offerte konden aanvragen en onderzochten de mogelijkheden om de hoogte van de offerte live te tonen. Daarmee kunnen ze ook direct de prijsimpact zien van het al dan niet afvoeren van de grond.

Ook veel energie werd er gestoken in het ontwerp van de detailpagina's van trampoline en project. Vooral op de projectpagina wilde de opdrachtgever zijn verhaal kwijt kunnen over de successen en uitdagingen van bepaalde projecten. Ook moest er vanaf daar direct gelinkt worden naar de beschreven trampoline.

Styleguide TrampolineIngraven

Realisatie

De realisatie van de contentpaginas was dankzij Statamic een fluitje van een cent. Door de content goed te ontleden konden we snel gebruiksvriendelijke fieldsets opbouwen. Daarmee kan de contentmarketeer van Trampolineingraven.nl eenvoudig de pagina's vullen met content. Doordat wij vooraf (op basis van het afgestemde ontwerp) bepalen welke informatie er getoond gaat worden, forceren we de beheerder om specifieke gegevens in te voeren aan de achterkant van de website. Statamic staat ons toe om styling en content zoveel mogelijk van elkaar te scheiden: de beheerder kan wel gegevens invoeren, maar daar geen styling voor bepalen. Dat ligt natuurlijk al vast in het ontwerp.


Offertetool
Een interessante uitdaging was het inbouwen van de offertetool die als een directe brug tussen de voor- en achterkant van de website fungeert. Wanneer een gebruiker op de website een postcode en huisnummer invult, wordt deze met een API direct gecontroleerd bij postcode.nl. Daarna vragen we via de Google Maps API de afstand op voor een enkele reis van Woerden naar het adres van de aanvrager. Deze afstand wordt teruggekoppeld naar de voorkant van de website, waar we een deel van de prijs kunnen tonen.

Als het formulier door de aanvrager geheel ingevuld en gecontroleerd is, sturen we de waarden van het formulier naar de achterkant van de website waar de gegevens nogmaals gevalideerd worden. Ook daar wordt opnieuw een check gedaan op postcode, huisnummer en afstand, om zeker te zijn dat niemand in het proces de voorrijkosten heeft kunnen manipuleren. Als ook aan de achterkant alle berekeningen automatisch uitgevoerd zijn, sturen we tevens geheel geautomatiseerd een offerte naar het opgegeven emailadres van de klant én naar de inbox van trampolineingraven.nl. De ruwe gegevens bewaren we op een afgeschermd deel, waardoor we eventueel (indien nodig) later alle verstuurde offertes opnieuw kunnen berekenen.

Natraject

Na oplevering zijn er nog diverse aanpassingen doorgevoerd aan de invoervelden voor de contentmarketeer van Trampolineingraven.nl. Ook zijn er plannen voor een 'tweede fase' van die project waarin het tevens mogelijk moet worden om direct de trampoline te bestellen op deze website.

Achievements

  • De offerte-tool geeft live de prijs en prijsimpact van keuzes weer.

  • Snelle zoekresultaten voor projecten en trampolines

  • Koppeling met postcode.nl en Google Maps om voorrijkosten te bepalen

Gebruikte tools

Statamic is een content management systeem gebaseerd op het Laravel Framework. Qua funcionaliteit hetzelfde als bijvoorbeeld Wix of Wordpress. Het is snel, betrouwbaar, veilig en vooral erg goed uit te breiden met maatwerk aanpassingen.

VueJS (spreek uit als Vjiew) is een veelgebruikt javascript framework om aan de 'voorkant' van de website interacties te kunnen opbouwen. Denk bijvoorbeeld aan een bestelformulier met postcode-validatie of een live-status van de chat wachtrij.

Meer weten?

Wilt u meer weten over onze werkzaamheden of een beroep doen op onze expertise en ervaring? Neem contact op voor een vrijblijvend kennismakingsgesprek.