case-study

Yerp!: il nostro processo di design e sviluppo del gestionale

Yerp! è un nuovo software online pensato per Piccole Aziende e Professionisti. Permette di gestire direttamente online, da PC o da tablet, le fatture e altri tipi di documenti aziendali che possono essere creati e personalizzati secondo le proprie esigenze.
La sua caratteristica principale è quella di essere altamente configurabile e personalizzabile in modo da adattarsi perfettamente al processo amministrativo delle micro imprese italiane.
Yerp! ci ha scelto come partner tecnologico per fornire un supporto a 360 gradi nel design e sviluppo della piattaforma: abbiamo seguito il team dalla stesura del modello di business, per definire l’idea e il target dei clienti, per poi far evolvere il prodotto a partire da un MVP usando il feedback dei clienti stessi.

La UX di un gestionale

La sfida più grande nella realizzazione del gestionale Yerp! è stata disegnare un’interfaccia che non appesantisse l’esperienza utente bensì la rendesse ancora più godibile.
Siamo partiti dalla creazione dei wireframe e siamo approdati ad un prototipo testabile, fondamentale per intercettare le problematiche insite nella fruizione del servizio. Grazie a diversi round di usability test siamo riusciti a disegnare una user interface che coniugasse la necessità di rigore imposta dal core business del cliente, e la volontà di fornire un’esperienza fluida e un metodo di lavoro intuitivo ai fruitori del servizio.

Come fare un buon progetto di UX con un seed round?

La risposta sono i compromessi.
Compromessi che abbiamo fatto con il cliente rinunciando alla fase di ricerca a favore di usability test e prototipi: iniziare con questa premessa può sembrare fatale ma in realtà non lo è :), allora come abbiamo raggiunto l’obiettivo?
Con Yerp! partivamo da assunzioni basate sull’esperienza diretta, e decennale, del cliente: la startup infatti aveva già fatto le sue ricerche in ambito marketing e user needs, avendo lavorato già in precedenza su un software con feature simili a quelle che saremmo andati a sviluppare.

Moodboard e Wireframe, inizia la progettazione della User experience

Prima di iniziare con la progettazione avevamo a disposizione:

  • un benchmark dei concorrenti;
  • una lista di funzionalità ipotetiche da implementare;
  • un insieme di necessità e desideri che gli utenti avevano comunicato attraverso il supporto commerciale del vecchio software.

Per snellire il processo abbiamo evitato una ricerca etnografica, ipotizzando un target (l’impiegato della piccola/media impresa con meno di 30 dipendenti), sviluppato successivamente in Personas: su questa base abbiamo costruito i primissimi sketch.
Questi layout, realizzati a mano, ci sono serviti per sapere se la direzione che stavamo prendendo fosse corretta e per capirlo abbiamo coinvolto utenti campione che operano nel settore amministrativo. I feedback che ci hanno dato sono stati molto utili per sviluppare i wireframe.

Yerp! wireframe


i wireframe

Abbiamo discusso, valutato ed iterato in modo da arrivare ad un risultato soddisfacente, e siamo arrivati a produrre i wireframe per tutte le pagine e le interazioni.

Architettura, styleguide e prototipo: la User experience avanza

Per studiare l’architettura delle informazioni abbiamo realizzato un prototipo grezzo ma cliccabile con InVision, con l’obiettivo di inventariare e organizzare i flussi di navigazione.
Abbiamo deciso, in accordo con il cliente, di creare una styleguide visuale, per avere una linea guida coerente nello sviluppo del frontend. In questo modo avremmo potuto effettuare i primi test di usabilità con un prototipo concreto, diverso dal test con i soli wireframe effettuato in precedenza.

Yerp! styleguide

la styleguide

Parallelamente è iniziato lo sviluppo lato frontend e backend: sapevamo che molte delle funzionalità da implementare erano necessarie se non addirittura propedeutiche all’utilizzo della piattaforma.
Ed eccoci arrivati al punto chiave: testare il prototipo, che nel frattempo era stato migliorato con l’aggiunta della UI.

Usability test, la sessione

“Quanta gente dobbiamo intervistare e quanto ci costa?”
È quello che ogni cliente si chiede prima di effettuare un test di usabilità. Naturalmente era anche la preoccupazione dei nostri interlocutori. Anche in questo caso abbiamo adottato un metodo che ha preso spunti dal mondo Lean e dalle teorie di Nielsen e Krug.
È dimostrato che in una sessione di test, per massimizzare il rapporto tra benefici e costi, è sufficiente analizzare un campione che va da 4 a 8 persone. Già con questi numeri la sessione permette di coprire fino all’80% circa delle problematiche di usabilità dei task testati. Noi abbiamo deciso di osservarne 5 e per il recruitment abbiamo scelto persone che operano nell’ambiente amministrativo, coinvolgendo coloro che più ritenevamo in linea con il target di riferimento.
In particolare abbiamo osservato:

  • CAO, uomo, 29 anni, con alte competenze contabili e tecnologiche;
  • Amministrativo, donna, 38 anni, con medie competenze contabili e tecnologiche;
  • CEO, uomo, 58 anni, con buone competenze contabili e basse competenze tecnologiche;
  • Responsabile amministrativo, donna, 31 anni, con buone competenze contabili e tecnologiche;
  • Acquisti, donna, 31 anni, con buone competenze contabili e tecnologiche.
usability test target Yerp!

usability test

