Preskoči na glavno vsebino
Maistra Hospitality Group

Spletna stran kot glavni prodajni kanal – jasna za uporabnika, preprosta za upravitelja

Urban Pfeifer

Kot eno največjih podjetij na področju gostinstva v Jadranu se Maistra zaveda, da mora biti večina strateških odločitev podprta s tehnologijo.

Osemnajst hotelov, 11 letovišč in šest kampov v destinacijah, kot so Rovinj, Vrsar, Dubrovnik in Zagreb, uvrščajo Maistra med vodilna turistična podjetja v tem delu Evrope, kar zahteva nenehen razvoj in iskanje boljših rešitev. Vodstvo Maistre se zaveda, da mora biti večina strateških odločitev podprta s tehnologijo, zato se je podjetje odločilo nadgraditi svojo spletno stran in jo pripraviti na prihodnost.

Monolitni večjezični spletni strani na dveh ločenih domenah (maistracamping.com in maistra.com) je bilo treba združiti, hkrati pa razdeliti glavne storitve na več manjših, da bi zagotovili največjo hitrost, razširljivost, enostavno upravljanje in zanesljivost.

Uporabniški vmesnik je bilo treba nadgraditi s poudarkom na postopku rezervacije, posebej prilagojenem mobilnim napravam, vključiti je bilo treba tudi program zvestobe, obenem pa spremeniti uporabniške poti. Naročnik je želel, da bi bili spletni strani enako hitri ne glede na lokacijo uporabnika ter da bi dosegali najvišje ocene pri testih SEO, dostopnosti in hitrosti nalaganja.

Te tri metrike smo testirali z orodjem Google Lighthouse. Dodatni izzivi projekta so bili razviti kompleksno spletno stran z več kot 100 različnimi postavitvami uporabniškega vmesnika in zahtevnimi funkcionalnostmi v najkrajšem možnem času, hkrati pa naročniku omogočiti nemoteno vnašanje vsebin med razvojem.

Tehnologija Jamstack za hitro, zanesljivo in varno spletno stran.

Rešitev

Pri velikih spletnih straneh je pomembno določiti prioritete. Pri Maistri smo se osredotočili na rezultat projekta in izbrali ključne funkcionalnosti, ki so pomembne za doseganje poslovnih ciljev. Glede na razmerje med potrebnim časom in pričakovanim rezultatom smo razvoj izvajali postopno ter sproti spremljali napredek in učinek.

Faza odkrivanja

V fazi odkrivanja smo skupaj z naročnikom opredelili cilje projekta in način, kako jih bomo dosegli. Analiza obstoječe spletne strani in procesov v podjetju je pomagala razumeti težave ter olajšala izbiro tehnologij in rešitev. Pregledali smo dokumentacijo že uporabljenih storitev in opredelili uporabniške poti. Glavni poudarek je bil na tem, kako povečati konverzije ter zagotoviti, da bo spletna stran hitra in varna.

Uporabniška izkušnja in UAT

Na podlagi dokumentacije, pripravljene v raziskovalni fazi, smo oblikovali žične modele oziroma diagrame poteka in pripravili scenarije za testiranje (UAT). Pri zasnovi uporabniške izkušnje smo sledili načelu »mobile first«, kar pomeni, da smo vse diagrame in scenarije najprej prilagodili mobilnim napravam. Za funkcionalnosti, ki jih na mobilnih napravah ni bilo mogoče izvesti ali bi bile preveč zapletene, smo iskali alternativne rešitve. Strukturo informacij smo organizirali tako, da naročniku omogoča enostavno urejanje vsebin, hkrati pa uporabnika vodi do želenega cilja.

Drug izziv je bil združiti domeni maistracamping.com in maistra.com, s čimer smo poenotili nakupni proces za različne vrste nastanitev.

Uporabniški vmesnik

Najzahtevnejši del je bil oblikovanje uporabniškega vmesnika za več kot 100 predlog. Naročnik je želel nov, svež dizajn z »wow« učinkom, hkrati pa je bilo treba zagotoviti največjo možno hitrost pri razvoju in delovanju spletne strani. Razvili smo oblikovalski sistem, ki nam je omogočal pregled nad komponentami, njihovo uporabo, vedenjem in različicami po celotni strani. Cilj je bil obvladovati veliko število različnih elementov in hkrati nadzorovati razvoj novih.

To nam je pozneje v razvojnem procesu prihranilo veliko časa. Pri uporabniškem vmesniku smo se odločili tudi za načelo »mobile first« in vse elemente najprej oblikovali za mobilne naprave, šele nato za namizne. Posebno pozornost smo namenili dostopnosti (prilagoditvi za slabovidne), ki je ključni dejavnik pri doseganju odličnih rezultatov uvrščanja strani.
Spletno stran smo želeli narediti privlačno in zanimivo z mikrointerakcijami. Velika tipografija, naslovi in skrbno izbrane fotografije narekujejo ton strani ter podpirajo skrbno izbrano in prilagojeno vsebino.

Programiranje in implementacija

Da bi se izognili eni sami točki odpovedi, smo sistem razdelili na dva dela: frontend, ki je izpostavljen uporabnikom, in backend, ki z uporabniki nima stika. Za frontend smo uporabili Jamstack in statične strani, da bi zmanjšali varnostne ranljivosti in hkrati zagotovili najhitrejše možno delovanje. Dinamične dele smo rešili z Vue.js ter implementacijo zunanjih storitev prek API-jev. Uporaba tehnologije Netlify nam je omogočila hiter razvoj brez zapletenih DevOps postopkov.

Vzpostavitev vseh potrebnih okolij in avtomatiziranega nameščanja je bistveno skrajšala čas, potreben za celoten razvoj. Uporaba Netlify CMS (na osnovi Gita) je bila ključ do hitrega in dinamičnega razvoja CMS-funkcionalnosti, kar nam je prihranilo veliko časa.

Postopek implementacije rezervacijskega sistema z omejenim številom klicev je bil zelo zahteven, zato smo na platformi Azure razvili prilagojen vzporedni rezervacijski sistem, ki lahko obravnava večje število klicev in omogoča hitrejše delovanje. Poseben izziv je bil tudi pravilno urediti preusmeritve in vse zahteve SEO pri tej združitvi.

Tehnologija

Spletna stran Maistra je bila zgrajena z:

  • Hugo
  • Vue
  • Python
  • Netlify
  • Decap CMS
  • Azure
  • Cloudinary

Rezultati?

  • izboljšana uporabniška izkušnja,
  • integracija rezervacijske platforme in optimiziran postopek rezervacij,
  • uporabniški vmesnik, prilagojen različnim napravam, s poudarkom na mobilnih,
  • integriran program zvestobe,
  • kadrovski portal,
  • integracija DAM,
  • napredno iskanje – Algolia.

DesignRush, znan po svojih nagradah za spletno oblikovanje , je izbral naš dizajn med najboljše spletne strani na področju potovanj in prostega časa.

Več o projektu si lahko preberete na blogu Netlify .

Sodobna arhitekturna zasnova kompleksne spletne strani, preprosta uporabniška izkušnja in privlačen dizajn so ključni gradniki uspeha.