Il Cliente

Boring Litter è un brand italiano che ha rivoluzionato il concetto di lettiera per gatti progettando un prodotto in acciaio inox pensato per durare nel tempo e semplificare la vita quotidiana di chi vive con un felino. La promessa del brand è chiara e ambiziosa: eliminare i cattivi odori, rendere la pulizia rapida, mantenere un'igiene elevata e ridurre gli sprechi legati alle lettiere tradizionali in plastica.

Con un e-commerce su piattaforma Shopify (boringlitter.it), il brand si rivolge a un pubblico consapevole, attento alla qualità e alla sostenibilità, che cerca una soluzione definitiva per la gestione dell'igiene del proprio gatto.

La Sfida

Boring Litter offre un prodotto di alta gamma con alcune varianti (modello a bordo aperto e a bordo chiuso), oltre ad una gamma di accessori complementari come la LittyBag. La pagina prodotto (PDP) esistente, tuttavia, non riusciva a guidare l'utente in modo efficace attraverso la scelta del modello, della quantità e degli accessori opzionali.

Problematiche Identificate

1. Processo di scelta poco guidato: l'utente doveva orientarsi autonomamente tra varianti, quantità e accessori senza un percorso strutturato
2. Scarsa chiarezza nelle differenze tra varianti: le distinzioni tra modello a bordo aperto e bordo chiuso non erano immediatamente comprensibili
3. Opportunità di upsell non sfruttate: gli accessori complementari e i prodotti correlati (LittyBag) non venivano valorizzati adeguatamente all'interno del flusso di acquisto
4. Attrito nella configurazione: l'assenza di un riepilogo dinamico e di un pulsante di aggiunta al carrello sempre visibile creava frizione, soprattutto su mobile
5. Gestione pre-order complessa: il brand necessitava di un sistema flessibile per gestire lanci con accesso riservato tramite whitelist e pre-ordini

Obiettivi del Progetto

Il cliente aveva obiettivi precisi:

1. Aumentare la chiarezza nella scelta delle varianti e delle quantità
2. Ridurre l'attrito durante il processo di configurazione del prodotto
3. Valorizzare prodotti correlati e accessori all'interno del flusso di acquisto
4. Garantire una UX fluida e coerente su mobile e desktop
5. Integrare meccaniche di pre-order e accessi riservati senza interrompere il flusso d'acquisto
6. Dotare il merchant di strumenti di analisi comportamentale per ottimizzazioni future

Il Nostro Approccio

Fase 1: Discovery e Analisi

Il progetto è iniziato con una call di onboarding e una fase di analisi approfondita per comprendere le esigenze specifiche di Boring Litter. Il team Hoculus ha condotto:

• Analisi del flusso di acquisto esistente: mappatura dell'esperienza utente sulla PDP attuale per identificare i punti di attrito
• Raccolta requisiti dettagliata: sessioni di allineamento con il cliente per definire il comportamento atteso di ogni step del configuratore
• Studio delle specifiche di prodotto: comprensione delle varianti (bordo aperto vs bordo chiuso), delle combinazioni di quantità e della logica degli sconti progressivi
• Definizione dell'architettura dati: progettazione della struttura Metaobject e Metafield necessaria per alimentare il configuratore in modo dinamico e gestibile dal merchant

Fase 2: Design UX/UI

La fase di design ha rappresentato un pilastro fondamentale del progetto. È stato progettato un flusso step-by-step completo, in linea con il look & feel del sito esistente, articolato nei seguenti passaggi:

• Step 1: Selezione del modello: progettazione di card visive per la scelta tra bordo aperto e bordo chiuso, con un pop-up di supporto attivabile in caso di dubbi, contenente testi e immagini esplicative fornite dal cliente
• Step 2: Selezione della quantità: layout dedicato con possibilità di differenziare le varianti nel caso di acquisti multipli, con indicazione dinamica degli sconti progressivi
• Step 3: Add-on: sezione dedicata agli accessori complementari con selezione intuitiva
• Sezione LittyBag: area promozionale per il prodotto correlato di punta, con analisi dedicata per la modalità di integrazione più efficace nel flusso
• CTA sticky "Add to Cart": pulsante sempre visibile dopo lo scroll della sezione configuratore, con riepilogo dinamico aggiornato in tempo reale

Il design è stato sviluppato sia per desktop che per mobile, con annotazioni tecniche dettagliate per guidare la fase di sviluppo. Sono state gestite revisioni iterative con il cliente per affinare ogni dettaglio dell'interfaccia.

