Sono Jack Green, UX designer di DoiT, e in questo articolo vi racconto alcune scelte e modifiche di design dietro la rielaborazione di una funzionalità già presente nella nostra piattaforma: i ‘Ramp plans’.
I Ramp plans mostrano i progressi del cliente rispetto al proprio commitment di spesa su AWS o Google Cloud, aiutando a tenere sotto controllo la spesa e a individuare eventuali correttivi.
Per valorizzare al massimo il potenziale della funzionalità, il team di prodotto ha deciso di introdurre alcuni miglioramenti. Ho condotto un design audit della versione esistente, così da rilevare i problemi di usabilità e di design visivo.
Screenshot da Figjam durante la fase di ricerca
Tramite la funzione note di Figjam (visibile qui sopra), ho annotato le aree da approfondire e individuato quelle prioritarie su cui intervenire. Ho poi usato queste annotazioni come punto di partenza per il confronto con il product manager e il lead developer, integrando il loro punto di vista e i feedback raccolti dalla loro esperienza e da quella dei clienti.
In quella sessione abbiamo individuato le aree chiave su cui concentrarci:
- Migliorare la visibilità delle informazioni principali
- Aggiornare il backend per rendere i dati più affidabili
Grazie alla ricerca utente e agli stakeholder che lavorano a stretto contatto con i clienti, sappiamo quali siano le informazioni più rilevanti per chi utilizza la funzionalità. Partendo da questo, volevamo presentarle in modo chiaro e immediato.
Aggiornare il backend non è un'attività UX in senso stretto, ma ha un impatto enorme sull'esperienza d'uso dei ramp plan. Dati più affidabili generano fiducia e mostrano da subito il valore della funzionalità.
Il primo intervento che voglio mettere in evidenza riguarda l'elenco nella pagina dei ramp plans, prima organizzato come tabella.
L'aspetto della pagina di panoramica dei ramp plans prima delle modifiche di design
La tabella non è la soluzione adatta in questo contesto, perché:
- I contenuti della pagina si limitano a 1 o 2 ramp plans; l'elenco non si allunga nel tempo
- Non c'è una gerarchia tra i contenuti, e cogliere i dettagli diventa difficile
- Alcune informazioni chiave non compaiono nella tabella
- Bisogna aprire il ramp plan per capire davvero la situazione
Per questo siamo passati dalla tabella a un layout a card:
L'aspetto dei ramp plans dopo le modifiche di design
Il layout a card ha portato i seguenti vantaggi:
- Le informazioni chiave sono più leggibili
- L'utente non deve più aprire il ramp plan per accedere a tutte le informazioni principali
- Una gerarchia visiva più equilibrata e gradevole
Abbiamo riportato questo modo più efficace di presentare le informazioni chiave anche nella vista di dettaglio del ramp plan.
Nella parte alta della pagina abbiamo introdotto delle card con i dettagli principali, per categorizzare, organizzare e mettere in risalto le informazioni rilevanti per l'utente: dati che prima non erano disponibili o risultavano difficili da estrarre dal resto.
La vista di dettaglio aggiornata dei ramp plans
Tra le novità introdotte c'è un dialog dedicato al breakdown della spesa totale. Consente all'utente di analizzare la propria spesa più nel dettaglio in un dialog compatto, senza dover interrompere il flusso di lavoro per spostarsi in altre sezioni della DoiT Console. Questa funzionalità è stata richiesta da un account manager che lavora ogni giorno con i clienti: secondo lui avrebbe offerto un livello di dettaglio e di insight di grande valore.
Il dialog del breakdown della spesa totale
Come sempre, dal rilascio in avanti continuiamo a monitorare attivamente comportamenti e pattern d'uso, per individuare eventuali criticità o ulteriori margini di miglioramento.