Case study – smartlab.hr

Smartlab.hr je projekt koji je rastao i razvijao se skupa s poslovanjem klijenta, a pri čemu je naš zadatak bio pomoću web tehnologija odgovoriti na mnoge izazove s kojima se klijent na svom poslovnom putu susretao.

“Fleksibilnost i dostupnost tima u svakom trenutku”

Na suradnju s Codeart.studio sam se odlučio zbog dostupnosti (telefonski i email), detaljnih informacija prilikom inicijalnih razgovora, cjenovne prihvatljivosti i fleksibilnost. Najviše mi se svidjela spremnost tima na suradnju i stalne izmjene po projektu ponajviše zbog mog neznanja i neinformiranosti. Jako puno strpljenja i volje za stalne izmjene i dodatna postavljanja. Fleksibilnost i dostupnost tima u svakom trenutku prije isporuke proizvoda pa tako i nakon isporuke.

Matej Radić, vlasnik web trgovine smartlab.hr

Pokrenite video i poslušajte što naš klijent Matej Radić kaže o suradnji s nama

Što smo napravili?

Razvili smo koncept
Osmislili smo dizajn
Isprogramirali specifičnosti
Vodili računa o responzivnosti
Case study – smartlab.hr - logotip

SmartLab Shop d.o.o je mlađa tvrtka koja se u nekoliko godina profilirala kao ozbiljno poslovanje s 3 poslovnice i web trgovinom koja stvara ozbiljan promet.

Osim vrlo široke ponude koju je moguće naći na web trgovini smartlab.hr, ova tvrtka razvila je i nekoliko vlastitih brandova, a uspješan segment poslovanja im je i servisiranje mobilnih i drugih elektronskih uređaja.

Naš klijent Matej Radić (vlasnik tvrtke SmartLab Shop d.o.o.) s nama surađuje od samog osnivanja tvrtke, do sada je njegova trgovina bila nekoliko puta dizajnerski osvježena (na sreću, klijent je vrlo svjestan prolaznosti trendova i potrebe da svojim kupcima uvijek ponudi nešto novo i drukčije), a u nastavku ćemo opisati što smo prije nekoliko tjedana napravili na web trgovini smartlab.hr.

WooCommerce, WordPress i Gutenberg – bez bilo kakvih suvišnih page buildera i uz minimalan broj pluginova

Ako pratite naše objave, onda znate zbog čega nismo zagovornici page buildera i velikog broja pluginova. Ukoliko u razvoju naših web stranica ili trgovina već i koristimo neki page builder, to može / smije biti samo WordPressov nativni – Gutenberg, koji i nije page builder u tom smislu.

Bilo kako bilo, kroz nativni WordPress i Gutenberg smo klijentu omogućili uređivanje gotovo svih front end elemenata na njegovoj web stranici, i to bez da mora posjedovati bilo kakva programerska predznanja. Uz projekt smo isporučili i video edukaciju koja svim našim klijentima pomaže da savladaju osnove uređivanja sadržaja i postanu uspješni urednici svojih web stranica i trgovina.

U nastavku želimo pokazati koliko je fleksibilnosti naš klijent dobio s ovom web trgovinom. Krenut ćemo s naslovnicom:

Naslovni izmjenjivač sadržaja (slider)

Naslovni izmjenjivač fotografija (slider) na front endu
Mogućnost uređivanja svakog pojedinačnog slidea u back endu (dodavanje fotografije, linka, naslova i po potrebi opisnog teksta)

Segment Zašto SmartLab?

Segment Zašto SmartLab? na naslovnici (front end) – istaknute značajke i newsletter formular
Uređivanje segmenta Zašto SmartLab? u sučelju – mogućnost dodavanja pozadinske fotografije, uploada ikona, naslova i opisa značajki
Uređivanje segmenta Zašto SmartLab? u sučelju – mogućnost promjene tekstualnih opisa na newsletter modulu

Segment Izdvajamo iz asortimana

Segment Izdvajamo iz asortimana? na front endu naslovnice
Uređivanje segmenta Izdvajamo iz asortimana? u back endu naslovnice – mogućnost dodavanja slika po želji, naslova i podnaslova, te poveznica

Segment s logotipima

Logotipi istaknutih brandova / dobavljača na naslovnici web stranice
Uređivanje segmenta s logotipima u back endu naslovnice – mogućnost dodavanja slika i poveznica stranica na koje logotipi vode

Segment s novostima

