Hoopster Shop je online trgovina za NBA Hoopster, hrvatski brend košarkaške odjeće koji radi majice i hoodice za ljude koji žive i dišu košarkašku kulturu. Dizajnirao sam i izradio cijelu stranicu, od prve skice do zadnje linije koda u checkoutu.
Zadatak
NBA Hoopster je trebao trgovinu, ne brošuru. Brend je već imao jasan identitet: košarkašku kulturu, streetwear energiju, proizvod koji ljudi stvarno žele nositi. Ono što nije imao bilo je mjesto za prodaju. Zadatak je bio jednostavno reći, a teže dobro napraviti: brza, minimalistička, na proizvod fokusirana trgovina koja od prvog dana može primati prave narudžbe, uz proračun i rok koji ima smisla za mladi brend.
Što sam napravio
Stranicu sam izradio u Webflowu, što mi je dalo brz put do čistog vizualnog sustava bez žrtvovanja kontrole nad layoutom i interakcijama. Webflow CMS pokreće katalog proizvoda, tako da nove kolekcije mogu ići uživo bez diranja koda. Tamo gdje su Webflowove ugrađene interakcije bile nedovoljne, napisao sam prilagođeni JavaScript: filtriranje i sortiranje na gridu trgovine, sitne detalje interakcije na karticama proizvoda, i kod koji spaja košaricu i checkout u jedan neprekinut tok umjesto niza odvojenih koraka.
Komercijalni dio je bio ono što mi je najviše bilo stalo napraviti kako treba. Postavio sam potpunu integraciju e-trgovine i naplate kako bi kupci mogli pregledavati ponudu, birati veličine i varijante te platiti bez frustracija. To je značilo baviti se dosadnim, ali ključnim stvarima: da se stanje košarice ispravno pamti, da validacija checkouta radi, da potvrda narudžbe stiže kako treba, i da cijeli put od stranice proizvoda do "narudžba zaprimljena" radi na mobitelu jednako dobro kao na laptopu, s obzirom da većina Hoopsterovog prometa dolazi s mobilnih uređaja.
Dizajnom sam ostao minimalistički i moderan. Košarkaška odjeća živi ili umire na tome kako djeluje fotografija proizvoda, pa se sučelje makne s puta: velikodušan bijeli prostor, suzdržan tipografski sustav i grid layout koji pušta majice i hoodice da pričaju priču. Nema nepotrebnog dekora koji se natječe s proizvodom.
Rezultat
Hoopster Shop je uživo na hoopstershop.hr kao trgovina koja radi, ne kao prototip. Daje NBA Hoopsteru pravi prodajni kanal koji odgovara identitetu brenda, lagan za njih za ažuriranje novim proizvodima i lagan za kupce da stvarno dovrše kupnju. Sloj prilagođenog JavaScripta znači da stranica zadržava jednostavnost Webflowovog vizualnog editora, a ipak se u pozadini ponaša kao prava trgovina, što je točno ravnoteža koja treba brendu u ovoj fazi: nešto što izgleda i djeluje prilagođeno bez tereta potpuno prilagođenog stacka.