Certificato DM 25/2012
Garanzia 24 Mesi
Pagamento Sicuro
Assistenza Dedicata
Made in Italy
P.IVA IT04746260985
Documento Interno · Confidenziale DOC · ACQ-RD-2026-001

Relazione di Redesign · Aprile 2026

Da impresa di prodotto
a Società Benefit:
un sito che lo dichiara.

Il passaggio a Società Benefit non è un'etichetta giuridica. È un riposizionamento. Questa relazione descrive l'intervento completo che abbiamo costruito per riflettere quel cambio sul digitale di Acqua Club Italia: un nuovo design system, una homepage riscritta sezione per sezione, un linguaggio visivo che parla a clienti, comunità e legge — nello stesso respiro.

01 Premessa

Un brand cambia stato giuridico. Il sito deve cambiare grammatica.

A inizio 2026 Acqua Club Italia ha completato la trasformazione in Società Benefit ai sensi della Legge 208/2015. Da quel momento, lo statuto vincola l'azienda a perseguire un beneficio comune misurabile, oltre al profitto. Cambia la responsabilità. Cambia il modo di comunicare con il cliente, la comunità e la legge.

Il sito esistente — costruito su un tema Shopify commerciale generico — non era in grado di sostenere quella nuova narrazione. Mancava di gerarchia editoriale, di un sistema di pattern coerente, di un linguaggio motion proprio. Mancava soprattutto di una voce riconoscibile: quella di un'impresa che vende acqua e, per scelta, ne restituisce una parte a comunità che non hanno il rubinetto.

Abbiamo scelto di non rifare il sito da zero — il tema legacy ospita catalogo, checkout, sistema fiscale, integrazione Amazon. Abbiamo scelto invece di costruire un design system v4 modulare, sovrapposto al tema, attivabile pagina per pagina. Una soluzione ingegneristica che permette di rilasciare in produzione progressivamente, senza compromettere ciò che già funziona.

02 Approccio progettuale

Un design system, non una collezione di pagine.

L'errore più comune in un redesign è risolvere problema per problema. Il risultato è un sito che cresce e perde coerenza. Per Acqua Club abbiamo invertito la sequenza: prima il sistema, poi la sua applicazione.

  • I.

    Token semantici, non valori arbitrari

    56 CSS custom property HSL coprono l'intero brand. Cambiare il blu primario significa cambiare un'unica variabile, non 200 file.

  • II.

    Tipografia editoriale

    Coppia Syne (display) + Barlow (testo) con scala fluida clamp(). Trattamento <em> riservato all'accento — coerente in tutta la home.

  • III.

    Pattern grafici motion-aware

    Ring, dot-grid, arc, orb iniettati via JS su ogni band. Parallax via requestAnimationFrame con translate — composizione su transform, zero conflitti col tema.

  • IV.

    Componenti Liquid riusabili

    Ogni sezione è una .liquid autoconclusa con schema editor Shopify. Il cliente modifica testi e immagini senza toccare codice.

03 Design System v4 — Specifiche

Il sistema in 56 token e 40 KB.

3.1 · Palette cromatica

Quattro famiglie semantiche. Ogni colore esiste in HSL — i token sono i tre componenti separati, ricomposti via hsl(var(--ac-*) / α) per qualsiasi opacità senza nuove varianti.

AC Blue--ac-bluePrimary · CTA · band--blue
AC Deep--ac-deepHeading · band--deep · scuri
AC Teal--ac-tealAccento · em su scuri · highlights
AC Blue Light--ac-blue-lightem su band scure · gradient
White--ac-bg-whiteBody · text on dark
Surface--ac-surfaceBand--surface · sand neutro

3.2 · Tipografia

Coppia editoriale: Syne (display, 800/900) per i titoli, Barlow (300–700) per testo. Scala fluida via clamp() — niente breakpoint manuali, dimensione interpolata tra 320px e 1920px di viewport.

H1L'acqua è un bene comune.clamp(2.5rem, 5.5vw, 4.75rem) · 900
H2Una grammatica condivisa.clamp(2rem, 4vw, 3rem) · 800
H3Sezione interna.clamp(1.375rem, 2.5vw, 1.875rem) · 700
LeadParagrafo introduttivo, leggibile, con buon contrasto.clamp(1rem, 1.25vw, 1.125rem) · 400
EyebrowEtichetta sezione0.6875rem · 700 · letter-spacing 0.18em

3.3 · Pattern grafici

Quattro forme: ring (cerchio outline), arc (semicerchio), dot-grid (matrice puntiforme), orb (alone radiale). Iniettate via injectBandPatterns() in ac-v4-motion.js su ogni .ac-band--* al DOMContentLoaded e al shopify:section:load per il theme editor.

