Misfit
Un ecommerce narativ pentru ceasuri nonconformiste
Un concept project care acoperă tot traseul: de la pagina de serie unde utilizatorul descoperă brandul, până la confirmarea comenzii. Brand, identitate și magazin, construite ca un singur sistem.
13 pagini · 8 produse · 3 pași de checkout · dark mode complet · desktop + mobile
Skill-uri implicate
De ce un magazin de ceasuri?
Am o pasiune veche pentru ceasuri. Dețin câteva și vreau să îmi cresc colecția pe viitor.
La un moment dat mi-am pus o întrebare simplă: cum ar arăta un magazin de ceasuri care nu se comportă ca un magazin?
Un ceas bun nu e un gadget, e o decizie. Și decizia aia merită un site pe măsură.
Cataloage,
nu decizii
Provocarea reală nu a fost vizuală, ci structurală. Un site care funcționează ca experiență de brand și, în același timp, livrează un checkout fără ezitare. Cele două nu se exclud, dar trebuie proiectate împreună de la început.
Problema cu majoritatea magazinelor de ceasuri online
Arată toate la fel: fond alb, grid de produse, filtru de preț
Funcționează, dar nu conving pe nimeni
Nu spun nimic despre ce înseamnă să porți acel ceas
Riscuri pe care le-am evitat
Un dark mode decorativ care omoară lizibilitatea
Pagini de serie narative care nu duc nicăieri concret
Un checkout care rupe tonul brandului la pasul 2
Scarcity superficial, fără logică vizuală în spate
Patru decizii care au modelat tot proiectul
Toate paginile, toate componentele, toți pașii din checkout au pornit din patru decizii structurale. Restul a fost execuție.
De la curiozitate la ceas pe mână
Am mapat tot traseul utilizatorului înainte să construiesc ecranele. De la prima intrare pe site până la confirmarea comenzii, inclusiv ramificațiile: cu cont sau fără, livrare standard sau express, stare de eroare 404.
Fluxul acoperă
Intrare prin homepage sau direct pe landing page per serie
Pagină de produs cu color switcher sincronizat
Coș cu sumar comandă și elemente de încredere
Checkout cu cont (date pre-completate) sau fără cont (formular complet)
Livrare standard gratuită sau livrare express plătită
Confirmare comandă cu număr unic și dată estimată de livrare
Mai întâi sistemul, apoi ecranele
Am construit un design system complet înainte să încep ecranele. Tokeni de culoare, scală tipografică, componente reutilizabile, spacing, stări complete. Fără el, ar fi trebuit să iau aceleași decizii de 50 de ori, pe 13 pagini diferite.
Ce include sistemul:
Paletă cu un singur accent: lime #B8FF00, prezent pe toate cele 8 produse, măcar pe acul secundar
Neutrale dark mode plus culori semantice: success, warning, error
Tipografie duală: Bebas Neue pentru display, DM Sans pentru body
Componente: butoane , inputs cu stări complete, badge-uri de stoc, card de produs, navbar, sumar comandă, indicator de pași, toast-uri, modal
Iconografie: Google Material Icons
Același schelet, trei atmosfere
Punctul forte al proiectului. Fiecare serie are propria pagină, cu identitate vizuală proprie, dar bazată pe același sistem. Utilizatorul nu răsfoiește un catalog, intră într-o colecție.
Seria 01 e tehnică. Seria 02 e caldă. Ediții Speciale e dramatică.
Structura paginii
Hero cu narativă de brand, color switcher activ și CTA principal
Secțiune cu originea seriei și de ce există
Secțiune cu construcția cu tabel de specificații tehnice complete
Grid de variante cu nume, preț și status de stoc
Recenzii utilizatori
CTA final cu color switcher
Un ceas bun nu e un gadget, e o decizie. Și decizia aia merită un site pe măsură.
Trei pași, o decizie per pas
Din pagina de serie direct în coș. Decizia s-a format deja, nu mai are sens un ecran intermediar care repetă aceleași imagini și aceleași specificații.
Ce am pus în coș, ca să nu piardă utilizatorul aici
Sumar comandă cu defalcare clară: subtotal, transport, TVA, total
Trust signals vizibile: retur gratuit, asamblat în Marea Britanie, garanție 2 ani
SSL securizat și criptare 256-bit
Visa, Mastercard, Apple Pay, Google Pay afișate ca semnal de finețe
Livrare estimată concretă: Joi, 10 Aprilie, nu 3-5 zile lucrătoare
Preț final. Fără costuri ascunse sub total
Checkout-ul vine imediat după. Aici utilizatorul scoate cardul, orice ezitare se plătește cu un coș abandonat. Indicator de progres lime persistent pe toate trei pașii.
Cei 3 pași:
Pasul 1: Date de contact și adresă (sau pre-completate dacă are cont)
Pasul 2: Metodă de livrare (standard gratuită sau express 14,99€)
Pasul 3: Plată (card, Apple Pay, Google Pay)
Scarcity stratificat, fără să devină insistent
Seria Ediții Speciale primește un tratament aparte. Produse limitate sub 150/300 de bucăți pe variantă, fără re-runs și fără restocuri. Scarcity-ul trebuie să fie vizibil fără să devină insistent. Diferența între urgent și agasant e subțire.
Scarcity cu logică vizuală în spate:
Counter live în hero: bucăți rămase și bucăți vândute, vizibile imediat
Titlu hero: CÂND AU DISPĂRUT AU DISPĂRUT
Progress bar de stoc subțire, sub fiecare variantă
CTA ASIGURĂ-ȚI EXEMPLARUL în loc de CUMPĂRĂ ACUM
Numerotare individuală a fiecărui exemplar, cu certificat de autenticitate
CTA final cu cu numărul exact de bucăți rămase per variantă
Fiecare semnal de urgență spune același lucru dintr-un unghi diferit. Repetiția nu obosește utilizatorul. Îl convinge.
Un cont nu e doar un profil
Pagina de cont nu e o listă administrativă, e un loc cu personalitate. Pentru că o persoană care își face cont la MISFIT a făcut o alegere, iar alegerea aia merită recunoscută.
Ce găsește utilizatorul în cont
Profil cu badge-uri exclusive: tier-ul curent, ediția specială deținută, anul de la care e client
Colecția personală cu ceasurile cumpărate, fiecare cu numărul de serie individual
Reducere permanentă de 10% cu un cod care nu expiră niciodată
Sistem de tier-uri în 3 niveluri: OUTSIDER, MISFIT, OG MISFIT
Lista comenzilor și acces la urmărirea livrărilor
Sistemul de tier-uri nu e gamification ieftină. E un mod de a transforma cumpărarea într-o relație. Cu cât utilizatorul cumpără mai mult, cu atât intră mai adânc în club, iar beneficiile cresc gradual.
AI folosit cu cap, nu de dragul lui
MISFIT e un brand fictiv. Nu există produse fizice, nu există studio foto, nu există buget de producție. Dar un ecommerce de ceasuri are nevoie de imagini convingătoare, nu de randări obosite de stock. Soluția: AI, folosit cu disciplină.
Am pornit de la ce știu și ce apreciez la un ceas
Materialele și finisajele: DLC coating, sticlă safir, curea piele sau cauciuc FKM
Cum cade lumina pe un cadran sunburst
Cum arată un ceas negru mat în lumină directă față de indirectă
Contrastul dintre accentul lime și o carcasă neagră
Procesul a mers în 4 straturi: research vizual, prompt structurat în JSON, generare în Magnific Spaces cu Google Nano Banana, selecție finală.
Nu orice prompt iese din prima. Dar când știi exact ce cauți, recunoști imediat când ai găsit.
Ce am învățat?
MISFIT a fost un proiect end-to-end. Identitate de brand și produs.
De obicei brandul există deja, iar designul se construiește peste el. Aici a trebuit să le construiesc pe ambele, ceea ce face fiecare decizie mai grea, dar și mai personală.
Ce am consolidat: tonul brandului trebuie prezent în fiecare element, inclusiv în labelurile de livrare și în CTA-urile de checkout. Cele mai importante decizii nu au fost vizuale, ci structurale: ce arăți primul, ce ascunzi, când apare CTA-ul.
Ce mi-ar plăcea să fac în continuare
Dacă aș fi apucat să implementez proiectul, aș fi vrut să testez fluxul de booking cu utilizatori reali pentru a vedea dacă cei 4 pași sunt suficient de clari și rapizi. La fel, aș fi testat dashboard-ul cu recepția unei clinici stomatologice reale, pentru a valida eficiența acestuia în activitatea de zi cu zi.
Sunt suficient de diferite ca să merite validare separată: vrei să convingă prin narativă, dar nu știi dacă utilizatorul citește sau sare direct la grid.
Aș extinde design system-ul cu stări complete pe toate componentele, nu doar pe cele din flow-ul principal.