BeatLab Institute
case
study
summary
Background
Nel contesto di un progetto accademico, ho sviluppato il prototipo di un sito web vetrina per un istituto di alta formazione specializzato in musica elettronica, con l’obiettivo di offrire un’esperienza utente chiara, coinvolgente e orientata alla conversione.
Il fine è di identificare le barriere informative e le aspettative degli utenti, fornendo loro tutte le informazioni necessarie per valutare, scegliere e intraprendere un percorso didattico personalizzato a seconda delle esigenze.
Nel progetto, ho applicato una metodologia user-centered che si è concentrata sull’ottimizzazione dell’usabilità, dell’accessibilità, della struttura dei contenuti e della chiarezza comunicativa, garantendo che ogni decisione progettuale fosse informata dai dati e dalle osservazioni raccolte durante la fase di ricerca.
Project
Sito vetrina per un istituto di alta formazione
in musica elettronica
Role
User Experience & User Interface Designer
Independent project – no team members
Skills Applied
→ UX Research & Synthesis
→ UX Strategy
→ UI & Visual Design
→ Interaction Design
→ Microcopy & UX writing
UX Deliverables
→ Personas
→ Experience Maps
→ Point of View
→ Unique Selling Proposition
→ How Might We Questions
→ Story Boards & User Scenarios
→ Information Architecture
→ User Flows
→ Design System
→ High Fidelity Prototyping
Tools Used
Figma · Adobe Suite · AI Tools
Design Process
Stage 1
Emphaty
La fase esplorativa del progetto è iniziata con la definizione di un chiaro obiettivo di ricerca: comprendere in profondità i bisogni, le aspettative e le difficoltà degli utenti che si relazionano ai percorsi di formazione in musica elettronica.
Attraverso una combinazione di analisi di mercato, benchmark dei competitor e social listening, è stato possibile individuare i principali punti di attrito: il disorientamento degli utenti nella fase di scelta del corso, la difficoltà a fidarsi delle promesse formative e il bisogno trasversale di supporto personalizzato, guida e chiarezza.
Questi insight sono stati fondamentali per definire il tono della comunicazione, la logica dell’architettura informativa e le soluzioni interattive del prototipo.
Stage 2
Define
La fase di definizione ha tradotto gli insight emersi in rappresentazioni concrete del target. Ogni segmento è stato rappresentato tramite personas realistiche che raccontano in modo empatico bisogni, emozioni e frizioni specifiche.
Attraverso le experience map ho analizzato il percorso emotivo e pratico che ciascuna di queste persone potrebbe intraprendere interagendo con un sito vetrina formativo.
Successivamente, l’elaborazione di un Point of View, delle How Might We Questions e di una Unique Selling Proposition mi ha permesso di formalizzare problemi concreti da risolvere, aprendo lo spazio alla generazione di idee progettuali realmente utili.
La necessità emersa con più forza è stata quella di costruire una piattaforma non solo informativa, ma capace di guidare l’utente con chiarezza, trasparenza e senso di direzione.
Stage 3
Ideate
La fase di ideazione ha tradotto obiettivi e insight in soluzioni progettuali concrete. Partendo da ipotesi multiple, sono state esplorate diverse direzioni di design e narrate attraverso storyboard e user scenarios, così da anticipare l’esperienza utente in contesti d’uso realistici.
Questa fase ha dato forma ai primi wireframe a bassa fedeltà, che hanno reso tangibili le ipotesi e hanno fornito una rappresentazione chiara della struttura e dei contenuti.
Questa fase ha segnato il passaggio dalla riflessione strategica alla costruzione di un concept tangibile, pronto a evolversi verso forme più definite.
Stage 4
Prototype
L’ultima fase si è concentrata sulla concretizzazione delle soluzioni in un prototipo ad alta fedeltà, capace di restituire l’esperienza del sito vetrina in modo realistico. Attraverso la definizione di una solida architettura informativa e la progettazione dei flussi utente, è stato possibile strutturare un percorso chiaro e funzionale.
L’integrazione di elementi visivi, interazioni e micro-dettagli nel prototipo hi-fi ha permesso di simulare l’esperienza finale, concretizzare le scelte progettuali e comunicare con chiarezza la visione complessiva del progetto.
Questa fase ha rappresentato il punto di arrivo del processo, in cui ricerca e ideazione si sono tradotte in un deliverable tangibile.
CHALLENGE
Il settore dell’educazione musicale online e offline presenta una serie di sfide chiave per la comunicazione e l’esperienza utente. I siti esistenti spesso mostrano navigazione dispersiva, sovraccarico informativo e interfacce poco intuitive, che rendono complesso orientarsi tra i percorsi formativi e comprendere rapidamente il valore offerto.
La sfida principale del progetto BeatLab consiste quindi nel bilanciare chiarezza e appeal: rendere l’offerta formativa completa e comprensibile, senza sovraccaricare l’utente, e al tempo stesso valorizzare la reputazione e l’identità dell’istituto, stimolando interesse e curiosità.
L’obiettivo strategico è trasformare il sito vetrina in uno strumento che non solo informi, ma accompagni e motivi l’utente, riducendo il carico cognitivo e rendendo l’esperienza di navigazione immediata e soddisfacente.
Research
Per comprendere a fondo le esigenze degli utenti e orientare le scelte progettuali, il processo di ricerca ha combinato diverse metodologie indirette: desk research su trend di settore, analisi dei competitor con SWOT, user flows e usability testing qualitativo, e social listening tramite forum e community online. Questi metodi hanno permesso di raccogliere dati completi sulle aspettative, motivazioni e difficoltà degli utenti, fornendo un quadro realistico del contesto di riferimento e dei gap da colmare.
Key insights emersi
La riduzione del carico cognitivo è un driver chiave: gli utenti vogliono capire rapidamente i benefici dei corsi e quali percorsi si adattano alle loro esigenze.
La navigazione intuitiva è fondamentale: l’architettura dei siti attuali risulta dispersiva e rende difficile reperire rapidamente informazioni essenziali.
Esiste un gap tra informazioni tecniche e storytelling emozionale: i competitor comunicano specifiche dei corsi, ma raramente coinvolgono emotivamente l’utente.
La chiarezza comunicativa e la coerenza visiva aumentano la percezione di affidabilità e professionalità dell’istituto.
Gli utenti apprezzano community e interazione tra pari, strumenti che aiutano nella motivazione e nel senso di appartenenza al percorso formativo.
Solution
La progettazione dell’esperienza si è focalizzata sul trasformare gli insight raccolti dalla ricerca in decisioni progettuali strategiche, mirate a offrire un’esperienza chiara, coinvolgente e orientata all’utente. L’obiettivo è stato rendere le informazioni accessibili, valorizzare l’identità dell’istituto e guidare l’utente nella scoperta dei percorsi formativi in modo intuitivo e motivante.
Principali decisioni implementate
Architettura informativa chiara e modulare: organizzazione dei contenuti in percorsi logici con sezioni principali, riducendo il carico cognitivo e facilitando la navigazione.
User flows ottimizzati: percorsi studiati per guidare gli utenti dalla scoperta dei corsi alla valutazione delle opzioni formative, rendendo immediata la comprensione delle informazioni chiave.
UI design coerente e moderno: stile minimal e contemporaneo, palette scura con accenti cromatici strategici, tipografia leggibile e design responsive per un’esperienza uniforme su tutti i dispositivi.
Percorsi flessibili e modulari: contenuti organizzati per livelli di competenza e interessi, con possibilità di accedere a micro-corsi e materiali freemium, per attrarre anche utenti autodidatti scettici.
Supporto alla conversione: call-to-action ben posizionate, chiare e coerenti con i percorsi dell’utente, facilitando l’interazione e l’esplorazione dei corsi più rilevanti.
interagisci in tempo reale
Desktop Prototype
NB: per una visualizzazione ottimale del prototipo è consigliabile accedere direttamente al file su Figma. Se invece scegli di rimanere sulla pagina web, puoi cliccare sull’apposita freccia ‘Expand’ in alto a destra per ingrandire la schermata oppure ricaricare la pagina in caso di errori di visualizzazione.
Mobile Prototype
NB: per una visualizzazione ottimale del prototipo è consigliabile accedere direttamente al file su Figma. Se invece scegli di rimanere sulla pagina web, puoi cliccare sull’apposita freccia ‘Expand’ in alto a destra per ingrandire la schermata oppure ricaricare la pagina in caso di errori di visualizzazione.
Per consultare il materiale completo relativo alla fase di ricerca e acquisizione dei dati accedi direttamenta alla pagina “Market Analysis & User Research” del progetto Figma.
Questa sezione raccoglie osservazioni, dati, pattern comportamentali e insight analitici che, per ragioni di sintesi, non è stato possibile includere interamente nel case study.
La connessione giusta comincia da una conversazione
Background
Nel contesto di un progetto accademico, ho sviluppato il prototipo di un sito vetrina per un istituto di alta formazione in musica elettronica, con l’obiettivo di offrire un’esperienza utente chiara, coinvolgente e orientata alla conversione.
Il fine è di identificare le barriere informative e le aspettative degli utenti, fornendo loro tutte le informazioni necessarie per valutare, scegliere e intraprendere un percorso didattico personalizzato a seconda delle esigenze.
Nel progetto, ho applicato una metodologia user-centered che si è concentrata sull’ottimizzazione dell’usabilità, accessibilità, struttura dei contenuti e chiarezza comunicativa, garantendo che ogni decisione progettuale fosse informata dai dati e dalle osservazioni raccolte durante la fase di ricerca.
Project
Sito vetrina per un istituto di alta formazione in musica elettronica
Role
User Experience & User Interface Designer
Independent project – no team members
Skills Applied
→ UX Research & Synthesis
→ UX Strategy
→ UI & Visual Design
→ Interaction Design
→ Microcopy & UX writing
Deliverables
→ Personas
→ Experience Maps
→ Point of View
→ Unique Selling Proposition
→ How Might We Questions
→ Story Boards & User Scenarios
→ Information Architecture
→ User Flows
→ Design System
→ High Fidelity Prototyping
Tools Used
Figma · Adobe Suite · AI Tools
Design Process
Stage 1
Emphaty
La fase esplorativa del progetto è iniziata con la definizione di un obiettivo di ricerca chiaro: comprendere in profondità i bisogni, le aspettative e le difficoltà degli utenti che si relazionano ai percorsi di formazione in musica elettronica.
Attraverso una combinazione di analisi di mercato, benchmark dei competitor e social listening, è stato possibile individuare i principali punti di attrito: il disorientamento degli utenti nella fase di scelta del corso, la difficoltà a fidarsi delle promesse formative e il bisogno trasversale di supporto personalizzato, guida e chiarezza.
Questi insight sono stati fondamentali per definire il tono della comunicazione, la logica dell’architettura informativa e le soluzioni interattive del prototipo.
Stage 2
Define
La fase di definizione ha tradotto gli insight emersi in rappresentazioni concrete del target. Ogni segmento è stato rappresentato tramite personas realistiche che raccontano in modo empatico bisogni, emozioni e frizioni specifiche.
Attraverso le experience map ho analizzato il percorso emotivo e pratico che ciascuna di queste persone potrebbe intraprendere interagendo con un sito vetrina formativo.
Successivamente, l’elaborazione di un Point of View, delle How Might We Questions e di una Unique Selling Proposition mi ha permesso di formalizzare problemi concreti da risolvere, aprendo lo spazio alla generazione di idee progettuali realmente utili.
La necessità emersa con più forza è stata quella di costruire una piattaforma non solo informativa, ma capace di guidare l’utente con chiarezza, trasparenza e senso di direzione.
Stage 3
Ideate
La fase di ideazione ha tradotto obiettivi e insight in soluzioni progettuali concrete. Partendo da ipotesi multiple, sono state esplorate diverse direzioni di design e narrate attraverso storyboard e user scenarios, così da anticipare l’esperienza utente in contesti d’uso realistici.
Questa fase ha dato forma ai primi wireframe a bassa fedeltà, che hanno reso tangibili le ipotesi e hanno fornito una rappresentazione chiara della struttura e dei contenuti.
Questa fase ha segnato il passaggio dalla riflessione strategica alla costruzione di un concept tangibile, pronto a evolversi verso forme più definite.
Stage 4
Prototype
L’ultima fase si è concentrata sulla concretizzazione delle soluzioni in un prototipo ad alta fedeltà, capace di restituire l’esperienza del sito vetrina in modo realistico. Attraverso la definizione di una solida architettura informativa e la progettazione dei flussi utente, è stato possibile strutturare un percorso chiaro e funzionale.
L’integrazione di elementi visivi, interazioni e micro-dettagli nel prototipo hi-fi ha permesso di simulare l’esperienza finale, concretizzare le scelte progettuali e comunicare con chiarezza la visione complessiva del progetto.
Questa fase ha rappresentato il punto di arrivo del processo, in cui ricerca e ideazione si sono tradotte in un deliverable tangibile.
CHALLENGE
Il settore dell’educazione musicale online e offline presenta una serie di sfide chiave per la comunicazione e l’esperienza utente.
I siti esistenti spesso mostrano navigazione dispersiva, sovraccarico informativo e interfacce poco intuitive, che rendono complesso orientarsi tra i percorsi formativi e comprendere rapidamente il valore offerto.
La sfida principale del progetto BeatLab consiste quindi nel bilanciare chiarezza e appeal: rendere l’offerta formativa completa e comprensibile, senza sovraccaricare l’utente, e al tempo stesso valorizzare la reputazione e l’identità dell’istituto, stimolando interesse e curiosità.
L’obiettivo è trasformare il sito vetrina in uno strumento che non solo informi, ma accompagni e motivi l’utente, riducendo il carico cognitivo e rendendo l’esperienza di navigazione immediata e soddisfacente.
Research
Per comprendere a fondo le esigenze degli utenti e orientare le scelte progettuali, il processo di ricerca ha combinato diverse metodologie indirette: desk research su trend di settore, analisi dei competitor con SWOT, user flows e usability testing qualitativo, e social listening tramite forum e community online.
Questi metodi hanno permesso di raccogliere dati completi sulle aspettative, motivazioni e difficoltà degli utenti, fornendo un quadro realistico del contesto di riferimento e dei gap da colmare.
Key insights emersi
La riduzione del carico cognitivo è un driver chiave: gli utenti vogliono capire rapidamente i benefici dei corsi e quali percorsi si adattano alle loro esigenze.
La navigazione intuitiva è fondamentale: l’architettura dei siti attuali risulta dispersiva e rende difficile reperire rapidamente informazioni essenziali.
Esiste un gap tra informazioni tecniche e storytelling: i competitor comunicano specifiche dei corsi, ma raramente coinvolgono emotivamente l’utente.
La chiarezza comunicativa e la coerenza visiva aumentano la percezione di affidabilità e professionalità dell’istituto.
Solution
La progettazione dell’esperienza si è focalizzata sul trasformare gli insight raccolti dalla ricerca in decisioni progettuali strategiche, mirate a offrire un’esperienza chiara, coinvolgente e orientata all’utente.
L’obiettivo è stato rendere le informazioni accessibili, valorizzare l’identità dell’istituto e guidare l’utente nella scoperta dei percorsi formativi in modo intuitivo e motivante.
Principali decisioni implementate
Architettura informativa chiara e modulare: organizzazione dei contenuti in percorsi logici con sezioni principali, riducendo il carico cognitivo e facilitando la navigazione.
User flows ottimizzati: percorsi studiati per guidare gli utenti dalla scoperta dei corsi alla valutazione delle opzioni formative, rendendo immediata la comprensione delle informazioni chiave.
UI design coerente e moderno: stile minimal e contemporaneo, palette chiara con accenti cromatici strategici, tipografia leggibile e design responsive per un’esperienza uniforme su tutti i dispositivi.
Percorsi flessibili e modulari: contenuti organizzati per livelli di competenza e interessi, con possibilità di accedere a micro-corsi e materiali freemium, per attrarre anche utenti autodidatti scettici.
Important Links
Prototype preview
NB: per una visualizzazione corretta e ottimale del prototipo si consiglia l’accesso da PC anziché da dispositivo mobile.