Abbiamo parlato di Natural Language Processing, di Natural Language Understanding, di Analisi dei Topic e di quali tecnologie utilizza Ai Know You per processare le informazioni, per classificarle e per restituire risposte. É arrivato il momento di capire come e da cosa è composto il prodotto. Grazie alla testimonianza di Marta Scanavino, Business Designer in AI Know You, andremo ad analizzare la User Journey e la progettazione dell’interfaccia grafica da lei svolta per lo strumento.
Double Diamond
Per identificare la nuova interfaccia grafica di Ai Know You abbiamo utilizzato il processo del double diamond: un processo di due fasi principali utilizzato per identificare, sviluppare e integrare la nuova UI del prodotto. Le due fasi principali sono quelle di ricerca e sviluppo e a loro volta si dividono fino a comporre quattro fasi:
- Discovery: fase di analisi del contesto di riferimento;
- Define: fase di definizione del problema,
- Develop: fase in cui si inizia a progettare,
- Deliver: fase di integrazione e conclusione.
La progettazione dell’interfaccia grafica di un prodotto digitale è un processo complesso, che richiede competenze di vario genere. Innanzitutto, è necessario effettuare un’analisi sul contesto al quale ci approcciamo per capire quali sono gli obiettivi dell’interfaccia. Bisogna cioè tradurre in termini grafici i requisiti funzionali e le necessità degli utenti. Una volta definiti gli obiettivi, si procede con l’individuazione del percorso che l’utente deve seguire per raggiungerli.
Fase di Discovery e Define: lo studio del contesto e la definizione della User Journey
Nella fase di ricerca è stato necessario comprendere il contesto di riferimento, raccogliere gli elementi e i dati a disposizione. Marta assieme a Dario Bertolino, PM di Ai Know You, ha identificato il pubblico a cui si rivolge il prodotto, definendo quali sono le sue esigenze, i suoi bisogni e i suoi gusti. Inoltre assieme hanno definito l’identità del prodotto e la sua specifica funzione.
Gli elementi raccolti sono stati preziosi per pensare alla struttura dell’interfaccia e alla sua grafica. Si parte con la costruzione di una user journey, ovvero una mappa che rappresenta tutte le azioni che l’utente compie durante l’utilizzo del prodotto. Tale mappa consente di individuare punti deboli e aree in cui migliorare l’esperienza d’uso.
La user journey è, come anticipato, uno strumento che aiuta a progettare l’interfaccia di un prodotto digitale. Il suo scopo è rendere più semplice ed efficace la navigazione degli utenti. Si tratta, appunto, di una mappa concettuale e rappresenta il percorso che l’utente compie dall’inizio alla fine dell’utilizzo del prodotto.
In altri termini, illustra il flusso di azioni e pensieri dell’utente mentre utilizza il prodotto. Attraverso la sua creazione sono stati individuati i passaggi in cui l’utilizzo potrebbe interrompersi e identificare le azioni necessarie a ripristinare il flusso e l’utilizzo.
Per Ai Know You, sono stati identificati dei “macro step” iniziali. Successivamente per ogni step le azioni necessarie che devono essere svolte per raggiungere un determinato obiettivo. Sono state, quindi, ideate due user journey differenti con l’obiettivo di guidare utenti provenienti da contesti diversi: una per accompagnare l’utente già registrato, mentre l’altra per seguire il nuovo utente nel primo accesso.
Un percorso definito come “un dialogo tra utente e programma”, per ogni azione dell’utente consegue un’azione dello strumento.
Fase di Develop: la creazione dei Wireframe
Una volta definita la user journey si passa al disegno dei wireframe cioè le bozze dell’interfaccia. Chiamati anche “scheletri dell’interfaccia”. Strano vero? Riportano a bassa fedeltà la struttura delle azioni da compiere, senza contenuto, identità o colori.
Infatti, le schermate dei wireframe consentono di visualizzare in modo schematico il layout delle schermate per lasciare spazio alla definizione delle principali funzionalità.
Per generare wireframe è necessario disegnare le singole schermate del prodotto, suddividendole in aree funzionali. In questo modo è possibile verificare la coerenza dell’interfaccia e valutarne l’usabilità.
Fase attuale: da Wirefram a Mockup
In seguito a continui scambi e feedback, il team ha approvato i wireframe definitivi. Quindi è stata progettata la libreria dei componenti secondo funzione, stile e identità del prodotto.
Diversamente dai wireframe questa attività prevede la creazione ad alta fedeltà degli elementi e dei componenti scelti.
Il team di sviluppo e in particolare il frontend developer del team, Pierfranco Basile (di cui uscirà l’intervista sul blog nelle prossima settimane), è al lavoro per integrare fedelmente nella struttura di Ai Know You tutti gli elementi e l’interfaccia identificata.
Quali sono i prossimi step destinati all’interfaccia?
Chi pensa che questa sia la conclusione di un lungo processo di implementazione si sbaglia, di grosso! Una volta conclusa l’integrazione la funzionalità dei flussi e l’usabilità dell’interfaccia verranno testate con gli utenti.
Si, avete capito bene, voi sarete i principali protagonisti di questo test.
Vogliamo offrire un’esperienza di utilizzo sempre perfetta e grazie al vostro aiuto potremo continuare a migliorare Ai Know You soddisfacendo le vostre esigenze.
Tenetevi pronti: da oggi, ogni mese pubblicheremo un aggiornamento relativo allo sviluppo del prodotto! Entrerete nel vivo dello strumento! Non perdetevi i futuri product update!