Ana-a, boje, lakovi i pribor
Klijent: Ana-a Trgovina, boje lakovi i pribor
Kategorija: Građevina, Autoreparatura
Tehnologija: Corel Draw, WordPress, WooCommerce, PHP, HTML/CSS, JavaScript
O klijentu:
Ana-A Trgovina je tvrtka iz Karlovca s dugogodišnjim iskustvom u distribuciji profesionalnih boja, lakova, premaza i građevinskog materijala. Posluju kroz dvije poslovnice u Karlovcu i jednu u Sisku, a njihov asortiman iznimno je širok — od proizvoda za autoreparaturu i industrijskih premaza, kroz boje za unutarnje zidove, fasade, podove, drvo i metal, do alata, zaštitne opreme, brušenja i poliranja te željezarije. Distribuiraju vodeće svjetske i europske brendove, uključujući Cartec Refinish, Primalex, Balakryl i mnoge druge. Radi se o etabliranom lokalnom trgovcu s jakom fizičkom prisutnošću koji je prepoznao potrebu za proširenjem na online kanal prodaje.
Opis projekta:
Fizička trgovina s ovakvim asortimanom suočava se s jasnim ograničenjem — kupci koji nisu u blizini poslovnice ili nemaju vremena doći osobno nemaju načina pregledati ponudu i naručiti. Uz to, profesionalci poput majstora, slikoplesara i servisera koji redovito naručuju iste proizvode trebaju brz i praktičan online kanal. Projekt je obuhvatio izgradnju kompletnog web shopa koji Ana-A trgovini otvara online kanal prodaje, proširuje doseg izvan fizičkih lokacija u Karlovcu i Sisku te klijentu daje alat kojim može samostalno upravljati bez stalnog oslanjanja na tehničku podršku.
Uz web shop, projekt je uključivao i izradu logotipa kao temelja vizualnog identiteta tvrtke u digitalnom prostoru.
Moja uloga i proces
Preuzeo sam projekt u cijelosti — od dizajna logotipa, postavljanja WooCommerce arhitekture i inicijalnog unosa proizvoda, do implementacije digitalne pristupačnosti i predaje klijentu s mogućnošću samostalnog upravljanja katalogom.
Dizajn logotipa
Logotip je izrađen u CorelDRAWu kao prvi korak projekta. Dizajn je trebao komunicirati pouzdanost i profesionalnost etabliranog trgovca, a istovremeno biti dovoljno čist i fleksibilan za primjenu u digitalnom okruženju — na web shopu, društvenim mrežama i poslovnoj dokumentaciji. Logotip je potom dosljedno primijenjen kroz cijeli vizualni identitet web shopa.
WooCommerce web shop
Web shop je postavljen u WooCommerceu s katalogom organiziranim u jasne kategorije prema vrsti primjene — autoreparatura, unutarnji zidovi, fasade, podovi, industrijski premazi, drvo, metal, alati i pribor, zaštitna oprema, brušenje i poliranje, građevina i željeznarija. Ovakva struktura omogućuje korisnicima brzo snalaženje bez obzira dolaze li kao profesionalci s konkretnom potrebom ili kao privatne osobe koje istražuju opcije.
Inicijalni unos proizvoda napravljen je u dogovoru s klijentom kako bi shop od prvog dana bio funkcionalan i popunjen. Nakon postavljanja temelja kataloga, klijent je preuzeo samostalno upravljanje i unos novih proizvoda — što je bio eksplicitan cilj od početka projekta. CMS je stoga postavljen s naglaskom na jednostavnost upravljanja, s intuitivnim sučeljem za dodavanje i uređivanje proizvoda koje ne zahtijeva tehničko predznanje.
Implementirane su i standardne e-commerce funkcionalnosti — lista želja, korisnički račun, upravljanje narudžbama te besplatna dostava za narudžbe iznad minimalnog iznosa. Uz web shop, stranica jasno prikazuje informacije o fizičkim poslovnicama s radnim vremenima i kontaktima, što je važno za klijente koji preferiraju osobni kontakt ili preuzimanje robe na licu mjesta.
Digitalna pristupačnost (WCAG)
Projekt je uključivao implementaciju digitalne pristupačnosti sukladno WCAG smjernicama. Na e-commerce stranici s ovakvim opsegom kataloga to je posebno zahtjevno — svaki element sučelja, od filtera i kategorija do kartica proizvoda, košarice i procesa narudžbe, mora biti tehnički ispravan i dostupan korisnicima asistivnih tehnologija. Implementacija je obuhvatila semantički ispravan HTML, odgovarajući kontrast boja, punu navigabilnost tipkovnicom, ARIA oznake za interaktivne elemente te tekstualne alternative za sve vizualne sadržaje uključujući slike proizvoda.
Responzivnost
Stranica je u potpunosti responzivna i optimizirana za mobilne uređaje. Profesionalci na terenu koji trebaju brzo provjeriti dostupnost artikla ili napraviti narudžbu između radova primarno koriste mobitel — što je za ovu ciljnu skupinu posebno relevantan scenarij.
Napomena
Web shop je nakon završetka projekta predan klijentu na samostalno održavanje i upravljanje. Trenutno stanje stranice odražava klijentove naknadne izmjene i ažuriranja sadržaja, te ne mora nužno odgovarati isporučenom stanju projekta.
Izazovi
Najveći izazov bio je iznimno širok i raznovrstan katalog proizvoda koji obuhvaća desetak različitih kategorija s potpuno različitim karakteristikama proizvoda — od tehničkih specifikacija autoreparaturnih materijala do građevinskog materijala i željezarije. Struktura kataloga morala je biti dovoljno fleksibilna da smjesti ovakvu raznolikost, a istovremeno dovoljno intuitivna da korisnik uvijek zna gdje se nalazi i kako pronaći ono što traži.
Uz to, jedan od ključnih ciljeva bio je osposobiti klijenta za samostalno upravljanje katalogom — što znači da cijela arhitektura shopa i CMS moraju biti postavljeni dovoljno robusno da izdrže redovito ažuriranje od strane korisnika bez tehničkog predznanja, bez narušavanja konzistentnosti i kvalitete prikaza.
Rezultat
Isporučen je kompletan WooCommerce web shop s logotipom koji Ana-A trgovini otvara online kanal prodaje i proširuje doseg izvan fizičkih lokacija. Stranica zadovoljava WCAG standarde digitalne pristupačnosti, pregledna je i intuitivna za krajnjeg korisnika, a klijent je uspješno preuzeo samostalno upravljanje katalogom i narudžbama.