Ambachtelijke gin, meetbare impact.
Voor Kegel Spirits bouwden we het Figma-ontwerp na in WooCommerce, met een impact counter die elke fles koppelt aan een vierkante meter bos.
- Klant
- Kegel Spirits
- Sector
- Ambachtelijke stokerij op de Veluwe
- Geleverd
- WooCommerce webshop, gebouwd uit Figma
- Doorlooptijd
- 2 maanden, van concept tot live
Wat het opleverde
Een webshop die er precies zo uitziet als het ontwerp, en die het circulaire verhaal van Kegel Spirits laat zien in plaats van het alleen te vertellen. Kopers vinden hun eigen stukje bos, de dichtstbijzijnde winkel en een workshop in de stokerij.
Duurzaamheid die je kunt aanwijzen
Elke fles heeft een uniek nummer. Wie dat invult, ziet op Google Maps waar je boom op de Veluwe geplant wordt, en kunt er zelf naartoe. Dat overtuigt meer dan een keurmerk op het etiket.
1 m²
nieuw bos op de Veluwe per verkochte fles
Een webshop die voelt als de stokerij
Het ontwerp van het designbureau staat tot in detail online. Typografie, kleuren en witruimte kloppen met Figma, dus de site straalt hetzelfde ambacht uit als de gin zelf.
2 maanden
van eerste concept tot een live webshop
Van online naar de winkel en de stokerij
Bezoekers zien welke winkel bij hen in de buurt de gin verkoopt en boeken zelf een rondleiding of workshop. De webshop verkoopt dus ook buiten de webshop.
4
functies op maat: impact counter, smaakprofiel, winkelfinder en workshopboeking
De 1 m² bos per fles is de belofte van Kegel Spirits, de 2 maanden lopen van concept tot livegang. Bezoekers- of omzetcijfers van voor en na de lancering hebben we voor deze case niet, dus hier staat wat de webshop doet.
De vraag
Een ontwerp dat af was, en een verhaal dat klopt.
Kegel Spirits stookt biologische gin op hout, op de Veluwe, in een volledig circulair proces. Hun designbureau had de webshop al tot in detail in Figma uitgewerkt.
Wij moesten dat ontwerp 1-op-1 bouwen, en er vier functies onder zetten die het verhaal tastbaar maken: een impact counter met de locatie van de bomen, smaakprofielen, een winkelfinder en workshopboekingen. Zonder dat er aan de uitstraling iets verloren ging.
Was
Nu
Was: Een uitgesproken ontwerp in Figma
Dezelfde webshop, live in WooCommerce
Was: Een circulair productieverhaal
Een flesnummer dat je terugvindt op de kaart
Was: Workshops en rondleidingen in de stokerij
Online te boeken, met datum en aantal personen
Het ontwerp bepaalde hoe de site eruitziet, WooCommerce hoe hij werkt. Het team beheert de marketingteksten zelf in WordPress, de bijzondere functies draaien op Google Maps en LatePoint.
De aanpak
Het ontwerp bouwen, het verhaal tastbaar maken.
Samen met het designbureau bouwden we een WooCommerce webshop op WordPress. Eerst het ontwerp, daarna de functies die Kegel Spirits anders maken dan een gewone drankenshop.
01 Het ontwerp
Van Figma naar WordPress, 1-op-1
Het Figma-bestand ging van schetsfase via conceptpresentatie naar een designvoorstel. Dat hebben we tot in detail nagebouwd met Elementor en eigen CSS, zodat de uitstraling van de stokerij op elk scherm terugkomt.
- Nagebouwd uit FigmaTypografie, kleuren, spacing en interacties zoals ontworpen
- Op elk schermMobiel, tablet en desktop
- Zelf te beherenElementor en ACF voor de marketingteksten
02 Impact counter
Elke fles een eigen vierkante meter bos
Elke verkochte fles krijgt een uniek nummer en draagt bij aan 1 m² bos. Op de impactpagina vul je dat nummer in en Google Maps laat zien waar jouw boom op de Veluwe geplant wordt.
- Uniek flesnummerGekoppeld aan een vaste plek in het bos
- Google MapsToont de exacte locatie van de boom
- Echt te bezoekenJe kunt op de Veluwe zelf gaan kijken
Van fles tot boom
- Fles gekochtuniek nummer
- Nummer invullen op de impactpaginazoek je m²
- Locatie op Google Mapsde Veluwe
- 1 m² nieuw bosGeplant
Duurzaamheid als iets wat je kunt opzoeken en bezoeken, niet als een belofte op het etiket.
03 Smaakbeleving
Proeven voordat je de fles open hebt
Elke gin heeft een eigen smaakprofiel. Op de productpagina staat dat als een web van acht smaken, en wie met de muis over een punt gaat ziet de score. Zo zie je in één blik of een gin bitter, zoet of houtig is.
- Smaakprofiel per ginVan citrus en floraal tot bitter, hout en noten
- Score bij hoverBijvoorbeeld zoet, 6 van 10
- Biologische certificeringenBij het verhaal achter elk product
- Techniek
- WordPress, WooCommerce, Elementor, ACF, LatePoint en Google Maps API
- Geleverd
- Figma naar WordPress, impact counter, geo-locatie van de bomen, smaakprofielen, winkelfinder en workshopboeking
Workshops en rondleidingen
Van de webshop naar de stokerij.
Wie de gin wil proeven waar hij gestookt wordt, boekt op de site een rondleiding of workshop. Kies een moment, zeg met hoeveel liefhebbers je komt en rond af. Het draait op LatePoint, in dezelfde WordPress als de webshop.
Per moment staat hoeveel plekken er nog zijn. De samenvatting met de totaalprijs loopt mee tot je afrondt.
- Winkelfinder met geo-locatie
- Wie liever in de winkel koopt, ziet direct de verkooppunten bij jou in de buurt. Met openingstijden en contactgegevens, uit een eigen database.
- Afrekenen met je impact erbij
- De checkout is kort en veilig, en bevestigt wat je aankoop doet: bij elke fles komt er 1 m² bos bij op de Veluwe.
De site zelf
Blader door de pagina’s.
Vijf pagina's van de live webshop, van boven tot onder. Houd je muis op het scherm om mee te scrollen, of klik voor de hele pagina.Tik op het scherm voor de hele pagina.
De volledige homepage
De homepage vertelt meteen waar Kegel Spirits voor staat: ambachtelijk, biologisch en circulair. Rustig en natuurlijk, zoals het ontwerp in Figma was bedoeld.
kegelspirits.comMeer werk
Alle cases
Ligt jouw ontwerp klaar en moet het live?
Net als bij Kegel Spirits bouwen we je ontwerp zoals het bedoeld is, met de functies die jouw verhaal nodig heeft. Wil je een WooCommerce webshop laten maken met dit soort maatwerk? Dan denken we graag met je mee.
Direct iemand van het team
0318 240 419