In questo articolo, parlo del mio processo di lavoro su uno dei progetti su larga scala che rinnovano lo strumento interno di Probo (lo chiamiamo Cerebro ) per un migliore supporto clienti.

Cos'è Cerbro?

Cerebro è un'unica fonte di verità per tutte le cose Probo! È lo strumento interno di Probo che ha diverse sezioni, tra cui Creazione di contenuti (per la creazione e l'invio di contenuti all'app), Tag (Creazione di tag utente e assegnazione di un'azione a tali tag), Dashboard e Utenti.

La sezione Dettagli utente è il database degli utenti, in cui il team CX può controllare le informazioni relative ai reclami degli utenti e tornare all'utente.

Per questo articolo, stai osservando come abbiamo ridisegnato la sezione dei dettagli dell'utente di Cerebro.

Il Breve

Riprogettazione della sezione Dettagli utente su Cerebro per migliorare UX e produttività per il team di assistenza clienti di Probo.

Capire il problema

Il team di supporto utilizza Cerebro per controllare le attività degli utenti svolte sull'app.

Per questa attività ho prima identificato i flussi utente principali e poi ho cercato problemi di UX in essi:

Mentre sedevo con il team di supporto per osservare i loro flussi di lavoro e identificare i problemi di usabilità, ho risolto personalmente alcuni ticket. Questo è stato durante la stagione IPL quando abbiamo ricevuto più di 1000 biglietti per dirigente della comunità, quindi il loro carico di lavoro è stato immenso.

Vederli così determinati per la migliore esperienza di supporto per gli utenti probo, mi ha colpito e mi ha spinto ulteriormente a migliorare la loro esperienza quotidiana attraverso il design.

Problemi principali individuati:

1. Scarsa scansionabilità per le informazioni: il lavoro principale degli utenti è ottenere informazioni da Cerebro, ma guardando attraverso le tabelle, c'è stato un grande sforzo cognitivo, poiché hanno dovuto concentrarsi molto per trovare le informazioni richieste sullo schermo.
2. Navigazione complessa: per alcuni flussi utente, la navigazione era complessa e nascosta.
3. Aumento del carico cognitivo: il design precedente non era in linea con le leggi della gerarchia e della prossimità della Gestalt per ridurre il carico cognitivo sugli utenti.
   Inoltre, con determinati flussi utente, gli utenti dovevano ricordare le informazioni da una tabella e passare a un'altra tabella per confrontare il che aumentava il tempo necessario per completare un'attività.
4. L' identità del marchio non è allineata: il marchio di Probo è stato reinventato alcuni mesi fa, quindi la riprogettazione di Cerebro è stata l'occasione per allinearsi al nuovo marchio.

L'app e il sito Web di Probo sono stati reinventati alcuni mesi fa con un nuovo marchio, era giunto il momento per lo stesso negli strumenti interni.

Vediamo il Prima vs Dopo di alcune pagine:

Design — Prima vs Dopo

Quindi analizziamo queste riprogettazioni una per una.

Prima vs dopo: scomposizione del design

Sezione di riepilogo utente:
questa sezione è composta dalle informazioni di base disponibili sugli utenti, suddivise in tre parti; informazioni simili sono mantenute insieme.

• Le informazioni più importanti sono evidenziate su fronti come i dettagli e lo stato dell'utente.
• Priorità delle azioni: nel vecchio design, sono presenti tre CTA senza alcuna gerarchia per le azioni primarie/secondarie.
  Inoltre, dopo aver analizzato, ho scoperto che nessuno di loro è un CTA o un'azione primaria e quindi non è necessario essere in anticipo e concentrati sullo schermo. I pulsanti di azione sono composti da un pulsante chiamato "opzioni".

• Barra di navigazione laterale:
  nelle schermate con tabelle di dati, lo spazio orizzontale è della massima importanza, quindi il design della barra di navigazione laterale è stato reinventato con i pulsanti delle icone che occupano uno spazio minimo.
• Se è richiesta una barra di navigazione a grandezza naturale, l'utente può fare clic sul logo e questo lo espande nella barra di navigazione a grandezza naturale con i pulsanti Testo+Icona.
  Senza espandersi, se gli utenti devono cambiare, possono passare il mouse sopra le icone per vedere cosa significa:

Ma in che modo la separazione delle schede renderebbe facile il confronto dei dati tra tabelle in schede diverse? Ne parleremo tra un po'!

Ora tuffarsi in qualche dettaglio in più:

Ottimizzazione delle tabelle di dati per una migliore UX: le
tabelle di dati hanno un compito da svolgere: fornire rapidamente i dati necessari agli utenti!
Affinché questo lavoro venga svolto, deve avere una rapida scansionabilità per trovare informazioni pertinenti.

Questi sono i design Before vs After per le due tabelle più complesse: cronologia del saldo e cronologia degli scambi

Per rendere la scansione dei dati più facile e veloce, in linea di massima vengono presi in considerazione 4 punti:

• Scansione rapida per trovare informazioni rilevanti, attraverso la codifica a colori e l'aggiunta di gerarchie e prossimità a informazioni separate .
• Raggruppamento di dati simili
• Eliminare le informazioni ripetute
• Riordinare i dati per un rapido confronto

Come si è comportato?

La riprogettazione insieme ad alcune correzioni di bug è stata pianificata per lo sviluppo e, grazie ai risultati dei test di usabilità, si prevede che aumenterà la produttività di 2 volte.

Poiché questo è ancora in fase di sviluppo, non è possibile condividere le prestazioni finali e i KPI in questo momento, ma aggiornerò qui non appena sarà disponibile.

Cosa ho imparato?
La maggior parte del lavoro svolto prima di questo progetto riguardava l'aggiunta di nuove funzionalità di progettazione alle pagine di destinazione dell'app o del sito web di probo.
Quindi lavorare su un set di dati così enorme è stata una sfida in sé, ho imparato molto su come UX sia un risultato diretto di come è stata implementata l'interfaccia utente.

Sempre per gli appassionati di design ecco il link ad un articolo sul sito del gruppo NN che mi ha aiutato molto nella comprensione e progettazione di tabelle dati.

Ps Ho anche imparato a continuare a documentare regolarmente il processo di progettazione perché questo case study mi ha richiesto troppo tempo per scrivere

Qual è il prossimo?

1. Esplorare micro-interazioni e stati vuoti per aggiungere piccole delizie tra tutto il lavoro che non è stato coperto in questo momento a causa di una stretta di tempo.
2. Esplorando le scorciatoie da tastiera per l'utilizzo dello strumento, fin d'ora tutti nel team hanno MacBook (flex 101 ), quindi per ora è efficiente e facile da usare trackpad.
3. Per ora, la riprogettazione della sola sezione dei dettagli dell'utente è terminata, la fase successiva dovrebbe essere la riprogettazione di tutte le altre sezioni di Cerebro.

Un grande ringraziamento al nostro fantastico team CX, ho letteralmente fatto irruzione nella loro stanza almeno 5 volte al giorno durante questo progetto, hanno risposto a tutte le mie domande e dubbi nel miglior modo possibile e questo è stato soprattutto durante la stagione IPL, la più impegnativa periodo dell'anno!

Grazie anche al mio fantastico team di progettazione ❤️ e a tutti i proprietari del prodotto che mi hanno aiutato con preziosi feedback e suggerimenti.

Grazie per aver letto! A presto con un altro case study

Saluta Nidhi su LinkedIn • Instagram • Twitter