Segment Novosti na naslovnici – lijevi (veliki) modul je statičan, dok su desna 4 modula dinamična – pojavljuju se automatizmom nakon objave članka
Segment Novosti u back endu – uređivanje statičkog modula na kojem je moguće upisati naslov segmenta, odabrati željenu sliku, upisati naslov i opis, te odlučiti iz koje kategorije članka se na poziciji desna 4 modula trebaju automatizmom “povlačiti” članci

Istaknute poveznice

Segment s istaknutim poveznicama na naslovnici
Segment s istaknutim poveznicama u back endu naslovnice – mogućnost dodavanja naslova modula, ikone, glavne poveznice i pojedinačnih poveznica (kroz standardne mogućnosti WordPressovog uređivača)

Podnožje

Podnožje web stranice
Podnožje web stranice u back endu – mogućnost uređivanja naslova, te sadržaja sva 3 modula kroz standardni WordPress uređivač

Evo još nekoliko “detalja” koji olakšavaju život:

Napomene o cijenama

Napomena o mogućnosti ostvarivanja rabata u slučaju gotovinskog plaćanja – na arhivama proizvoda
Napomena o mogućnosti ostvarivanja rabata u slučaju gotovinskog plaćanja – na stranicama proizvoda
Mogućnost uređivanja napomene o cijeni u sučelju web stranice

Zaglavlje web stranice

Zaglavlje web stranice – logotip, glavni izbornik, toolbar izbornik
Mogućnost uređivanja glavnog izbornika kroz nativne WordPress mogućnosti
Mogućnost uploada logotipa u sučelju web stranice
Mogućnost uređivanja poveznica toolbara (dodavanje poveznica, njihovih naziva, pripadajućih ikona)
Mogućnost upoada željenih ikona za poveznice Lista želja i Moj račun

Prethodnim slikama smo htjeli pokazati da je vlasnicima web trgovina moguće dati poprilično autonomije kad se radi o samostalnom vođenju i uređivanju sadržaja njihovih web stranica, a da pri tome nije potrebno da oni stječu programerska predznanja.

Također, koristeći maksimalno potencijal samog WordPressa (i njegovog Gutenberga), uređivačko sučelje koje je funkcionalno napredno, nije otežalo rad web stranice kao što je slučaj s nekim drugim page builderima. Time su izbjegnute greške u radu weba, loša brzina, a time i loša optimiziranost za tražilice.

U nastavku želimo pokazati po čemu je još zanimljiv ovaj projekt – za razliku od prethodnih ulomaka u kojima smo se bavili mogućnostima uređivanja sadržaja web trgovine, u nastavku ćemo pisati o specifičnim funkcionalnostima.

E-mail marketing alati

Web trgovina smartlab.hr je integrirana sa Sendinblue e-mail marketing servisom, na način da je:

  • Kreiran newsletter formular, povezan sa Sendinblue, s podešenim postavkama o prikupljanju i pohrani kontakt podataka pretplatnika i automatiziranim slanjem kupon koda za popust (vid motivacije za pretplatu).
  • WooCommerceov nativni formular na blagajni web trgovine je povezan sa Sendiblue servisom, pa kontakt podaci svih korisnika koji daju svoju privolu automatski se pohranjuju u e-mail marketing program iz kojeg se vrše promotivne aktivnost.

Više o mogućnostima Sendinblue alata i njegovoj integraciji s web trgovinama možete čitati ovdje.

Newsletter formular na naslovnici
Privola za prijavu na mailing listu na blagajni

Google karta s 3 lokacije

Kao što smo spomenuli na početku ovog članka, klijent je u 3 godine postojanja osnovao 3 fizičke poslovnice, zbog čega je bilo potrebno osigurati jednostavno, ali učinkovito rješenje za prikaz lokacija na karti.

Umjesto da koristimo 3 Google karte, koristili smo jednu, koristeći Gogole Map API. Naravno, nismo napravili nikavo tehnološko čudo, ali smo se potrudili pronaći i implementirati financijski povoljno rješenje koje će u potpunosti zadovoljiti klijentove potrebe.

U želji da Google karta ne izgleda preobično, ona je izrađena kroz servis Snazzy maps.

Google karta s lokacijama i informacijama o pojedinačnim poslovnicama
Mogućnost uređivanja Google karte s lokacijama unutar sučelja web stranice

Dinamika cijena ovisno o odabranom načinu plaćanja

Većina web trgovina ima različite cijene za plaćanje gotovinom i karticama – naprosto jer kartičari naplaćuju velike provizije koja mora biti kompenzirana na određeni način. Do sada smo na web trgovinama uglavnom viđali jasno naznačene dvostuke cijene, što je trend koji kartičari zabranjuju, pa smo u slučaju trgovine smartlab.hr morali iznaći malo drukčije rješenje.

