UX/UI case study
Haribo.
Restilyng del sito web con introduzione e-commerce
HARIBO è un’azienda tedesca specializzata in caramelle gommose e conosciuta in tutto il mondo per i suoi iconici Orsetti d’Oro.
Fondata nel 1920 a Bonn da Hans Riegel, prende il nome dalle iniziali del fondatore e della città: HAns RIegel BOnn.
Ho iniziato con il rebranding dell’attuale logo e ho, poi, affrontato tutte le fasi del processo di design di un sito: dall’analisi iniziale dell’attuale alla creazione di soluzioni innovative per migliorare l’accessibilità, l’usabilità e l’esperienza complessiva.
Ruolo: UX/UI designer, graphic designer
Cliente: Haribo Society
Tools: FigJam; Miro; Figma; Google Form; Useberry
Fasi del progetto
01.
Rebranding.
Analisi del logo attuale
- Scarsa riducibilità: Il logotipo testuale non si adatta bene a formati molto piccoli, come la favicon del sito.
- Mancanza di un simbolo autonomo: Non ha un pittogramma distintivo da usare indipendentemente dal testo.
- Uso del bordo bianco: Se posizionato su sfondi chiari, può perdere leggibilità.
- Design datato: Pur essendo giocoso e familiare potrebbe apparire meno moderno rispetto ai trend attuali.
Logo proposto
Il nuovo logo per HARIBO è pensato con l’obiettivo di modernizzare l’identità del brand, mantenendo la sua riconoscibilità e il legame con la tradizione.
Il design introduce un orsetto stilizzato, ispirato alla storica mascotte, progettato per garantire alta pregnanza visiva e poter essere utilizzato anche separatamente dal logotipo.
Il lettering, pur rimanendo in un font sans-serif arrotondato, è stato svecchiato e reso più essenziale, eliminando il bordo per una maggiore pulizia visiva.
La palette cromatica resta fedele al marchio, con il caratteristico giallo e rosso, assicurando continuità e immediatezza nell’associazione al brand.
Palette colori
Coral Red
#FF3B3F
Philippine Yellow
#FFC700
Black Olive
#3C3C3B
Tipografia
Sans serif
KitRounded
Bold
Aa
02.
Discovery.
Competitor analysis
L’analisi dei competitor ha messo in evidenza come il sito web di HARIBO offra un’esperienza utente significativamente inferiore rispetto ai principali competitor.
La navigazione risulta poco intuitiva, con un menu non fisso e poco chiaro, una struttura informativa ridondante e l’assenza di un e-commerce. Inoltre, il sito non si rivolge a target specifici, limitando l’efficacia comunicativa e la personalizzazione dell’esperienza.
Accessibility
Attraverso lo strumento Lighthouse è stata valutata l’accessibilità del sito, il quale ha ottenuto un punteggio complessivo molto alto (99/100), segno di una buona attenzione agli standard di accessibilità.
- Il sito implementa correttamente gli attributi ARIA.
- Fornisce testi alternativi per le immagini.
- Garantisce che i link abbiano nomi riconoscibili, facilitando la navigazione per tutti gli utenti.
Con lo strumento Wave sono emerse alcune criticità legate al contrasto tra testo e sfondo, riscontrate esclusivamente nella homepage.
Survey
Dalla ricerca condotta su un campione di 30 persone è emerso che HARIBO è un brand universalmente riconosciuto, ma con una presenza digitale poco sfruttata: solo poco più della metà ha visitato il sito ufficiale.
Nonostante la maggioranza degli acquisti avvenga ancora nei supermercati, cresce l’interesse verso l’acquisto online, percepito come utile ma ancora poco frequente.
Questi dati hanno evidenziato due priorità fondamentali per il redesign: mantenere l’identità del brand traducendola nel digitale e inserire la possibilità d’acquisto online.
03.
Define.
Buyer Personas
Fatima
Ruolo: Studentessa al liceo scientifico
Età: 16 anni.
Riceve una piccola paghetta settimanale. Studia molto ma ha bisogno di piccoli momenti di leggerezza perciò acquista caramelle per condividerle con le amiche, portarle a scuola o tenerle in borsa.
Necessita di trovare prodotti facili da condividere, tipo multipack.
Paolo
Ruolo: Consumatore attento al risparmio
Età: 31 anni.
Vive in città, lavora, ha una vita stabile ma cerca sempre di risparmiare nei piccoli acquisti. Non ha figli ma compra caramelle per piccoli regali ai nipoti. Vuole trovare offerte e promozioni aggiornate, preferisce acquistare direttamente dal sito per comodità. Adora scoprire nuovi prodotti in sconto.
Greta
Ruolo: Project manager in una multinazionale e mamma
Età: 38 anni.
Sempre di corsa tra lavoro e famiglia, Greta gestisce i suoi impegni con strumenti digitali, tipo app per la spesa a domicilio. Vuole rivivere l’esperienza emotiva legata alle caramelle della sua infanzia.
Cerca, dunque, un sito dove possa acquistare caramelle Haribo facilmente per la figlia.
Tommaso
Ruolo: Nonno affettuoso
Età: 63 anni.
Pensionato, ama trascorrere tempo con i suoi tre nipoti. Quando questi vengono a trovarlo, li accoglie con caramelle e piccoli dolci di marche conosciute come Haribo.
Cerca gusti classici e confezioni assortite da acquistare su e-commerce intuitivi per la sua età.
User Journey




Pain point
Impossibilità di acquistare online.
Opportunità
Integrare un vero e-commerce nel sito. Inserire un carrello visibile, call-to-action chiare e opzioni di spedizione semplici e immediate per facilitare l’acquisto.
Pain point
Nomenclatura poco chiara nel menu di navigazione
Opportunità
Rinominare le voci del menu in modo intuitivo e orientato all’azione. Ad esempio, sostituire “Haribo Shops” con “Acquista” e mettere in evidenza la sezione promozioni per aumentarne la visibilità.
Pain point
La pagina “Prodotti” risulta visivamente caotica e poco funzionale.
Opportunità
Ottimizzare la pagina “Prodotti” rendendola più chiara, leggera e facilmente navigabile tramite filtri. Integrare al suo interno un sistema di e-commerce.
Pain point
La sezione “Promozioni” mostra solo offerte scadute
Opportunità
Archiviare le promozioni non più attive e creare una sezione “Promo attive” ben visibile in homepage.
Prototype
Nota: Ho realizzato il prototipo sia in versione desktop che mobile;in questa sede illustrerò la versione mobile, utilizzata anche per i test con gli utenti.
06.
User test.
La scelta di testare la versione mobile nasce dall’esigenza di analizzare l’esperienza utente in un contesto in cui mancano supporti visivi come l’effetto hover, che su desktop contribuisce a chiarire i percorsi di navigazione.
In particolare, il test ha permesso di osservare come gli utenti interagiscono con l’hamburger menu e se elementi come le card prodotto vengono percepiti come interattivi in modo intuitivo. I cinque partecipanti non hanno riscontrato difficoltà nella navigazione né nel completamento di un ordine.
Tuttavia, alcuni hanno avuto difficoltà ad aprire le schede prodotto e altri sono stati disorientati dalla presenza della stessa promozione visiva in due sezioni diverse del sito, che ha reso meno chiara la propria posizione all’interno della navigazione.
Interventi proposti
- Aggiungere un pulsante esplicito per accedere alla scheda prodotto, facilmente distinguibile anche da mobile, dove l’effetto hover non è disponibile.
- Rendere più evidente il breadcrumb, aumentando contrasto e dimensione.
- Diversificare visivamente la sezione promo tra homepage e shop, per evitare ambiguità.