UX/UI Designer · giu 2017 – feb 2019

Trackem

Trova gli eventi più vicini a te. Tieni traccia delle tue band e artisti preferiti per sapere tutto sui loro eventi.
Trackem
Il problema

Molti artisti e/o band musicali emergenti hanno difficoltà nel farsi notare con i propri eventi. Ci sono moltissime piattaforme, ma il problema è che si può finire con la dispersione delle informazioni relative ad un evento in particolare.

La soluzione è quella di fare una piattaforma che filtri i contenuti secondo alcuni criteri, ovvero:

  • gli utenti creatori di eventi sono esclusivamente band emergenti;
  • gli eventi creati vengono visualizzati solo dagli utenti che si trovano a pochi chilometri dal luogo dell’evento;
  • l’utente può aggiungere ai preferiti una o più band, così da ricevere notifiche in merito all’evento organizzato da quella specifica band o artista oltre che ricevere notifiche in generale per qualsiasi evento in futuro.
Trackem Logo

Per dare inizio alla progettazione del prodotto e del servizio abbiamo condotto una breve ricerca. Il risultato di questa ricerca ci ha portato a definire delle personas.

Personas
Personas
Personas
Wireframe

Creando un wireframe (hi-fi) ho compreso come le informazioni potevano essere distribuite nell’interfaccia. Grazie a molti feedback raccolti da utenti in fase di test e da professionisti del settore abbiamo compreso che il flusso dell’utente poteva essere arbitrario. L’utente dopo aver installato l’applicazione poteva utilizzarla anche senza la registrazione.

Trackem
  • Utente registrato: L’utente registrato può beneficiare di tutte le funzionalità dell’applicazione, come ricevere notifiche, consultare eventi e/o artisti preferiti ed ecc
  • Utente ospite: L’utente ospite può beneficiare solo dell’informazioni dell’evento e dell’artista. Non può salvare e ricevere eventuali notifiche relative alle modifiche dell’evento.

Alcuni esempi dei task per la fase di test:

  1. Seleziona un evento (quale evento seleziona? Quello più vicino? Oppure quello dove il nome dell’artista gli ispirava di più? Oppure era interessato al genere?);
  2. partecipa a un evento, ascolta la demo musicale o/e salva nei preferiti l’artista;
  3. crea una pagina artista.

Tuttavia avendo scelto due vie differenti per l’accesso dell’utente abbiamo condotto ulteriori test per capire come l’utente si comportava. Dovevamo capire quale era l’ingaggio migliore.

Il primo test era focalizzato sulla versione che richiedeva la registrazione dell’utente al primo avvio dell’app questo mi ha permesso di capire i pain point nella fase di onboarding per proseguire con le altre funzionalità dell’applicazione.

Il secondo test era focalizzato sulla versione che non richiedeva la registrazione dell’utente al primo avvio dell’app. In questo test volevamo capire quale era la reazione dell’utente riguardo a vari CTA per la registrazione sparsi a seconda dell’interazione. Infatti prima di poter partecipare a un’evento l’utente secondo questo user flow si doveva registrare per poter continuare. Tuttavia questa scelta non discriminava l’accesso all’indicazioni stradali per poter andare sul luogo e partecipare all’evento desiderato.

UI Design

Completato una base di ricerca sul prodotto ho progettato un UI kit per l’interfaccia. Mi sono basato sulla metodologia progettuale Atomic Design di Brad Frost, che in sostanza si ragiona partendo da elementi base come i colori, font e l’icone. La combinazione di elementi base permettono di costruire componenti più piccoli che da soli non hanno nessun significato (chiamate molecules).

Combinando le varie molecules possiamo costruire degli elementi d’interfaccia che sono replicabili in più punti del prodotto così da rendere riconoscibili le varie pattern UI per l’utente.

Nelle schermate rappresentate qui sotto mostro il prodotto finale. Ogni schermata ha una specifica funzionalità che, interconnesse tra loro, rendono l’esperienza d’uso coerente, stando ad ulteriori test (A/B e Agile) abbiamo riscontrato che l’applicazione in sé non trasmetteva “emozioni importanti” ed era asettica, tuttavia le informazioni erano chiare. Il nostro focus era sulla chiarezza dell’informazioni, infatti, il nostro MVP aveva questo obiettivo da raggiungere.

La schermata Esplora è la parte principale dell’applicazione, vengono mostrati solo e unicamente gli eventi vicini alla posizione dell’utente. In questo modo gli artisti emergenti che faranno un evento dal vivo hanno più possibilità di essere notati, l’utente che è in cerca di intrattenimento sa cosa c’è in base alla sua posizione così da poter fargli scoprire nuovi artisti e nuovi locali.

Trackem

Il dettaglio dell’evento mostra la posizione dell’evento in una mappa e l’utente potrà accedere a varie informazioni:

  1. vedere il profilo degli artisti;
  2. ottenere le indicazioni stradali per il luogo dell’evento;
  3. comprare il biglietto d’entrata (se l’evento selezionato lo richiede).
Trackem

Salvando l’evento nei Preferiti l’utente riceverà notifiche relative ad eventuali modifiche dell’evento. Inoltre l’applicazione salverà tra i preferiti anche il profilo dell’artista, in questo modo l’utente potrà ricevere notifiche relative all’attività dell’artista. (Da questa funzionalità è nato il nome Trackem).

Trackem

Le Notifiche hanno lo scopo di informare l’utente riguardo tutte le attività che avverranno nel corso del tempo. Il Profilo gestisce le varie impostazioni legate all’utente e dà modo all’utente per registrarsi come un profilo artista.

Trackem
Impatto

Come prima esperienza di startup non siamo riusciti a renderla una realtà consolidata. Personalmente ho imparato moltissimo da questa esperienza e ringrazio tutte le persone che hanno collaborato, in particolare il team dello Spazio Attivo di Colleferro.

Il mio ruolo in Trackem:

  • UX per B2B e B2C
  • User research
  • Sviluppare prototipi e Agile testing
  • User Interface design
  • Gestione del Design System
  • Design del prodotto e del marchio allo scopo di valorizzare il brand.
  • Sviluppo del codice markup dell’interfaccia utente.

Credits: Trackem team Lorenzo Cataldi, Alessandro Cataldi, Andrea Zanti, Alexiano Ciafrei.
Ringraziamenti: Francesca Calenne, Pasqualina Cedrone.