Borði fyrir 1. sæti á Splash Awards

BSB - headless e-commerce

Atvinnugrein
Smásala
Lausn
Vefverslanir
Tækni
Drupal, React, React Native, Elasticsearch

ÁSKORUNIN

BSB rekur 16 farþegaskip á Bodenvatni, sem er stærsta stöðuvatn Þýskalands. Til að geta komið til móts við þarfir viðskiptavina sinna og haldið í við nýjustu tækni, þurfti BSB að stíga stórt skref í stafrænni umbreytingu. Ákveðið var að innleiða rafrænt viðskiptakerfi (e. e-commerce system) til að geta selt miða á netinu.

LAUSNIN

Verkefnið var unnið í tveimur áföngum: Til að byrja með var sett upp notendamiðuð vefsíða sem var byggð á notendapersónum (e. user personas) og notendavegferðum (e. user journeys). Í seinni fasanum var headless e-commerce lausn samþætt við síðuna með greiningar- og rakningartólum til að fá innsýn í hegðun notenda með það að markmiði auka sölu.

ÚTKOMAN

Nýja vefsíðan og innkaupaferlið er sniðið að notendum og leiddi til verulegrar aukningar á miðasölu á netinu, eða úr 8.000 færslum árið 2019 í meira en 32.000 árið 2022. Fjórföld sala á aðeins 3 árum.

VIÐSKIPTAVINURINN

Bodensee Schiffsbetriebe GmbH

Bodensee Schiffsbetriebe GmbH (BSB) var stofnað árið 1824 og fyrstu reglulegu skipaferðirnar hófust á tímum konungsveldisins. Frá 15. maí 2003 hefur Bodensee Schiffsbetriebe GmbH verið dótturfélag Stadtwerke Konstanz GmbH. BSB flotinn samanstendur af 16 farþegaskipum og hjá fyrirtækinu, sem veltir 16 milljónum evra á ári, starfa rúmlega 200 starfsmenn. Árið 2022 var fyrsta rafknúna skipið (E-skip) tekið í notkun.

Video file
VERKEFNIÐ

Notendamiðuð vefsíða & headless e-commerce lausn - allt byggt í Drupal

Markmið verkefnisins var að búa til nýja notendamiðaða vefsíðu auk samþættingar miðakerfis/vefverslunar í Drupal 9. 

Meginþátturinn í þessu ferli var að endurbæta notendaviðmótið fyrir rafrænt miðakerfi sem gerir gestum kleift að kaupa miða á netinu. BSB var með gamla netverslun sem átti nú að nútímavæða og samþætta við vefsíðuna. Fyrst og fremst átti þetta að auðvelda notendum kaupin.

BSB vildu endurgera vefsíðuna sína, nútímavæða hana og gera hana notendavæna fyrir farsíma. Þau vantaði faglegan samstarfsaðila sem gæti veitt tæknilega sérfræðiþekkingu og aðstoðað við innleiðinguna og hefði auk þess mikla reynslu af markaðssetningu á netinu.

Skjáskot af forsíðu BSB heimasíðunnar

Við hófum ferlið á því að halda vinnustofur með Bodensee Schifffahrt til að skilgreina notendapersónur og notendavegferðir. Niðurstöðurnar voru síðan notaðar til að þróa heildrænt konsept fyrir nýja vefsíðuna. Hugmyndin var að birta viðeigandi efni fyrir mismunandi markhópa.

Næsta skref var að setja á laggirnar vefverslun þar sem hægt er að finna miða fyrir ferðir frá A til B, en einnig miða fyrir ýmsa ævintýraviðburði með takmörkuðum fjölda þátttakenda, samsetta miða (bátsferðir og aðgangur að túristastöðum), árskort og gjafabréf

Sett voru upp greiningar- og rakningartól til þess að geta skoðað hegðun gesta á síðunni. Byggt á þeim gögnum sem hefur verið safnað, er næsta skref að innleiða hönnunaruppfærslu og fínstilla notendaupplifunina enn frekar.

FRÁ KÚNNANUM

"Vefsíða og áreiðanleg vefverslun..."

"Við höfum sett upp áreiðanlega vefsíðu og vefverslun sem hægt að fylgjast með, við getum mælt árangur og allt er hannað með tæknilegar uppfærslur og aðlögunarhæfni í huga. Með nýju vefversluninni höfum við nú þegar tvöfaldað sölu okkar á netinu og gott betur en það. Annar jákvæður punktur að mínu mati er að við vinnum vel saman og höfum komið á samstarfi sem er ánægjulegt fyrir báða aðila.“

David Conrad, Online Marketing Manager, BSB

Mynd af David Conrad
VEFSÍÐAN

Afkastamikil vefsíða með gagnvirkum eiginleikum

ElasticSearch / ReactiveSearch

Bæði heiltextaleitin, sem er aðgengileg á öllum síðum, og upplifunarleitin, nýta ElasticSearch sem var innleidd í bakendann. Þetta gerir leitarvélunum kleift að gefa notendum hugmyndir um leitarorð. ReactiveSearch var notuð fyrir framendann, sem gerir notendum kleift að breyta leitarskilyrðum án þess að þurfa að þurfa að endurhlaða síðunni.

Progressive rendering

BSB vefsíðan notar myndir í hárri upplausn. Það var mikilvægt að myndirnar myndu hlaðast fljótt niður á vefnum. Með tækni sem kallast "progressive rendering" er hægt að láta myndirnar birtast í lægri upplausn birtast fyrst og á meðan notandinn vafrar á síðunni er myndunum skipt út fyrir sömu myndir í hærri upplausn.

Gagnvirk tímatafla & Hreyfimyndakort

