Stefano
UI / UX designer

Edison Energia
Redesign area privata

Novembre 2018 / per Doralab - Roma

Obiettivi del progetto

Ottimizzare l’area riservata contenete prodotti e servizi dei clienti Edison Energia

La sfida

  • mostrare in modo chiaro i prodotti e i servizi attivi
  • creare ingaggi per up & cross selling

Mio ruolo

Nel team UX della Doralab, mi sono occupato del disegno, produzione e prototipazione dei processi web e mobile. Ho realizzato tutti i mockup e partecipato al test con gli utenti.


Roadmap

Edison Energia Redesign area privata
Processo e metodologia

Come Mostrare i prodotti e servizi attivi?

  • Nuova architettura dell’informazione
  • Redesign della pagina iniziale dei contratti luce e gas
  • Creazione nuova sezione Prodotti e servizi
  • Creazione Schede dei prodotti e servizi attivi

Edison Energia Redesign area privata

Nuova architettura dell’informazione

Head bar
L’icona per la visualizzazione del profilo è stata spostata sulla head bar per due motivi:

  • maggiore coerenza con la visualizzazione desktop
  • semplificazione del menu a tendina

Edison Energia Redesign area privata

Nuova architettura dell’informazione

  • Modifica della voce di menu
    È stato suggerito di modificare il nome della sezione “My Edison” in “La mia utenza”. L’ attuale dicitura non risulta chiara agli utenti e l’ambiguità aumenta considerando che questa sezione nella nuova architettura dell’informazione non è una reale home page di tutta l’area riservata ma la dashboard delle singole utenze.

  • Semplificazione del menu per la navigazione sul sito pubblico
    La convivenza nel menu mobile della navigazione dell’area riservata e contemporaneamente dell’area pubblica è ambiguo e complesso. È stato suggerito di lasciare la navigazione del sito pubblico solo nel footer e aggiungere nel menu dell’area riservata un semplice link all’area pubblica.

Edison Energia Redesign area privata

Redesign della pagina iniziale dei contratti luce/gas

  • Task primari
    In alto vengono mostrati i widget relativi ai task primari in ordine di importanza per gli utenti (bollette e pagamenti, info sul contratto, autovettura)
  • Prodotti e servizi collegati all’utenza
    Seguono i prodotti e servizi strettamente collegati all’utenza selezionata
  • Offerte personalizzate
    Seguono i widget di offerte fortemente personalizzate

Edison Energia Redesign area privata

Nuova sezione prodotti e servizi

  • Widget chiusi
    Elenco dei prodotti e servizi organizzati per argomenti con una sintetica descrizione dei vantaggi offerti in ottica di soddisfazione di specifici bisogni degli utenti. La versione compatta consente di vedere l’intera offerta con uno scroll più breve.
  • Widget aperti
    La versione aperta consente di avere in anteprima le informazioni più utili sul prodotto acquistato (scadenza, numeri utili e link alla scheda dettagliata)

Edison Energia Redesign area privata

Schede dei prodotti e servizi attivi

La scheda mostra informazioni su:

  • documentazione contrattuale
  • pagamenti
  • istruzioni di funzionamento

Come creare ingaggi per up & cross selling?

  • Widget personalizzati per innescare l’ingaggio
  • Creazione nuova sezione Offerte del momento

Edison Energia Redesign area privata

Widget personalizzati per innescare l’ingaggio

  • Thank you page autolettura
    Widget con offerta personalizzata da mostrare dopo il completamento di un task.

Importante
Nel widget viene data la possibilità di più “vie di uscita”:

  1. vedi l’offerta
  2. ricordamelo la prossima volta
  3. non mi interessa…

Edison Energia Redesign area privata

Creazione nuova sezione offerte del momento

La pagina elenca i widget con offerte costruite sulla base di informazioni:

  1. Non personalizzate (stagione, esigenze di business, ecc.)
  2. Personalizzate (acquisti pregressi, consumi, ecc)

4 Design principle
adottati nella progettazione
1
Le tue offerte
sono rilevanti per me
2
Mi parli al momento giusto
e nel contesto più idoneo
3
Mi è chiaro perché dovrei considerare quest’offerta
4
Mi offri tutte le alternative possibili per agire
Edison Energia Redesign area privata

1. Le tue offerte sono rilevanti per me

  • Promuovi solo i prodotti che l’utente non ha già.
  • Laddove possibile, usa quello che conosci del cliente per proporgli solo i prodotti e servizi di cui potrebbe beneficiare.

Ad esempio: Nella pagina "La mia utenza" suggerisci di acquistare un prodotto complementare a quelli che l’utente ha già, facendo leva sui bisogni da soddisfare.

Edison Energia Redesign area privata

2. Mi parli al momento opportuno e nel contesto più idoneo

Considera sempre l'obiettivo e il task primario del cliente al fine di non interrompere il flusso.