Fase 3: Sviluppo e Implementazione

Lo sviluppo ha tradotto il design in una soluzione tecnica robusta e performante, affrontando diverse sfide architetturali.

La Soluzione Realizzata

1. Configuratore Step-by-Step (Step 1 e 2)

Il cuore del progetto è un nuovo layout della PDP strutturato come un configuratore guidato. Lo Step 1 permette la selezione del modello della lettiera tramite card visive, mentre lo Step 2 gestisce la scelta della quantità attraverso blocchi alimentati da Metaobject.

Ogni blocco quantità è configurabile e contiene:

• Quantità della combinazione
• Sottotitolo con placeholder per il risparmio calcolato
• Badge promozionale
• Sconto applicato automaticamente al carrello
• Prezzo totale della combinazione

Al cambio di selezione nello Step 1, tutti i radio button dello Step 2 si aggiornano automaticamente sulla variante selezionata e l'immagine principale della PDP cambia di conseguenza. Il form di aggiunta al carrello gestisce varianti e quantità multiple tramite input nascosti, permettendo l'aggiunta simultanea di più prodotti.

2. Add-on e Prodotti Complementari (Step 3)

Lo Step 3 presenta un blocco dedicato agli accessori con supporto per dati sia statici che dinamici (tramite funzionalità Repeater e Metafield/Metaobject). Include:

• Tooltip per la selezione della quantità add-on
• Logica di selezione automatica dell'add-on al crescere della quantità selezionata nello Step 2, per incentivare l'acquisto di accessori complementari
• Icona informativa con modale dettagliata per ogni add-on, gestita tramite metafield (titolo, immagine e testo)

3. Modali Informative

Per migliorare la comprensione del prodotto sono state implementate due tipologie di modale:

• Modale differenze varianti: si attiva quando sono disponibili più varianti sul prodotto e mostra un confronto chiaro tra le opzioni. Ogni variante dispone di un metafield dedicato per la descrizione personalizzata
• Modale add-on: al click sull'icona informativa o sull'add-on stesso, si apre una modale con contenuti gestibili dal merchant (titolo, immagine e testo) tramite metafield

Entrambe sono state realizzate come Custom Element per garantire incapsulamento e riutilizzabilità.

4. Sezione LittyBag (Featured Product)

All'interno del template della PDP è stata integrata una sezione promozionale dedicata al prodotto correlato di punta: la LittyBag. Questa sezione è completamente gestibile dall'editor del tema Shopify e consente al merchant di:

• Selezionare il prodotto da promuovere
• Mostrare nome, immagine, prezzo e badge
• Configurare la CTA per rimandare alla PDP dedicata oppure abilitare l'aggiunta al carrello indipendente

5. Sticky Add to Cart e Summary

Per garantire che l'azione di acquisto sia sempre accessibile, è stata implementata una sezione ATC sticky che appare automaticamente dopo lo scroll oltre i blocchi del configuratore. La soluzione utilizza l'Intersection Observer API per rilevare quando l'ultimo step esce dal viewport verso l'alto, attivando la visualizzazione della barra sticky.

Il pulsante ATC floating compare dopo la selezione dello Step 2 e resta visibile fino alla sovrapposizione con il pulsante statico. I comportamenti dei bottoni replicano esattamente le funzionalità di quelli nativi della PDP.

6. Comportamento Avanzato dell'Add to Cart

Per ottimizzare il flusso utente sono stati implementati comportamenti avanzati:

• Nessuna preselezione della quantità nello Step 2, per guidare l'utente verso una scelta consapevole
• Scroll automatico allo step successivo dopo ogni selezione, posizionandolo al centro della pagina per massimizzare la visibilità
• ATC floating visibile dopo la selezione della quantità, che scompare solo quando si sovrappone al pulsante statico

7. Gestione Pre-Order

Il configuratore integra una gestione completa dei pre-ordini che replica e migliora il comportamento delle app dedicate:

• CTA personalizzabile: il testo del pulsante di aggiunta al carrello è configurabile per i prodotti in pre-order
• Attributi ordine: metafield prodotto per la consegna stimata, con un campo visibile al cliente e uno nascosto per l'automazione
• Tagging automatico: tramite Shopify Flow, gli ordini contenenti prodotti in pre-order vengono automaticamente taggati, leggendo l'attributo nascosto nel carrello

