COFIDIS

UX Design - UI Design Area personale utente

OBIETTIVI

Creazione area personale utente per la gestione dei prodotti Cofidis mobile e desk.

Mio ruolo

Creazione schematics, workshop con cliente in Miro, creazione di wireframe e UI mobile e desk.

Descrizione

DESCRIZIONE: Cofidis è una società di prestiti crediti attualmente è l’unica che ha l’accordo con Amazon per dilazionare il pagamento. L’area utente creata comprende tutti i prodotti Cofidis:

Revolving
Credit Line (prestito fatto con Amazon)
Prestito Personale
PagoDil
Cessione quinto dello stipendio

Il progetto è iniziato con dei workshop in presenza con il cliente, poi causa covid i workshop SONO STATI SVOLTI in MIRO. Durante i workshop si definivano il corretto funzionamento dei flussi d’utilizzo di ogni prodotto.

Definizione flussi in Miro

1.1 OVERVIEW DEL PROGETTO COMPLETO IN MIRO

overview

1.2 FLUSSO DELL’ AREA PERSONALE

focus

1.3 HOME AREA PERSONALE

2.wireframes

2.1 Menù contestuale di prodotto

Dopo aver realizzato i flussi e gli schemi su Miro ho realizzato ogni singola tavola, più o meno 400 tavole. Le immagini sottostanti mostrano il menu contestuale di prodotto con le proprie voci di menù, inizialmente avevo pensato a un bottone nero con il + per aprire il menù contestuale ma dopo lo user test è risultato incomprensibile per l'utente, quindi ho inserito il menù di prodotto nel menu generale: da menù generale cliccando sul nome singolo di prodotto si accede al proprio menu, tramite una freccia back si tornava al menù generale.

PRE USER-TEST

MENÙ CONTESTUALE CHIUSO

Il bottone nero con simbolo + apre il menù contestule di ogni prodotto.

MENÙ CONTESTUALE APERTO

Ogni menù contiene voci riguardanti il prodotto in cui l’utente si trova.

POST USER-TEST

HOME SINGOLO PRODOTTO

Il bottone nero con simbolo + ora è scomparso quindi l'utente clicca il menù in alto a sinistra.

MENÙ DI PRODOTTO

Cliccando il menù si apre il menù contestuale del prodotto e per tornare a quello generale basta cliccare la freccia in alto a sinistra. Naturalmente finché l'utente naviga all'interno di un prodotto il menù in alto mostrerà sempre la propria navigazione contestuale.

VISUALIZZAZIONE MENÙ GENERALE

Se l'utente avesse iniziato la navigazione dalla home dell'area personale e non da un prodotto. Questo sopra è il menù che vedrebbe la prima volta.

2.2 Overview - Credit line mobile wireframe

Realizzazione dei wireframe del processo Credit Line, l'unico dealer che collabora attualmente con Amazon per il pagamento rateale.

2.3 UX flusso Credit Line

Qui uno zoom più dettagliato sui wireframe di alto livello.

3.REALIZZAZIONE UI

PALETTE COLOR

Per la realizzazione della UI ho utilizzato il colore primario di Cofidis e ne ho ricavato dei colori secondari usando la brightness e la desaturazione. Qui sotto l’evoluzione da schema a wireframe a UI.

Colore primario e secondario

#FF9900 Colore primario
#FEC22D Colore secondario

Colore testo e icone

#4A4D5F
#8D97AD
#4A5467

Colori funzionali e di background

#EBF3F0
#F2F2F2

METODO

Ho utilizzato i colori primario per le cta, il secondario come colore di appaggio al primo. Ho utilizzato tinte più tenui e neutre per i colori di background e delle icone.

3.2 UI VERSIONE DESKTOP

METODO

Essendo un area personale deve essere funzionale il suo scopo non è l'effetto WOW. Quindi ho fatto il body largo 768px (larghezza del tablet potrait) e ho applicato uno sfondo chiaro e tenue affinchè il contenuto rimanesse ben visibile. Inoltre non ho cambiato l'ordine dei contenuti per adattarlo al desk, quindi l'utente ha corrispondenza sia da mobile che desk o tablet.