Una Digital Product Designer con esperienza di
UX Design, UI Design, e Web Design
MusicLounge
Tipologia
Progetto indipendente
Durata
8 weeks
Ruolo
UX Research
UX Design
UI Design
Piattaforma
Mobile app
Responsive Website
Touchscreen kiosk
Problem Space
Music fans line up early in the morning or even the night before when they attend concerts because they need to see their favourite artists as close as possible. Queuing for so long can be really stressful to the point that this takes out the enjoyment of the overall experience.
Hypothesis:
There's a reason why concertgoers queue for so long when they want to see their favorite band: our brain values experiences over material possessions.
By turning the waiting part of the concert into an exciting activity, we can make the entire day a memorable experience.
Ricerca secondaria
34 milioni di persone
Hanno partecipato a concerti nel 2019 nel Regno Unito
2 - 3 ore
Quanto tempo in media le persone rimangono in fila prima di un concerto
Notte o mattina presto
Quando solitamente iniziano le code
Svenimento
La perdita del sonno, la mancanza di cibo e i lunghi periodi in piedi sono fattori che inducono lo svenimento
Organizzare la fila
I musicisti hanno iniziato a chiedere ai membri dello staff di rendere le linee organizzate e sicure
User Interviews
Ho intervistato 5 persone che assistono spesso ai concerti e solitamente fanno la fila fin dalle prime ore della giornata.
Ho fatto loro domande su:
-
come si tengono informati sugli eventi dal vivo
-
come li fanno sentire i concerti
-
cosa fanno prima, durante e dopo un concerto
-
come si sentono a stare in fila per così tanto tempo
​
Spunti dalle interview
Atmosfera
Le persone amano incontrare altri fan e apprezzano l'atmosfera che si crea cantando insieme e divertendosi. Allo stesso tempo, sentono l’ansia altrui.
Organizzazione
Ci sono state diverse lamentele su come vengono gestite le code. Nella maggior parte dei casi non è consentito allontanarsi per mangiare o usare il bagno.
Esperienze
L'unico sollievo si ha quando la folla è auto-organizzata o quando ci sono attività che interrompono l'attesa, come meet and greet o attività simili organizzate dalle arene/festival.
Dopo le interview ero pronta a perfezionare la domanda del mio progetto:
Come potremmo rendere la fila per i concerti un'esperienza piacevole e senza problemi per gli appassionati di musica che partecipano a quegli eventi?
Poi ho delineato una persona che meglio descrive i miei utenti finali, i loro obiettivi, frustrazioni e comportamenti. Creando un experience map, ho documentato l'interazione con il mio futuro prodotto e ho trovato alcune opportunità per il mio futuro design.
Persona e Experience Map
Opportunità
01
Connettersi con altri fan
Connettersi con altre persone che andranno al concerto prima e dopo l'evento.
03
Attività che interrompono l'attesa
Creare attività emozionanti che possano interrompere l’attesa e rendere più piacevole la fila.
02
Dare consigli
Dare consigli su cosa portare o, ad esempio, sul modo più veloce per arrivare.
04
Vedere l'interno della sede dell'evento
Mostrare le politiche della sede prima dell'evento, mostrando le porte di entrata e l'aspetto della sede all'interno. Mostrare lo stato della coda in tempo reale.
Task Flow
User Stories
Ho creato circa 30 user stories e le ho raggruppate in epics correlate tematicamente. Queste mi hanno aiutato a comprendere quali azioni l'utente deve compiere per trarre beneficio dal mio prodotto.
Epics
-
Essere organizzati per l'evento
-
Stare in fila senza stare fisicamente in fila
-
Prendere parte ad attività
-
Fare nuovi amici
Task flow
Ho deciso di focalizzarmi sul "Prendere parte ad attività" e su questo ho iniziato a creare un task flow.
Sketches e wireframes
Ho iniziato cercando ispirazione per l'interfaccia utente, creando una moodboard per iniziare a disegnare i primi elementi grafici, esplorando una serie di potenziali concetti e idee che mi aiuteranno a creare il mio prototipo finale.
Ho ricercato:
-
mappe interattive
-
filtri tra diverse categorie
-
cards
-
caroselli
​
E ho iniziato a disegnare sketches su carta.
Ho poi trasformato i miei sketches in grayscale mid-fidelity wireframes in Figma.
Usability Study
Due sessioni di user testing
Dopo aver progettato e prototipato i miei wireframe, ho condotto due sessioni di user testing.
Per ottenere un feedback pratico e in tempo reale che potesse essere utilizzato per migliorare il mio progetto, ho preparato alcune sessioni di user testing con task che l'utente doveva eseguire e testare, testando 5 persone alla volta.
Task
-
Navigazione della home page e delle sezioni dell'app
-
Selezionare un concerto e ottenere un numero per la coda
-
Trovare attività
-
Filtrare le attività
-
Partecipare a un'attività
Ho raccolto tutte le mie osservazioni e ho sintetizzato i risultati in una tabella e matrice dei risultati al fine di identificare la gravità dei problemi e apportare modifiche al prototipo.
Un esempio di schermata prima e dopo le sessioni di user testing:
Brand Development
Una volta stabilito il flow finale delle schermate, ho iniziato a sviluppare la brand identity del mio prodotto.
​
Per prima cosa, ho deciso di dare un nome al mio marchio:
MusicLounge
Moodboard
Ho identificato il mio brand come:
​
Dinamico, social, ottimista, audace, and giocoso.
​
Per creare una moodboard, ho cercato immagini che rappresentassero visivamente questi aggettivi.
Colori
La moodboard ha ispirato i colori del marchio.
​
Sapendo di dover giocare con diverse categorie nella mia app, ho deciso di incorporare molti colori nel mio design.
Ho deciso di cercare colori brillanti e audaci che potessero dare un'atmosfera neon ed elettrica a tutto il mio progetto. E che potessero anche essere abbinati al blu scuro (il mio colore primario) per creare una percezione vibrante e di grande impatto.
Tipografia
Ho deciso di usare due font nella mia app.
​
Titan One: un font molto audace con una personalità felice e allegra che ha funzionato molto bene nel mio branding, soprattutto utilizzato nei titoli e nei testi brevi.
Lato: un carattere sans-serif molto leggibile, semplice e minimalista.
Logo
Il logo rappresenta sia un disco sia l'area di attesa (la music launge) dove gli appassionati di musica possono sostare mentre aspettano. Ho deciso di creare una forma particolare che potessi utilizzare in tutta l'app e aggiungerla anche al logo.
Icona dell'app
A partire dal mio logo e con i miei colori primari, ho creato l'icona dell'app.
Soluzione hi-fi
I miei wireframe erano finalmente pronti per l'applicazione di colori, immagini e il design ad alta fedeltà (hi-fi) degli elementi.
Libreria UI
Ho iniziato a creare una Libreria UI di tutto ciò che mi servisse nel design high-fidelity, usando i principi dell'Atomic Design.
Ecco alcuni esempi di atomi, molecole and organismi:
Prototipo high-fidelity
Avendo pronta la mia Libreria UI, ero finalmente pronta a creare il prototipo hi-fi della mia app in Figma.
Marketing website
Ho poi disegnato un marketing website responsive per promuovere l'app e comunicare i suoi values al mio target audience.
Screen desktop:
Screen mobile:
Chiosco Touchscreen
La mia sfida finale è stata trasportare il mio prodotto su un'altra piattaforma. Di conseguenza, ho deciso di progettare alcune schermate per un Chiosco touchscreen da posizionare all'interno delle sedi dei concerti per poter visualizzare le attività durante la giornata o per consentire agli spettatori che non hanno scaricato l'app di ottenere il proprio numero.
Key takeaways & next steps
La lezione più significativa che ho imparato da questo progetto di 8 settimane è che il design è un percorso di continua evoluzione. Questa esperienza ha ampliato la mia idea di miglioramento e perfezionamento, rendendo chiaro che il design non è un qualcosa di statico, ma un processo continuo. Abbracciando una mentalità di continua rivisitazione del progetto, ho potuto immaginare ciò che va oltre l’attuale iterazione, considerando l’impatto a lungo termine dell'esperienza utente. Ora, con l’utente saldamente al centro della mia filosofia di design, ogni iterazione e cambiamento diventa un passo strategico verso un panorama di progettazione migliorato e lungimirante.
Questo progetto non mi ha solo insegnato diverse sfumature di design, ma ha fissato in me il valore di progettare con uno sguardo al futuro, dove la soddisfazione dell'utente rimane il faro guida per le trasformazioni future.
​
I miei prossimi passi saranno quelli di:
​
-
Apportare ulteriori modifiche alle schermate e alle interazioni attuali per creare una V2 del mio progetto.
-
Esplorare altri user flow del prodotto, come organizzare attività e connettersi con altri utenti, o guardare all'interno della sede del concerto prima di esso.
-
Testare, testare, testare.
-
Osservare i vincoli del progetto e trovare soluzioni: ad esempio trovare persone e sedi concertuali interessate a diventare partner.