8. Accesso Riservato e Gestione Whitelist

Per supportare il lancio del nuovo configuratore, è stato sviluppato un sistema di accesso riservato:

• Prodotto Host: configurazione del prodotto principale come "ospitante" per contenere se stesso e il prodotto a bordo chiuso all'interno dello stesso configuratore
• Anteprima riservata: script personalizzato che attiva il configuratore sulla PDP solo se l'utente atterra sulla pagina con un parametro url specifico permettendo l'invio di link esclusivi agli utenti in whitelist
• Switch template post-whitelist: una volta terminata la fase di accesso riservato, è sufficiente assegnare il template "configuratore" al prodotto Host per rendere la funzionalità disponibile a tutti
• Gestione swatch da metafield: le immagini delle varianti nel selettore sono gestite tramite metafield per un controllo editoriale completo

9. Compatibilità con App di Terze Parti

Il configuratore introduce logiche custom di aggiunta al carrello che potevano entrare in conflitto con app esistenti. È stato risolto un problema di compatibilità con One Click Upsell (OCU) che consente una piena convivenza dell’app con la soluzione implementa.

Implementazione Microsoft Clarity
Per dotare il brand di strumenti di analisi comportamentale, è stato configurato Microsoft Clarity con un'implementazione ottimizzata per non impattare negativamente sulle performance del sito. Questo strumento consente di analizzare heatmap, registrazioni di sessione e comportamenti utente sulla nuova PDP, fornendo dati preziosi per ottimizzazioni future.

Processo di Quality Assurance e Go-Live

Il rilascio è stato preceduto da un processo rigoroso di quality assurance articolato in più fasi:

Revisione Interna Multi-Livello

• Revisione tecnica: verifica funzionale di tutti gli step del configuratore, della logica degli sconti e dell'interazione tra componenti
• Revisione design: confronto pixel-perfect tra l'implementazione e il design approvato, con iterazioni di fix su dettagli di layout, spaziature, tipografia e comportamenti responsive
• Revisione con il cliente: raccolta e implementazione dei feedback tramite documenti condivisi, con fix mirati su aspetti come padding laterali, font size, bullet point, prezzi sbarrati e testi dei quantity break

Checklist di Go-Live

Prima del lancio è stata seguita una checklist strutturata:

• Pulizia dei prodotti di test utilizzati durante lo sviluppo
• Allineamento tra il tema di sviluppo e il tema live con merge del codice
• Rimozione del caching bundle sul prodotto Host
• Rimozione delle restrizioni degli sconti per l'utente di test
• Invio del link con parametro URL per l'accesso whitelist
• Switch del template prodotto post-whitelist

Risultati

Miglioramenti Qualitativi

• Flusso d'acquisto più guidato e coerente: il configuratore step-by-step elimina l'incertezza dell'utente, accompagnandolo in ogni fase della scelta con feedback visivi immediati
• Migliore comprensione delle varianti: le modali informative e i pop-up di supporto rendono immediatamente chiare le differenze tra i modelli
• Maggiore visibilità di accessori e prodotti correlati: lo Step 3 e la sezione LittyBag integrano in modo naturale il cross-selling nel flusso di acquisto
• Riduzione del rischio di errori: la logica di selezione automatica e i controlli integrati prevengono configurazioni errate
• Maggiore controllo editoriale: grazie a Metafield e Metaobject, il merchant può aggiornare autonomamente testi, immagini, prezzi e descrizioni e combinazioni del configuratore senza intervento tecnico
• Strumenti di analisi avanzati: l'implementazione di Microsoft Clarity fornisce dati comportamentali per guidare ottimizzazioni data-driven della nuova esperienza d'acquisto
• Flessibilità operativa: il sistema di accesso riservato e pre-order permette di gestire lanci di prodotto e waiting list senza modifiche al codice

Stack Tecnologico

Deliverable

• Design completo della PDP configuratore (desktop e mobile)
• Configuratore step-by-step con 3 step (modello, quantità, add-on)
• Sezione featured product (LittyBag) integrata nella PDP
• Sezione ATC sticky con summary dinamico
• Modali informative per varianti e add-on
• Sistema di gestione pre-order con tagging automatico Shopify Flow
• Sistema di accesso riservato via whitelist con switch template
• Fix di compatibilità con One Click Upsell (OCU)
• Implementazione Microsoft Clarity per analisi comportamentale