Ad esempio: se si vuole proporre un prodotto quando il cliente effettua un pagamento di una bolletta.

Edison Energia Redesign area privata

2. Mi parli al momento opportuno e nel contesto più idoneo

Inserisci il trigger in un punto coerente sia col task dell’utente, sia con il contenuto della proposta

Ad esempio: il cliente riceve una bolletta con un consumo anomalo superiore alla media.

Edison Energia Redesign area privata

2. Mi parli al momento opportuno e nel contesto più idoneo

Considera il giorno della settimana, l’ora e il device con il quale si collega il cliente

Ad esempio: al cliente che il sabato mattina tramite tablet dedica più tempo alla lettura della situazione dei consumi con Energy Control Gold.

Edison Energia Redesign area privata

2. Mi parli al momento opportuno e nel contesto più idoneo

Adatta la frequenza del messaggio alla frequenza di login del cliente

Ad esempio: stabilisci delle regole che tutelino la forza del messaggio e la user experience dell’utente.

Edison Energia Redesign area privata

3. Mi è chiaro perché dovrei considerare quest'offerta

Focalizza il messaggio sui vantaggi per il cliente, più che sulle feature del prodotto

Ad esempio: nei singoli widget descrivere il bisogno che il prodotto o servizio va a soddisfare più che le singole caratteristiche tecniche

Edison Energia Redesign area privata

3. Mi è chiaro perché dovrei considerare quest'offerta

Se rilevanti e credibili, aggiungi elementi di social proof o esclusività dell'offerta

Edison Energia Redesign area privata

3. Mi è chiaro perché dovrei considerare quest'offerta

Laddove possibile, crea consapevolezza mostrando all’utente un’informazione, probabilmente non ancora evidente per lui, generata dell’analisi dei suoi dati

Ad esempio: al cliente del quale sappiamo che possiede una caldaia molto vecchia (es. ha già una manutenzione con Edison)

Edison Energia Redesign area privata

4. Mi offri tutte le alternative possibili per agire

Permetti a cliente di approfondire le informazioni, oltre che di proseguire verso l'apertura

In generale gli utenti si informano prima di prendere una decisione

Edison Energia Redesign area privata

4. Mi offri tutte le alternative possibili per agire

Permetti ai clienti di approfondire anche in futuro e offri la possibilità di comunicare un feedback

Ad esempio: alla conclusione di un task primario per l’utente, proporre un up selling con la possibilità di scegliere di ricordarmelo in futuro o comunicare di non essere interessati

Come si applicano
i Design principle

REAN model

Edison Energia Redesign area privata
Edison Energia Redesign area privata

MKTG/CRM

Tramite CRM sappiamo quali sono i prodotti acquistati dall’utente.

Reach

Raggiungiamo il cliente con un widget mostrato alla conclusione del task primario dell’utente

Edison Energia Redesign area privata

Engage

Lo ingaggiamo facendo leva sul bisogno di sicurezza e protezione

Edison Energia Redesign area privata

Activate

Gli chiediamo di compiere una azione, lasciando aperte “tutte le vie di uscita”

Edison Energia Redesign area privata

Nurture

Se l’utente opta per “Ricordamelo la prossima volta”, passiamo una informazione al CRM utile per una futura azione.

Anche se il cliente opta per l’opzione “Non mi interessa..” Il CRM acquisisce una informazione utile per proporre in futuro prodotti differenti e azioni più personalizzate.

Edison Energia Redesign area privata

Wireframes

All'inizio del mio processo di progettazione ho creato wireframe a scopo di test.

I wireframe sono stati tradotti in un prototipo interattivo per poter essere testati con gli utenti.

Il livello di interazione si è limitato agli obiettivi del test, cioè esplorare le aree critiche e ottenere degli insight utili

Dopo aver verificato e corretto tutti gli errori di usabilità, ho modificato e concluso la progettazione delle schermate finali.

Prototipo mobile navigabile, clicca qui
(Prototipo realizzato con Axure)

Cosa ho imparato da questo progetto?

  • Per mostrare in modo chiaro i prodotti e i servizi attivi e creare ingaggi per up & cross selling, ho dovuto approfondire la comprensione della visione aziendale e studiare bene il tipo di offerte e prodotti per convertire in vendite.

  • I test costanti sono assolutamente cruciali per il successo. 
    Realizzando prototipi, ho imparato a separare la mia prospettiva dalle reali esigenze degli utenti. 

  • Mi piace partecipare al test con gli utenti, è un momento in cui la persona mi fa capire osservando le sue parole, gesti e sguardi ciò che desidera, ciò di cui ha bisogno, cosa lo infastidisce. Questo è ciò che mi fa amare essere un UX / UI designer.

Grazie per il Vostro interesse e per la lettura. Contattarmi per qualsiasi richiesta.