Veliko spletno mesto kot glavni prodajni kanal – pregledno za uporabnika, obvladljivo za skrbnika

Uvod

18 hotelov, 11 resortov in 6 kampov na destinacijah, kot so Rovinj, Vrsar, Dubrovnik in Zagreb, postavlja Maistro v vlogo vodilnega turističnega podjetja v tem delu Evrope, kar zahteva neprestan razvoj in iskanje boljših rešitev. Maistrino poslovodstvo se zaveda, da je večino strateških odločitev treba podpreti s tehnologijo, zato so se v podjetju odločili, da nadgradijo svoje spletno mesto tako, da bo pripravljeno za prihodnost.

Izziv

Večjezično monolitno spletno mesto na dveh ločenih domenah (maistracamping.com in maistra.com) je bilo treba združiti, hkrati pa glavne storitve razdeliti na več manjših, da se zagotovijo maksimalna hitrost delovanja, možnost razširitev, lažja obvladljivost in zanesljivost. Nadgraditi je bilo treba uporabniški vmesnik, pri čemer je bil poudarek na rezervacijskem procesu, prilagojenem predvsem mobilnim napravam, ter integrirati program zvestobe in hkrati spremeniti uporabniške poti. Naročnik je želel, da so spletne strani enako hitre, ne glede na lokacijo uporabnika, hkrati pa morajo dosegati maksimalno število točk na testih za SEO, dostopnost in hitrosti nalaganja. Te tri metrike smo testirali z orodjem Google Lighthouse. Dodatni izzivi projekta so bili v najkrajšem možnem času razviti kompleksno spletno stran z več kot 100 UI-predlogami in zahtevnimi funkcionalnostmi, hkrati pa naročniku omogočiti nemoten vnos vsebin med samim razvojem.

Rešitev

V primeru obsežnih spletnih mest 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 se razvoja lotili zaporedno ter ves čas spremljali napredek in učinek.

Raziskovalna faza

Z naročnikom smo v raziskovalni fazi določili cilje projekta in način, kako jih bomo dosegli. Analiza trenutnega spletnega mesta in procesov v podjetju pomaga pri razumevanju problemov ter omogoča lažjo izbiro tehnologije in rešitev. Preučili smo dokumentacijo storitev, ki se že uporabljajo, in definirali uporabniške poti. Glavni fokus je bil, kako povečati konverzije ter zagotoviti hitro in varno delovanje spletne strani.

Uporabniška izkušnja in UAT

Na podlagi dokumentacije, ki smo jo pripravili v raziskovalni fazi, smo narisali žične diagrame oziroma diagrame poteka in napisali scenarije za testiranja (UAT). Pri načrtovanju uporabniške izkušnje smo se držali načela »mobile first«, kar pomeni, da smo vse diagrame in scenarije najprej prilagodili mobilnim napravam. Za funkcionalnosti, ki jih na mobilnih napravah ni mogoče narediti ali bi bile prezahtevne, smo poiskali alternativne rešitve. Informacijsko strukturo smo organizirali tako, da je urejanje vsebin preprosto za naročnika, hkrati pa uporabnika vodi do želenega cilja. Zahtevna je bila tudi združitev domen maistracamping.com in maistra.com, kar je poenotilo nakupni proces za različne tipe namestitev.

Uporabniški vmesnik

Najtežje je bilo oblikovati uporabniški vmesnik za več kot sto predlog. Želja naročnika je bil nov, svež dizajn z »vav« efektom, a hkrati je bilo treba zagotoviti maksimalno hitrost pri razvoju in delovanju spletne strani. Razvili smo dizajn sistem, ki nam je omogočal pregled nad komponentami, njihovo uporabo in obnašanjem ter variacijami na celotni strani. Cilj je bil, da se uporablja obvladljivo veliko število različnih elementov in kontrolira razvoj novih. Takšen način nam je kasneje pri razvoju prihranil veliko časa. Tudi pri uporabniškem vmesniku smo izbrali princip »mobile first« in najprej izrisali vse elemente za mobilne naprave ter šele v naslednjem koraku za namizne. Poseben poudarek smo namenili dostopnosti (prilagoditev za slabovidne), ki je ključni dejavnik za doseganje odličnega rezultata pri ocenjevanju strani. Z mikrointerakcijami smo želeli narediti stran privlačno in pritegniti uporabnika. Velika tipografija, naslovi in skrbno izbrane fotografije dajejo ton strani, ki podpre skrbno izbrano in posebej prilagojeno vsebino.

Programiranje in implementacija

Da bi se izognili eni točki napake, smo sistem razdelili na dva dela: frontend, ki je izpostavljen uporabnikom, in backend, ki nima stika z uporabniki. Za frontend smo uporabili Jamstack in statične strani, s čimer smo zmanjšali varnostne luknje, hkrati pa zagotovili najhitrejši možni način delovanja. Dinamične dele smo rešili z Vue.js in implementacijo zunanjih servisov prek API-jev. Uporaba tehnologije Netlify nam je omogočila hiter razvoj brez zahtevnih operacij DevOps. Vzpostavitev vseh potrebnih okolij in avtomatične namestitve (deployment) je bistveno zmanjšala čas, potreben za celoten razvoj. Uporaba Netlify CMS-ja (Git-based) je ključna za hiter in dinamičen razvoj CMS-funkcionalnosti, s katerim smo prihranili ogromno časa. Zalo zahteven je bil proces implementacije rezervacijskega sistema, ki ima omejeno število klicev, tako da smo razvili prilagojen vzporedni rezervacijski sistem na platformi Azure, ki prenese večje število klicev in omogoča hitrejše delovanje. Poseben izziv je bil, da smo ob tej združitvi pravilno pripravili preusmeritve in vse SEO-zahteve.

Rezultati

• izboljšana uporabniška izkušnja
• integracija rezervacijske platforme in optimiziran rezervacijski proces
• uporabniški vmesnik, prilagojen različnim napravam s poudarkom na mobilnikih
• integriran program zvestobe
• HR-portal
• DAM-integracija
• napredno iskanje – Algolia

Več o projektu na Netlify blogu