BSB birtir tímatöfluna sína á vefsíðunni. Þessi virkni var fínstillt með React þegar síðan var sett í loftið á ný. Bakenda leitarvélarinnar var ekki breytt. Þess í stað voru leitarviðmótin útfærð sem REST endpoints. Gagnvirka tímataflan sýnir mismunandi leiðir og ferðatíma. Auk þess var korti með hreyfimyndum (e. animated map) bætt við síðuna.

Verðlaun veitt fyrir sérsniðna notendaupplifun

Vefsíðan hlaut verðlaun á þýsk-austurrísku Splash Awards verðlaunahátíðinni árið 2020 fyrir frammistöðu og framúrskarandi notendaupplifun: “The relaunch of „Bodensee-Schiffsbetriebe: Personalization and Performance with Drupal“”.

Meira um sigurvegara Splash Awards 2020

Yfirlitssíða yfir ferðir á heimasíðu BSB
Hreyfimyndakort á vefsíðu BSB
VEFVERSLUNIN

Headless e-commerce kerfi með greiningar- og rakningartólum

Samþætting Stackpath CDN

Samþætting Stackpath CDN gerir það að vefverslunin og vefsíðan hlaðast hraðar niður. Þetta kemur í veg fyrir of mikið álag á vefþjóninum þegar verið er að bóka miða.

Drupal Commerce

Samþætting hauslausrar Drupal Commerce lausnar gerir miðakaupin möguleg. Drupal Commerce felur í sér umsjón með vörum, pöntunum og greiðslum. Gagnaskipan er sveigjanleg og hana má aðlaga.

Hauslaus birting allra vara var útfærð með React forritum, gögnin sem þarf eru tekin úr Commerce vefþjónustum.

Google Analytics og rakning

Google Analytics er stöðugt notað til að skrá og meta hegðun gesta svo hægt sé að auka sýnileika vefsins.

Úrval mismunandi miða

Greiðslustöð BSB (e. point-of-sale) var tengd við vefþjónustu (API) svo hægt væri að bjóða upp á mismunandi gerðir af miðum.

Miðar á PDF-formi

Keyptir miðar eru sendir á notandann í PDF-formi í gegnum tölvupóst. Á miðunum eru QR-kóðar sem eru notaðir við innritun á skipið. Að auki var aðgerðin "Failed Mail" virkjuð. Þannig eru notendur upplýstir þegar bókun er ekki rétt gerð, tiltekin fjárhæð er ekki gjaldfærð eða miðinn er ekki búinn til. Notandanum er boðið að endurtaka kaupin í gegnum slóð sem hann fær senda.

Sérsniðin innkaupakarfa

Greining á innkaupakörfunni, byggð á hegðun notanda, mun stinga upp á upp- og cross-sölu (up- and crossselling) sem á sérstaklega við þann notanda.

Miðaleit á heimasíðu BSB
Árstíðarkort á heimasíðu BSB

Fjórföldun í netsölu á 3 árum

Árið 2019 voru um 8.000 færslur gerðar í gegnum gamla miðakerfið en þessi tala hafði þegar hækkuð upp í rúmlega 20.000 með tilkomu nýju vefverslunarinnar árið 2021. Árið 2022 var hún enn hærri, þegar rúmlega 32.000 færslur voru gerðar. Það þýðir að á þremur árum erum hefur salan á síðunni fjórfaldast. Taka skal með í reikninginn að ekki var enn hægt að bóka allar miðategundir árið 2021. Sölu einstakra vara og flokka er fylgst með í Google Analytics og með því að bera niðurstöðurnar saman við sölutölurnar úr Drupal Commerce, er hægt að skilgreina vinsælustu vörurnar og hvar í kaupferlinu notendur verja mestum tíma.

SAMSTARFIÐ

Hugleiðingar um samstarfið við 1xINTERNET

Samskipti og traust eru mikilvægir þættir fyrir BSB. Þetta verkefni virkaði mjög vel með 1xINTERNET. Vegna aukinnar netsölu verður vefverslunin, sérstaklega á ákveðnum árstímum, ómissandi söluleið.

"Með tilkomu 1xINTERNET, höfum við fundið hugbúnaðarhús sem við vinnum vel með. Saman höfum við þróað vinnuflæði þar sem við eigum stafræn samskipti í gegnum "mál" og eigum svo vikuleg vídeósímtöl til að stilla saman strengi," segir David Conrad, Online Marketing Manager hjá BSB.

Reglulegar útgáfur (e. deployments) verður til þess að stöðug þróun á sér stað og vinnan er árangursrík. "Vefverslunin gengur smurt fyrir sig og hefur alls ekki orðið fyrir neinum alvarlegum bilunum."

Hópmynd af BSB og 1x í bátsferð um Bodenvatn
AF HVERJU DRUPAL?

Drupal vefumsjónarkerfi byggt á opnum hugbúnaði

BSB framkvæmdi umfangsmiklar markaðsrannsóknir á ýmsum vefumsjónarkerfum en að endingu var sú ákvörðun tekin að nota frjálsa hugbúnaðinn Drupal. Því næst leituðu þau að fyrirtæki sem hefði margra ára reynslu af Drupal og fengi góð meðmæli.

Önnur verkefni

Vefverslanir

Eldum Rétt - flókin e-commerce lausn

Kjúklinga korma með grænmeti á borðinu

Decoupled Drupal e-commerce samþætt við React Native app til að tryggja einstaka upplifun viðskiptavina og sveigjanleika.

E-commerce solution Multisite solution

Transgourmet - multisite and headless e-commerce

Transgourmet food trucks next to the warehouse

Developing a multisite CMS platform with Drupal and Commercetools to offer customers and suppliers the latest digital convenience.