Caretronic

Za naročnika smo izdelali novo spletno stran po meri. Ker je naročnik že imel delujočo spletno stran in veliko vsebin ter integracij na njej, smo pred začetkom prenove najprej opravili analizo obstoječih vsebin, aktivnih povezav ter rangiranja med Googlovimi zadetki iskanja. Po prvotni analizi in pogovoru z naročnikom smo se najprej lotili restrukturiranja spletišča.

Načrtovanje nove spletne strani

Na obstoječi spletni strani je bilo veliko vsebin, ki so povečini bile med seboj povezane, a vendar težko dostopne za uporabnike. Zato smo v sodelovanju s projektnim vodjo Caretronic, Majo Ogrizek, določili nove vsebinske sklope in vanje razvrstili obstoječe vsebine. Te sklope smo nato razširili z novimi vsebinami, ki so jih pri podjetju Caretronic v času trajanja projekta tudi v celoti pripravili.

Na podlagi nove strukture spletišča smo pripravili delovno verzijo navigacijskega menija ter žičnati model za vsako posamezno spletno stran. Pri pripravi žičnatih modelov smo na podlagi dobrih praks ter želja in potreb naročnika pripravili raznolike vsebinske odseke, ki so predstavljali predvidene tipe elementov (slike, video, ikone, CTA gumbe itd.) ter okvirno dolžino besedila, ki je bilo oblikovano na podlagi obstoječih vsebin. Po potrjeni prvi različici žičnatih modelov posameznih strani, je naročnik s pomočjo pripravljenih vsebinskih odsekov podal predloge za spremembe, zato da bi le-ti karseda ustrezno odražali vsebino, ki je bila še v pripravi. Na podlagi naročnikovih predlogov smo prilagodili končne verzije žičnatih modelov za posamezne spletne strani ter jih uporabili kot osnovo za pripravo grafičnih predlog spletnih strani.

Priprava grafičnih predlog spletnih strani

Pri pripravi grafičnih predlog spletnih strani smo upoštevali zastavljene grafične smernice. S tem smo želeli pri obstoječih uporabnikih vzbuditi občutek kontinuitete. Prvi vtis ob obisku nove strani je, da je to še vedno spletna stran podjetja Caretronic, a v sodobnejši in izboljšani različici. Cilj pri pripravi grafične predloge je bil, da ohranimo esenco obstoječe strani, a obenem moderniziramo izgled ter oblikujemo grafično zasnovo tako, da bo za uporabnike čim bolj pregledna – še posebej na mobilnih napravah. Po potrjeni grafični zasnovi je ekipa Caretronic pripravila in obdelala slikovno gradivo, ki so ga želeli umestiti na novo spletno stran. Za dosego še bolj personaliziranega izgleda pa je oblikovalka Vida Igličar za naročnika izdelala ikonografijo po meri ter pripravila nazorne ilustracije delovanja izdelkov in rešitev naročnika. Pripravljeno grafično gradivo smo umestili v grafične predloge ter ga optimizirali za rabo na spletu.

Pri pripravi osnovne grafične predloge in njene implementacije smo naleteli na svojevrsten izziv. Naročnik ponuja 4 različne sklope rešitev, ki se predstavljajo kot samostojne znamke. Izziv je bil, kako ločiti posamezne znamke med seboj, a jih še vedno prikazati kot del Caretronic ponudbe. Rešitev, ki je bila na koncu sprejeta je določila svojo barvno shemo vski izmed Caretronic znamk: NurseCare oranžno, SeniorCarePRO modro, DementiaCare vijolično ter PatientCare zeleno. Ponazoritev samostojnosti znamk smo izvedli z barvno prilagoditvijo osnovnih grafičnih elementov (npr. CTA gumbov, povezav, barve noge itd.). Ta prilagoditev se na spletni strani odraža v obliki barvnega kodiranja, kjer se vsi osnovni elementi obarvajo glede na predvideno barvo znamke oz. rešitve. Barvne variacije elementov so omogočile prikaz samostojnosti posameznih znamk, uporaba krovne oblike ter postavitev elementov pa vpetost znamk v celotno Caretronic ponudbo.

Programiranje in izvedba

Že v fazi priprave žičnatih modelov smo posebno pozornost namenili načrtovanju uporabniške izkušnje. Za vsak odsek oz. vsebinski blok smo predvideli, kakšna dejanja lahko uporabnik na njih izvede, kakšni elementi se pojavljajo in kateri so animirani, kako se bodo posamezni elementi prikazovali na mobilnih napravah ter kako bodo odseki povezani z drugimi deli spletišča. Spletišče smo izdelali po meri, kar nam je dalo dovolj svobode za oblikovanje funkcionalnosti po meri.

Funkcionalnosti po meri vključujejo barvno kodiranje vsebin, pogojni prikaz elementov, drsnike vsebin, lightbox galerije, prikaz sorodnih prispevkov, iskalnik ter mikroanimacije.

Med vsemi elementi najbolj izstopajo mikroanimacije, ki presegajo zgolj klasično animirano pojavitev elementa, ko se mu uporabnik približa. Na spletno stran caretronic.com smo vključili animacije posameznih ikon, ki ponazarjajo glavne funkcionalnosti določenega izdelka ali rešitve. Te ikone se animirajo čez ambientno sliko ob vstopu na stran posameznega izdelka ali rešitve.

Animacije lahko uporabnika pritegnejo ali pa povsem odvrnejo od branja vsebine. Zato smo premišljeno animirali le določene elemente, ki nakazujejo, da se v njihovi bližini nahaja pomembnejša vsebina. Vstopne in izhodne animacije so upočasnjene in uporabljajo minimalne horizontalne ter vertikalne premike, s čimer ne motijo uporabnika. S pomočjo animacij smo dosegli kontrast med elementi, ki vežejo nase pozornost ter med statičnostjo pomembne vsebine, ki je vedno lahko dostopna in berljiva.

Optimizacija in lokalizacija vsebin

Med samo tehnično izvedbo smo upoštevali SEO zahteve, ki primarno vključujejo ustrezne HTML oznake pripadajočih elementov, integracijo nadomestnih besedil slik, strukturo povezav ter integracijo meta naslovov in meta opisov. Po prvem pregledu razvojne različice novega spletišča, so pri Marketinški agenciji Adworld.si izvedli SEO analizo ter podali svoje predloge izboljšav vsebine in strukture, ki smo jih kasneje implementirali. V sodelovanju z zunanjimi sodelavci in ekipo Caretronic so izvedli lokalizacijo vseh vsebin za nemški in slovenski jezik, ter pripravili vse meta opise in nadomestna besedila.

V zaključni fazi smo na spletno stran integrirali še vsa potrebna analitična orodja (kot sta GoogleAnalytics in Google Ads) za beleženje obiska ter specifičnih dejanj uporabnikov ter poskrbeli za preusmeritve starih povezav na nove, kjer je bilo to potrebno.