U dogovoru s klijentom napravljeno je sljedeće:

  • Proširene nativne mogućnosti WooCommercea, te na proizvodima ugrađena polja za dodatne cijene – sniženu i redovnu cijenu u slučaju plaćanja karticama.
  • S obzirom da dvostruke cijene na front endu ne bi trebale biti naglašene (kartičari se bune protiv tog trenda), za klijenta smo implementirali napomenu o mogućnostima ostvarivanja rabata u slučaju plaćanja gotovinom (slike vidljive u prethodnim ulomcima) – taj rabat se ostvaruje na blagajni web trgovine.
  • Nativne WooCommerce mogućnosti za prikaz cijene na blagajni također su nadograđene, i to na način da se cijena prikazuje ovisno o odabranom načinu plaćanja.
Dodatna polja za cijenu u back endu stranica proizvoda (proširenje standardnih WooCommerce polja)
Dinamika cijena na blagajni, ovisno o odabranom načinu plaćanja

Veleprodajni dio web trgovine

Za klijenta je implementiran i poprilično customiziran odjeljak koji se tiče veleprodaje, a ukratko riječ je o rješenju sa sljedećim značajkama:

  • kreirana posebna korisnička uloga za veleprodajne korisnike – veleprodajni korisnici mogu registrirati korisnički račun na posebnom formularu za registraciju, gdje im se automatski dodjeljuje veleprodajna uloga,
  • nakon registracije, veleprodajne korisnike se automatski presumjerava na veleprodajni dio web shopa,
  • kondicionalni prikaz veleprodajnih cijena – ako je korisnik prijavljen kao veleprodajni, prikazuju mu se posebne cijene s rabatima,
  • kondicionalni prikaz proizvoda – asortiman za veleprodajne korisnike postavljen je u posebnu kategoriju, koju vide samo prijavljeni veleprodajni korisnici. Također, veleprodajni korisnici ne vide redovne kategorije proizvoda na shopu, što znači da su sve tražilice, widgeti i sve ostalo prilagođeni da veleprodajnim korisnicima prikazuju samo proizvode iz veleprodajne kategorije,
  • za veleprodajne korisnike su također prilagođeni načini plaćanja u odnosu na redovne korisnike,
  • klijentu smo omogućili automatizirani uvoz veleprodajnih proizvoda putem Excel tablice bez potrebe za ručnim unosom.

Automatizirani uvoz proizvoda za maloprodaju i veleprodaju

Naš klijent surađuje s nekoliko dobavljača, te na tržište plasira njihove proizvode. Informacije o proizvodima dobiva u vidu Excel tablica, a koje su po svojoj strukturi manje više ujednačene ili slične. S obzirom da bi integracija sa svakim pojedinačnim dobavljačem iziskivala kreiranje različitih modula (jer svaki dobavljač im vlastiti način na koji vodi evidenciju o proizvodima, i načine na koje ih stavlja drugima na raspolaganje – bilo da je riječ o .xml tablicama, API-u ili MySQL bazama podataka), klijent je smatrao da će sasvim zadovoljavajuća opcija biti i ako mu omogućimo automatiziran uvoz proizvoda kroz Excel tablicu.

To smo i učinili – ugradili smo mogućnost periodičkog (automatiziranog), ili po potrebi ručnog uvoza proizvoda iz tablica koje klijent dobiva od dobavljača. To je omogućilo vrlo brz i učinkovit unos i po nekoliko stotina proizvoda za samo nekoliko minuta, čime su se vremenski i financijski troškovi klijenta sveli na minimum.

Integracija s nabava.net

Putem skripte koju nabava.net stavlja na raspolaganje vlasnicima WooCommerce web strgovina, napravljena je i integracija web trgovine smartlab.hr s ovim servisom. Na taj način klijent ima mogućnost vrlo učinkovito konkurirati na pretrazi za uspoređivanje cijena, a što mu donosi dodatnu vidljivost i profit.

Što još radimo za ovog klijenta?

Svaki tjedan novi newsletter orijentiran na smartlab.hr kupce

Svaki tjedan planiramo novu newsletter kampanju za smartlab.hr, pri čemu je klijentov zadatak javiti nam koje proizvode i usluge će naredni tjedan imati na posebnoj ponudi, a naš je zadatak smisliti kratku priču i dizajnirati atraktivnu grafiku koje će biti središte newslettera.

Neke od primjera takvih newslettera možete pogledati u nastavku.

