Cos'è CBR Service
Realtà di servizi per eventi: noleggio attrezzature selezionate, personale di sala formato e gestione eventi. Identità nero e oro, tono premium, presenza online allineata al brand live.
Case study · UX/UI · Sito luxury
Eventi e noleggio, premium
Sito WordPress su misura per CBR Service: catalogo noleggio con filtri e dettaglio, carrello preventivo, personale di sala ed eventi, live su servicecbr.it.
00
Overview
CBR Service opera nel catering e negli eventi di fascia alta. Il sito digitale unisce noleggio attrezzature, personale di sala, portfolio eventi e richiesta preventivo in un'unica esperienza luxury nero/oro.
Cosa volevano
Presenza online premium, percorso preventivo chiaro dal catalogo al contatto, e autonomia operativa per aggiornare il catalogo noleggio senza dipendere da terzi.
Chi volevano raggiungere
Organizzatori di eventi: trovano attrezzature e personale, costruiscono un preventivo in pochi passaggi. Operatività CBR: gestisce inventario foto, titoli, categorie e prezzi dal gestionale catalogo.
Cosa volevano ottimizzare
Catalogo e carrello mobile-first, brand nero/oro coerente, menu hamburger full-screen oro, tipografia leggibile (14px+ mobile, 16/18 desktop) e autonomia sul catalogo live in Noleggio.
01
Low-Fid Linear Wireflow
Due percorsi sullo stesso inventario: visitatore che costruisce un preventivo e admin che pubblica oggetti nel catalogo Noleggio.
Sito pubblico: home, noleggio, personale, dettaglio catalogo, carrello preventivo, contatti
Utente
Home
Noleggio / Personale
Dettaglio
Carrello
Contatti / Preventivo
Portale admin: accesso gestionale, builder catalogo, salvataggio voce, oggetto live in Noleggio
Admin
Builder catalogo
Salva voce
Live su Noleggio
02
User Interview
Due voci emerse dal lavoro sul prodotto: organizzatore eventi e operatività CBR, con problemi e richieste tradotte in insight di design.
User interview · Organizzatrice eventi
Giulia Ferretti
Cliente tipo: ha una location e una data, deve capire in fretta cosa noleggiare, in che quantità, e mandare un preventivo senza perdere pezzi tra telefono e email.
Insight
-
01 Filtri catalogo
«Se cerco bicchieri o banconi, voglio filtrare subito. Non posso scorrere centinaia di foto senza categorie chiare.»
Cosa abbiamo integrato: catalogo Noleggio con filtri per categoria e scheda dettaglio in modal, così il percorso resta nella pagina senza disorientarsi.
-
02 Quantità e carrello
«Mi serve sapere quante unità metto nel preventivo. Se perdo il conteggio, ricomincio da zero.»
Cosa abbiamo integrato: carrello flottante con quantità per voce, sempre raggiungibile mentre si esplora il catalogo.
-
03 Menu mobile
«Dal telefono voglio arrivare a Noleggio o Contatti in un tap, senza cacciare link piccoli.»
Cosa abbiamo integrato: hamburger full-screen con accento oro, voci grandi e gerarchia chiara su mobile-first.
-
04 Preventivo con location
«Nel form voglio indicare dove si svolge l'evento. Senza location il preventivo non ha senso.»
Cosa abbiamo integrato: flusso Contatti/Preventivo con campo location e riepilogo del carrello, così la richiesta arriva completa.
User interview · Operatività
Andrea Moscara
Titolare e fondatore: aggiorna il catalogo noleggio in autonomia. Serve un gestionale chiaro per foto, titolo, categorie e prezzo, con oggetti che compaiono subito in Noleggio.
Insight
-
01 Builder catalogo
«Se cambio un prezzo o una foto, voglio farlo io, senza aspettare un intervento esterno.»
Cosa abbiamo integrato: gestionale catalogo con upload foto, titolo, categorie e prezzo: salva e la voce è live su Noleggio.
-
02 Coerenza brand
«Il sito deve sembrare CBR: nero, oro, elegante. Niente look generico da template.»
Cosa abbiamo integrato: identità nero/oro, Playfair Display + Lato, superfici scure e accenti oro su CTA e menu.
-
03 Inventario onesto
«Ciò che pubblico deve essere ciò che il cliente vede. Se tolgo un oggetto, sparisce dal catalogo.»
Cosa abbiamo integrato: un solo inventario: il builder alimenta direttamente la vetrina Noleggio pubblica.
-
04 Leggibilità mobile
«Molti clienti aprono il sito dal telefono la sera. Se il testo è piccolo, abbandonano.»
Cosa abbiamo integrato: pavimenti tipografici 14px+ su mobile e 16/18 su desktop, con gerarchia chiara su catalogo e form.
03
Project Roadmap
-
01
UX Research
Interviste e analisi degli insight emersi.
-
02
Initial User Flows
Prima definizione dei percorsi utente e admin.
-
03
Wireframing
Strutturazione iniziale di pagine, contenuti e funzionalità.
-
04
High-Fidelity UI Design
Progettazione dettagliata dell'interfaccia e del visual design.
-
05
Client Validation
Presentazione, test admin e raccolta dei feedback del cliente.
-
06
Web Implementation
Implementazione e pubblicazione del sito.
-
07
User Testing
Review del sito e raccolta dei feedback degli utenti.
04
Site map
Tre percorsi di conversione sul sito pubblico e un flusso admin lineare. Ogni freccia indica un'azione reale: nav, modal, carrello o form.
Sito pubblico
Hub: Home · Noleggio · Personale · Eventi · Chi siamo · Contatti
Percorso A · Noleggio e preventivo
-
Home
servicecbr.it
-
Nav · Noleggio
-
Noleggio
/noleggio
-
Apri dettaglio (modal)
-
Dettaglio oggetto
modal
-
Aggiungi al carrello
-
Carrello preventivo
floating cart
-
Richiedi preventivo
-
Contatti / Preventivo
/contatti
Percorso B · Personale
-
Home
servicecbr.it
-
Nav · Personale
-
Personale di sala
/personale
+ CTA → Contatti / Preventivo
Percorso C · Eventi
-
Home
servicecbr.it
-
Nav · Eventi
-
Eventi
/eventi
Collegamenti trasversali
- Logo → Home da ogni pagina
- Carrello flottante → Preventivo da Noleggio
- Chi siamo · Contatti in nav globale
Portale admin
Gestionale catalogo · stesso inventario della vetrina Noleggio
Flusso catalogo
-
Accesso gestionale
gestionale
-
Accedi
-
Lista catalogo
lista
-
Nuova voce · Modifica
-
Builder catalogo
builder
-
Torna alla listaoppureSalva voce
-
Noleggio
/noleggio · vetrina
Collegamenti trasversali
- Lista catalogo → Builder · Modifica voce
- Salva → Oggetto live in Noleggio
- Builder / Lista → Esci dal gestionale
05
Product & design
Identità visiva allineata al sito live servicecbr.it: palette nero/oro, tipografia Playfair + Lato e token UI coerenti con il brand CBR.
Logo ufficiale CBR Service. Marchio luxury su nero: stesso asset in header, hero e footer del sito live.
Palette
-
Nero luxury Sfondo principale, hero, header e aree scure del sito.
-
Nero elevato Sezioni secondarie, pannelli e superfici in rilievo.
-
Oro soft Bordi, glow e superfici accentuate.
-
Oro accent CTA, link, titoli insight, hamburger e elementi interattivi.
-
Champagne Testo primario e contrasto caldo su nero.
Tipografia
-
Playfair Display Hero H1, titoli sezione e nomi persona.
-
Lato Nav, eyebrow, bottoni, tabella e chip.
-
Montserrat Paragrafi, citazioni, descrizioni roadmap e testo tabella.
Decisioni UX / UI
| Decisione UX / UI | Perché | Scartato |
|---|---|---|
| Pavimenti tipografici mobile | 14px+ mobile, 16/18 desktop per leggibilità eventi | Testo piccolo da template |
| Carrello flottante preventivo | Quantità sempre visibili mentre si esplora il catalogo | Solo form contatti statico |
| Dettaglio catalogo in modal | Focus sul prodotto senza perdere contesto filtri | Pagina dettaglio isolata obbligatoria |
| Brand nero / oro / champagne | Allineamento al brand live CBR | Palette grigia generica |
| Hamburger full-screen oro | Nav mobile primaria e riconoscibile | Menu compresso tipico tema |
↳
Schermate prodotto
Visual dal sito live servicecbr.it e dal catalogo: atmosfera brand, oggetto noleggio ed eventi reali, non mockup inventati.
Brand · Home
Hero luxury
Primo impatto nero/oro: logo, claim e ingresso ai servizi (noleggio, personale, eventi, contatti) senza clutter da dashboard.
Brand Home
→ Scelte UX
Catalogo · Noleggio
Voce catalogo
Oggetti reali del catalogo (foto, titolo, categoria): base del percorso filtri → dettaglio → carrello preventivo.
Noleggio Catalogo
→ Scelte UX
Percorso · Eventi
Eventi firmati CBR
Portfolio eventi reali: prova sociale e tono luxury, collegati alla nav Eventi e al percorso Contatti.
Eventi Portfolio
→ Project Roadmap06
Outcome
Esiti di prodotto e obiettivi di design (non metriche inventate): leggibilità mobile, percorso preventivo unificato e catalogo gestito in autonomia.
14px+
Leggibilità mobile
Obiettivo di design: testo da 14px+ su mobile e 16/18 su desktop, per consultare catalogo e preventivo anche in mobilità.
1 flow
Percorso preventivo
Un solo flusso: Noleggio → dettaglio → carrello con quantità → Contatti/Preventivo con location.
self-serve
Catalogo self-serve
Ops CBR aggiorna foto, titoli, categorie e prezzi dal gestionale: le voci compaiono live in Noleggio.