Visual & UI challenge - fitness app

Esercitazione di 2 giorni svolta durante il Master in UX design a Talent Garden.

Brief
Progettare l'identità visuale di un'app di fitness realizzando 3 schermate (explore, training, paywall), partendo da una moodboard e da un benchmark, definendo poi le linee guida e costruendo le componenti della UI.

Moodboard

Volevo esprimere dinamicità, movimento, senso di sfida, intensità ed energia; insomma non pensavo a un'app per principianti ma a qualcosa in grado di mettere alla prova anche un campione olimpico.

Gli allenamenti ad alto livello sono fatti di record al centesimo di secondo e di tempi di recupero rigorosamente precisi; per questo ho trovato evocativa l'immagine del timer/cronometro su un tabellone da stadio.

Poi, complice (positivamente) anche il poco tempo per pensare, in tutto questo ho trovato affine, a livello di mood per l'appunto, inserire quella specie di Gundam; rappresentativo dei lavori di un artista contemporaneo di nome Jacopo Tripodi.

Benchmark

Senza soffermarci troppo sull'analisi dei competitor perché, in un esercizio del genere, più che di questo, si tratta fondamentalmente di un'estensione della moodboard; diciamo che ho raccolto un po' di ispirazioni.

Layout

Una griglia a 1 colonna con margine di 16px.

Palette

Tema dark, una serie di toni di grigio, il bianco per il testo e un colore d'accento molto caratterizzante ed energico.
Ogni colore (color style su Figma) ha la sua descrizione compilata in cui descrivo dove deve essere usato.

Typography

Component library

Ho strutturato una libreria di componenti adottando il più possibile un approccio atomico alla sua progettazione. Non era necessario ai fini dell'esercitazione ma ho colto l'occasione per fare qualcosa di più calato nella realtà del rapporto designer-dev possibile, nonostante le tempistiche. E sì, la mascotte risente di queste ultime come del fatto che non sono un illustratore 😂.

Anche a livello di nomenclatura delle componenti mi sono assicurato che seguisse una certa logica e una sua 'architettura dell'informazione', quantomeno per avere tutto all'immediata portata di mano all'interno di Figma.

Risultato finale

Prima di tutto il nome. Se conosci Dragon Ball sai a cosa mi riferisco, altrimenti ti basta sapere che il nome Kaioh richiama degli allenamenti intensi e sovrumani, infatti Re Kaioh è una divinità che vive su un piccolo pianeta nell'aldilà e per diventare un suo discepolo devi raggiungere quel pianeta e farne la tua casa per un periodo (il concetto di morte è abbastanza reversibile in Dragon Ball) da qui l'icona del pianeta usata per la home.

Restando sulla navbar in basso, ho trovato interessante aggiungere una funzione 'Sono pigro', essendo un esercizio incentrato sul visual ero abbastanza libero di sbizzarrirmi sul significante senza curare troppo il significato, quindi non saprei esattamente come si potrebbe sviluppare questa sezione, diciamo che deve essere la ricerca a dircelo.

La home si divide in 3 parti:

- Una grande card con CTA all'allenamento impostato per oggi

- Una serie di suggerimenti se non si vuole seguire il proprio programma

- Un grafico che riepiloga e consente di tenere traccia degli allenamenti della settimana corrente con relativa percentuale di completamento.
Durante l'esecuzione dell'esercizio ciò che si vede è un video quasi a full screen che serve da guida. Le linee gialle seguono sia i movimenti che alcuni elementi statici dell'ambiente e servono a sottolineare la dinamicità e l'energia (in)visibile dello sforzo fisico, diventando un elemento distintivo per il brand.

L'interfaccia sottostante fa da timer, cronometro e da zona di controllo dell'esercizio, con il tasto pausa/avvio in piena thumb zone per una facile fruizione.

Il paywall è molto semplice. Non essendoci differenze nell'offerta, oltre alla durata e al prezzo degli abbonamenti, le 3 opzioni sono contemporaneamente visibili sottoforma di card cliccabili per procedere alla sottoscrizione.
© 2024 Luigi Andrea Cotini