Il terzo progetto del bootcamp Ironhack UX/UI Design

Il gruppo

E questa volta la squadra, beh, non c'è nessuna squadra!
È un progetto solista.

Informazioni sul progetto

Migliora le nostre abilità di interfaccia utente. Per questo, abbiamo dovuto scegliere un'applicazione mobile relativamente conosciuta. Quindi per vedere cosa potremmo migliorare.

Quindi ho scelto di lavorare sulla versione mobile dell'applicazione Discord.

Ho fatto questa scelta perché, come molti dei miei colleghi Ironhacker, sono un utente di questa App e va detto che la versione mobile non è proprio user friendly.

Abbiamo dovuto scegliere tra 3 e 7 pagine su cui lavorare. Quindi ho esaminato l'app e ho fatto la mia scelta in base alle mie frustrazioni ma anche in base agli elementi in queste pagine per avere diversi aspetti dell'interfaccia utente su cui lavorare (menu, profilo, schede...)

E soprattutto questo menu molto molto molto lungo...

Analisi visiva della concorrenza

Poiché Discord è fondamentalmente un'app per i giocatori, sono andato a vedere cosa offrivano i concorrenti che fosse simile e/o diverso.

Le tavolozze dei colori

Ecco le tavolozze dei colori utilizzate da questi tre concorrenti

Ed ecco quello dell'app mobile Discord

Analisi euristica

Dopo queste piccole ricerche, è il ritorno del nome molto selvaggio dell'analisi euristica.

Sempre seguendo le dieci euristiche di usabilità più popolari per la progettazione dell'interfaccia utente, ho identificato e annotato in una tabella gli errori euristici che ho riscontrato.

Ricerca secondaria

Volevo anche saperne di più sul marchio, quindi sono andato a fare alcune domande al mio migliore amico Dr. Google.

E ho potuto vedere che Discord aveva sviluppato un sistema di progettazione che ero ansioso di studiare.

Lo trovi qui in fondo alla pagina.

La prima cosa che mi ha colpito è che la tavolozza dei colori del Design System è completamente diversa da quella utilizzata nella loro app mobile...

Cosa voglio fare

Riconnettere l'applicazione con il sistema di progettazione
Correggere tutti gli errori di accessibilità
Semplificare e riorganizzare questo lunghissimo menu…
Aggiungere inclusività

Riconnettiti con il Design System

Per questo, ho semplicemente preso la tavolozza dei colori e il font presenti nel documento.

Ginto Nord per il marchio
Whitney per il testo

L'abbonamento Nitro sembra essere al centro del marketing di Discord ma non se ne trova traccia nel design system, quindi ho scelto di usare Ginto Nord per identificare Nitro ma di applicarlo in corsivo per dare l'effetto di movimento e velocità che questo nome suggerisce.

Correggi tutti gli errori di accessibilità

Qui ho lavorato principalmente sugli errori di contrasto seguendo i consigli del Design System e controllando regolarmente il contrasto, la dimensione delle icone e dei testi utilizzati.

Semplifica e riorganizza questo menù lunghissimo…

Per questo articolo, ho semplicemente cambiato questo lungo elenco in un menu a fisarmonica. Ho anche ripristinato l'opzione per disconnettersi che era proprio alla fine nella prima scheda del nuovo menu.

Ho anche scelto di rielaborare una parte della pagina profilo con questo layout per il nickname che con il mio modello mentale voleva cliccarci sopra per modificarlo (cosa che non è andata ovviamente…)

Aggiungi inclusività

Per questo obiettivo, devo ammettere che non sapevo come o cosa fare, tanto questo argomento è vasto.

Così ho avuto l'idea di aggiungere un tema di colore diverso con il "Blurple" ufficiale di Discord come tema predefinito, quindi un tema rosa e due temi con colori più neutri.

E ho anche modificato l'icona di un razzo (molto maschile) per un'icona più neutra e più appropriata al suo scopo.

Sovrapposizione di attività

Ho anche rielaborato la sezione giochi per renderla più leggibile e ariosa modificando la disposizione delle carte.

Panoramica del prima e del dopo

Ecco i link ai due flussi prototipo se vuoi testare il menu a fisarmonica e l'icona del gamepad con la sua sovrapposizione.

Primo collegamento

Secondo collegamento

Cosa ho imparato da questo progetto?

Mi sono divertito molto con il progetto, mi è piaciuto molto immergermi nell'interfaccia utente e imparare di più su Figma.

Ho anche notato che anche se in questo progetto eravamo davvero concentrati sull'interfaccia utente, sono state utili anche le competenze che ho appreso in UX sui due progetti precedenti: analisi visiva della concorrenza e ricerca secondaria che mi ha portato al Design System.

Sentiti libero di lasciare un commento se hai qualche suggerimento su cosa avrei potuto fare meglio o segnalare eventuali errori che potrei aver commesso.
Grazie per aver letto.