Neki od SmartLab newslettera koji su izašli iz naše radionice

Svaki tjedan nova Facebook kampanja

Newsletter i Facebook kampanje predstavljaju zaokruženu strategiju – i obje vrste kampanja se “vrte” oko istaknutih tjednih ponuda. Tako za smartlab.hr svaki tjedan vodimo i novu Facebook kampanju, s redovnim i remarketing / retargeting oglasima.

Neke od primjera Facebook oglasa možete pogledati u nastavku.

Facebook oglasi svojom tematikom prate newslettere (odnose se na iste promotivne tjedne akcije)

Osmišljavanje grafika za različite promotivne materijale

Za tvrtku SmartLab Shop d.o.o. smo do sada dizajnirali različite tipove grafika, te ih pripremali za tisak – od natpisa potrebnih u fizičkim poslovnicama, naljepnica za stolove, vizitki i sl..

Neke od primjera grafika za natpise možete pogledati u nastavku.

Grafička priprema (i priprema za tisak) različitih materijala – kao što su natpisi postavljeni u SmartLab fizičkim poslovnicama.

Kreiranje logotipa za niz brandova koji su pod “kapom” SmartLaba (+ knjiga standarda)

Prije nego se upustio u suradnju s nama, klijent je dao izraditi korporativni identitet (logotip) u suradnji s agencijom koja se bavi grafičkim dizajnom.

U međuvremenu je njegovo poslovanje raslo, i pokazala se potreba za novim logotipima – prilagođenima za usluge / brandove koji postoje unutar tvrtke.

Ovaj posao je klijent odlučio povjeriti nama, jer mu se na osnovu dotadašnjeg iskustva s našom ekipom činilo da bismo upravo mi mogli isporučiti željeni rezultat.

Tako je i bilo, knjigu SmartLab standarda koju smo isporučili možete pogledati ovdje, a logotipe koje smo razvili u nastavku.

SmartLab nudi nekoliko usluga koje su osmišljene kao zasebni brandovi, a za koje smo kreirali korporativni identitet

Zaključak

Dali smo si oduška i malo se pohvalili projektom izrade web trgovine smartlab.hr, no, jedan članak nije dovoljan da opiše sve izazove koje je ovaj projekt posljednjih godina sa sobom nosio.

Ne zaboravimo – ovo je projekt koji je rastao i razvijao se skupa s poslovanjem klijenta, a pri čemu je naš zadatak bio pomoću web tehnologija odgovoriti na mnoge izazove s kojima se klijent na svom poslovnom putu susretao.

U tom smislu, zaključak i poruka ovog članka su sljedeći:

  • Ako se tek upuštate u web prodaju, nije nužno odmah u startu uložiti stotine tisuća kuna da biste ostvarili uspjeh. Čak što više, osmislili smo određena rješenja koja vas u startu ne koštaju puno, a koja su vremenom nadogradiva.
  • Čak i ako nemate puno novaca u startu, a imate ekipu koja vas želi pratiti – već imate jako puno i mogli biste ostvariti velike uspjehe.
  • Imamo dobre programere, ali i osobe koje razmišljaju marketinški. Ništa ne radimo mehanički, već stvari volimo sagledati iz perspektive korisnika i rješenja nuditi prema individualnim potrebama.
  • Ne bavimo se isključivo web developmentom i dizajnom, već različitim web alatima, a po potrebi i kvalitetnim grafičkim dizajnom (aktivno radimo s programima Photoshop, Illustrator, InDesign, Figma i sl.). Način na koji vas možemo pratiti na vašem poslovnom putu možda nije jedinstven (ne želimo tvrditi da ne postoje agencije poput naše), ali nije ni čest – najviše zbog poznavanja materije i dugogodišnjeg iskustva u raznoraznim segmentima digitalnog marketinga. Jednostavno, bili smo znatiželjni, vremenom svašta isprobavali, od nekih alata odustali, neke zadržali i danas ih učinkovito koristimo za promociju poslovanja naših klijenata.

Ako do sada niste, pogledajte što o ovom projektu kaže njegov vlasnik

Treba vam kvalitetna web stranica potpuno prilagođena vašim potrebama?

Kontaktirajte nas i zatražite ponudu (ili postavite pitanje), putem e-maila [email protected], telefona +385 91 455 1066 (12-17h pon-pet), te se raspitajte o našim uslugama. Veselimo se suradnji s vama, te postizanju vaših poslovnih ciljeva.

Unajmite nas za svoj idući projekt!

Planirate razvoj vlastitog projekta?

Agencija ste koja traži partnera?