Ringopacity .30 · drift 9s
Arcopacity .35 · orbit 26s
Dot-gridopacity .55 · breath 8s
Orbradial · 60% blur

3.4 · Motion system

Tre layer indipendenti, un solo file JS (~10 KB minified):

  • Parallax — RAF + element.style.translate. Velocità: up −0.28, down +0.22, up-fast −0.45. Composizione pulita su transform esistenti.
  • Revealsdata-ac-reveal="up|left|right" con IntersectionObserver a soglia 12%. Stagger via data-ac-reveal-delay.
  • Magnetic CTA — bottoni con effetto magnete su mouseover (desktop only).

3.5 · Componenti chiave

Hero ModernSlideshow autoplay con badge HORECA, video card secondaria, eyebrow brand, H1 fluido
Category Cards PremiumCard 16:9 con immagine, overlay calibrato, badge tipologia, CTA con underline animata
Scroll Sequence StickySequenza WebP scroll-driven canvas + feature cards con highlight RiPET
Featured CollectionHeader card immagine 16:9, prodotti completi, quickbuy, CTA bottom configurabile
Benefit StatementTwo-column con immagine animata + testo lungo formato editoriale
CTA FinaleBand conclusiva con varianti colore (blue/teal/deep) e magnetic button
04 Homepage — Confronto sezione per sezione

Otto sezioni riscritte. Stessa struttura informativa, voce nuova.

La homepage è stata riscritta mantenendo invariata la sequenza di contenuti — il viaggio del visitatore non cambia. Cambia il modo in cui ogni nodo del viaggio comunica. Per ognuna delle 9 sezioni principali, sotto, riportiamo: stato attuale (live), nuovo stato (staging), motivazione del cambiamento, intervento tecnico.

4.1

Hero — slideshow + badge HORECA

Live

Hero singolo statico, video full-bleed con titolo sovrapposto. Nessuna gerarchia chiara, nessun badge di posizionamento, CTA generica.

Staging

Slideshow modulare con autoplay, badge HORECA / Aziende / Casa, eyebrow brand "Società Benefit · 2.000+ clienti", H1 con em accent, CTA primaria ancora a "Erogatori a Boccione" e secondaria a contatti.

Interventosection__hero-modern--v4.liquid · 480 righe Liquid+CSS · video card secondaria 9:16 con overflow controllato · badge stilizzato come ac-ccp4-card__badge per coerenza brand.

4.2

Le nostre soluzioni — Category Cards Premium

Live

Griglia di immagini quadrate piatte con titolo sotto. Nessun racconto del prodotto, nessuna distinzione fra le tipologie.

Staging

4 card 16:9 con immagine prodotto, overlay calibrato per leggibilità, eyebrow tipologia, titolo + breve descrizione + CTA con underline animata. Hover: lift 6px + cambio colore CTA.

Interventocategory-cards-premium--v4.liquid · titolo H2 promosso a inline_richtext per consentire <em> · setting "Colore CTA" con 4 varianti per card (white/teal/blue/gold).

4.3

Boccioni — Scroll Sequence Sticky

Live

Non esiste sul live. La storia del boccione (sorgente → ufficio → ritiro circolare) è frammentata su 3 sezioni separate e poco connesse.

Staging

Sezione due-colonne sticky: a sinistra sequenza WebP scroll-driven su <canvas> (40+ frame), a destra 3 feature card sincronizzate. Una card highlight "Economia circolare RiPET" — −1.200 bottiglie/anno per postazione.

Interventosection__scroll-sequence-sticky--v4.liquid · canvas 16:9 con object-fit: cover · prefetch frame · prog bar opzionale · z-index canvas-frame configurabile · feature card variant "highlight" + 4 stili background per card normali.

4.4

Featured Collection — Osmosi · Boccione · Rete

Live

3 sezioni "Featured collection" del tema Booster: prodotti in fila senza titolo di sezione, niente contesto, link "vedi tutti" laterale poco visibile.

Staging

Header card 16:9 con immagine di sfondo + titolo grande nel terzo sinistro "ariolo". Prodotti completi (titolo, prezzo, badge, quickbuy). Nuovo: pulsante "Vedi di più" configurabile in 4 stili (outline / solid / teal / ghost).

Interventosection__featured-collection--v4.liquid · prodotti senza prezzo visibile mostrano "Scopri" che linka al prodotto · CTA bottom centrato responsive · tutto via setting.

4.5

Service Cards — "Installi e dimentichi"

Live

Sezione testuale generica che elenca i servizi senza distinguere visivamente.

Staging

Stessi componenti delle Category Cards ma orientati al servizio: installazione, manutenzione, assistenza. Rinforza la promessa "ci pensiamo noi".

Intervento — riuso del componente category-cards-premium--v4 con band --surface chiaro e icone servizio.