Ad ogni tester abbiamo sottoposto 4 attività (task) da compiere sulla web app, in modo da valutarne la capacità di risoluzione e il grado di frustrazione sperimentato. Trovandoci in una fase primordiale nello sviluppo dell’applicazione abbiamo preferito invitare gli intervistati a concludere task trasversali e piuttosto generici: il processo di registrazione; la creazione di un preventivo; la modifica dello stesso; la creazione di un modello di documento non previsto tra quelli di default.

Analisi dei dati

I risultati sono stati incoraggianti dato che ogni persona testata è riuscita a completare tutti i task, ma allo stesso tempo è stato illuminante osservare le difficoltà nel compiere alcune azioni specifiche misurandone i tempi, movimenti non previsti del mouse e facendo attenzione alla gestualità dell’utente durante lo svolgimento del task.

L’analisi di questi risultati ci ha permesso di individuare una serie di problematiche che abbiamo valutato sulla base di 2 criteri: la gravità della problematica e la facilità di risoluzione della stessa.

Yerp! risultati interviste utenti

i risultati dei test

Per individuare le soluzioni ai problemi emersi durante i test, abbiamo inserito le informazioni in una griglia, in modo da dividere le problematiche come segue:

  • Gravi/Facili
  • Gravi/Difficili
  • Lievi Facili
  • Lievi/Difficili
schema risultati interviste

schematizzazione dei risultati

Una volta esposto al cliente il materiale ottenuto dall’elaborazione dei risultati degli usability test, abbiamo stilato un elenco di attività da svolgere, dando maggiore priorità alle problematiche percepite come gravi dagli utenti e di facile risoluzione. In questo modo in poco tempo abbiamo reso il prodotto più piacevole e di facile fruizione.

Analisi quantitativa e modifiche

I nostri test di usabilità hanno prodotto risultati che ci hanno guidato verso soluzioni migliorative. Nel frattempo lo sviluppo frontend e backend, oltre all’implementazione delle modifiche alle funzionalità già presenti, ne ha introdotte di nuove. La comunicazione in questa fase non è rimasta ferma a guardare: il team di Yerp! ha sviluppato landing page e campagne AdWords e Facebook per migliorare la fase di acquisition.
Dopo una veloce verifica dei primi dati ci siamo resi conto che qualcosa non andava nell’acquisizione dei nuovi utenti:

  • Bounce Rate molto alto;
  • tasso di abbandono elevato nella pagina di registrazione e nella raccolta dei dati;
  • percentuale di Returning Visitors molto bassa.
Google Analytics funnel Yerp!

Google Analytics

Il primo passo è stato creare dei funnel su Google Analytics e Hotjar per individuare i momenti di down nell’esperienza dell’utente. Analizzando sia i numeri che i video degli utenti provenienti dalle campagne, abbiamo notato che il tasso di abbandono maggiore era legato al form di registrazione: il design formale intimoriva l’utente e lo vincolava a leggere per intero le policy obbligatorie prima di poter cliccare sulla Call to Action e quindi effettuare la registrazione.
Il primo miglioramento attuato è stata l’introduzione dell’informazione “Registrati gratuitamente” nella pagina del form, in linea con quanto riportato nella landing page di provenienza. Seconda modifica: racchiudere le policy in un accordion. In questo modo saranno visualizzate solo se l’utente mostra interesse alla lettura per esteso, cliccando sul pulsante “Maggiori informazioni”.
Il risultato non si è fatto attendere: +23% di registrazioni.

form registrazione

la nuova form di registrazione

E quindi: come fare un buon progetto di UX con un budget limitato?
Adattare il processo alle esigenze del business in esame, avendo il coraggio di fare scelte non scontate che mirino al benessere del team e del cliente che ne è parte attiva. Re-iterare, per continuare e migliorare l’esperienza del cliente, e sorprendersi, per poter continuare a sorprendere!

Lo sviluppo del gestionale

Durante i mesi di sviluppo abbiamo lavorato fianco a fianco con Yerp! per aggiornare la roadmap con nuove idee e diverse priorità, anche grazie alle Pirate metrics che ci hanno permesso di seguire un approccio data-driven allo sviluppo del prodotto, senza che questo risultasse troppo costoso.
Il backend è stato completamente sviluppato con API in maniera da far interagire facilmente l’applicazione con altre, ad esempio per l’importazione di contatti o prodotti da sistemi esterni. Abbiamo ridotto notevolmente i costi di sviluppo della piattaforma SAAS appoggiandoci al servizio subscriptions di Stripe.
Per risolvere la difficoltà tecnologica legata al salvataggio di documenti dal formato diverso tra di loro abbiamo usato due tipi di database: uno documentale (mongodb) per salvare tutti i documenti e uno relazionale (mysql) per tenere tutti i dati più strettamente definiti come prodotti e clienti.

screenshot gestionale

una schermata del gestionale

Conoscevo già Flowing con cui ho avuto modo di collaborare fattivamente su altri progetti. Quando i miei soci ed io abbiamo pensato al progetto Yerp! non abbiamo avuto alcun dubbio sulla scelta del partner tecnologico, sicuri che sarebbero stati in grado di affiancarsi al nostro know-how. La miscela tra le nostre competenze nel mondo del software gestionale e le skill tecniche che Flowing ha messo in campo ha portato alla realizzazione di un prodotto che è innovativo sia pur in un ambito dove non è facile innovare. Tutte le persone dello staff con cui abbiamo avuto modo di interagire si sono sempre dimostrate competenti e professionali oltre che molto “alla mano”, qualità che non è facile trovare nel settore in cui Flowing opera. Flowing è sicuramente un partner affidabile, preparato e organizzato.

Alberto Saccardo, CEO di Yerp!

Team