4.6

Banner Borg & Overström

Live

Immagine generica con scritta sopra, nessuna gerarchia.

Staging

Image banner editoriale con colonna testo + immagine prodotto, badge "Partnership", CTA verso pagina partner.

Interventosection__image-banner--v4.liquid con configurazione layout-text-side e overflow controllato per immagini bleed.

4.7

Statement Benefit — "Ogni acqua fa del bene"

Live

Non esiste. La narrazione Società Benefit è completamente assente dalla home.

Staging

Sezione manifesto two-column: a sinistra il copy lungo "ogni acqua che vendiamo fa del bene concreto"; a destra la goccina brand circondata da anelli SVG concentrici animati. Link a /pages/progetti-sociali.

Interventosection__benefit-statement--v4.liquid · animazione ac-bsf-rings 18s lineare · drop-shadow blue 28% sull'immagine · responsive con stack mobile.

4.8

Blog v4

Live

Card blog del tema Booster, layout standard.

Staging

Layout editoriale 1+2: il primo articolo grande con immagine 16:9, gli altri due affiancati. Eyebrow "Aggiornamenti", titolo H2 con em accent.

Interventosection__blog--v4.liquid con grid asimmetrico responsive.

4.9

CTA finale

Live

Footer commerciale standard, nessuna chiamata d'azione conclusiva.

Staging

Band --blue con pattern ring + dot-grid in parallax, H2 dichiarativo "Pronto a scoprire la soluzione giusta?", CTA magnetic linked al form contatti.

Interventosection__cta-finale--v4.liquid · 3 varianti band color · pattern injection automatica.

05 Esteso · Pagine Sociali

La narrazione Società Benefit. Quattro pagine, una voce.

/pages/progetti-sociali

Hub unificato (assorbe la vecchia /pages/societa-benefit con redirect 301). Hero a 2 colonne: a sinistra manifesto + stat row, a destra le 3 pillar card "Profitto sostenibile · Impatto sociale · Meno plastica". Sotto: numeri d'impatto, progetti in corso, relazione, CTA finale.

/pages/progetti-pozzo-brasile-zumbi

Pagina progetto: hero con due immagini (paesaggio + ritratto), storytelling lungo, "Il pozzo in cifre" con foto editoriali, citazione del partner locale. Image picker editor-friendly per le 3 foto della sezione impatto.

/pages/progetti-carimate-borgo-musica

Pagina progetto culturale: hero con piazza da dietro, sezione unificata "L'inaugurazione + La nostra targa", partner del progetto in seconda posizione con loghi Pro Loco e BCC Cantù.

/pages/societa-benefit

Eliminata. Ridondante con /progetti-sociali — redirect 301 permanente preserva SEO ed evita duplicazione.

06 Numeri del lavoro

I dati, perché un design system si misura.

56Token CSS0 duplicati
40 KBSkin CSS227 regole
5 KBTokens CSSHSL semantici
~10 KBMotion JSParallax + reveals
12+Sezioni v4 nuoveTutte editor-friendly
4Pagine socialiHub + 3 progetti
301Redirect SEOsocieta-benefit → progetti-sociali
100%Mobile responsiveClamp fluido 320–1920

Qualità del codice

  • Zero conflitti con il tema Booster legacy — il DS v4 è scritto sotto namespace .ac-* e non sovrascrive selettori del tema se non in pochi override mirati e documentati.
  • Editor-first — ogni sezione ha schema Shopify completo: il cliente modifica testi, immagini, colori CTA, link senza toccare codice.
  • Prefers-reduced-motion rispettato: gli utenti che lo richiedono vedono la pagina senza parallax e con animazioni a durata 0.
  • Accessibilità — contrasti AA verificati su tutte le band, aria-hidden sui pattern decorativi, focus states custom, prefers-reduced-motion handling.
  • Performance — pattern via JS (no SVG inline ridondante), immagini con loading="lazy" e image_url: width Shopify, canvas sequenza con prefetch.
07 Roadmap di rilascio

Tre passi al go-live. Senza interrompere il business.

  1. 01

    Approvazione cliente

    Walk-through del sito staging (tema 195931701582) con il committente. Raccolta feedback su micro-copy, immagini, CTA. Iterazione finale.

  2. 02

    Switch staging → produzione

    Pubblicazione del tema staging come tema live. Backup automatico del tema legacy (182812541262). Rollback disponibile in 1 click.

  3. 03

    Estensione DS v4 al sito intero

    Pagine residue da migrare: About, FAQ, Contatti, Termini, Spedizione, Resi. Stima: 2–3 settimane di lavoro distribuito. Nessun impatto sull'operatività del catalogo o del checkout durante la migrazione.

— Studio Arven · Web Design & Engineering