Da side-project a prodotto: brand identity di Sortello

Sortello è uno strumento che permette di prioritizzare liste in modo semplice ed efficace, sfruttando un algoritmo basato su albero binario: ti permette di confrontare 1 a 1 gli elementi delle liste, ottimizzando il processo di prioritizzazione.

Insieme a Cristiano (ideatore del progetto) e con l’aiuto di Pietro, Nicole, Francesco, Marco e Carla, abbiamo lavorato alla progettazione, l’implementazione e la comunicazione di questo side-project interno, sfruttando il tempo dedicato alla nostra formazione personale, hacknight e il nostro tempo libero (we <3 what we do).

In Sortello mi sono occupato delle attività di design, realizzando la brand identity, UI e implementazione del markup.

La brand identity di Sortello

La prima attività che ho realizzato è stata quella dell’ideazione della brand identity. La definizione di un logo declinato su vari formati, la scelta di una palette cromatica e di un carattere tipografico.

sortello brand identity

 
Durante il processo, l’aggiunta di nuove funzionalità e il feedback dei primi utenti che utilizzavano Sortello ci hanno fornito informazioni utili e vincoli che hanno permesso di evolvere il brand.

Ad esempio, il carattere tipografico è stato modificato da Montserrat a Fira Sans, un cambiamento dovuto all’esigenza di maggiore leggibilità e alla necessità di avere un carattere utilizzabile sia come titolo che come paragrafo.

 

User interface: progettazione e restyle

Sortello è nato grazie ai suggerimenti sulla gestione delle priorità che Paolo Manocchi ci ha insegnato durante le giornate di affiancamento svolte in ideato nel 2016. L’idea di Cristiano fu quella di progettare uno strumento che permettesse di applicare nella quotidianità del nostro lavoro, i metodi illustrati nel workshop.

Per questo motivo il progetto è partito come prototipo, senza uno studio sulla progettazione delle interfacce.
Quello che abbiamo fatto, in un secondo momento, è stato applicare la veste grafica derivata dalla brand identity al markup dell’applicazione.

Dopo aver fissato una prima versione del nostro strumento, ho portato avanti uno studio più approfondito sulle interfacce, migliorandone la leggibilità e la comprensione.

Ho realizzato un piccolo set di icone composto sia da elementi funzionali che da altri più caratterizzanti e ho progettato una UI che fosse il più agnostica possibile rispetto ai device e alla lunghezza dei possibili titoli delle card.

 

Implementazione e refactoring del markup

Sia come volontà personale, avendo realizzato la parte di progettazione visiva, sia come esercizio formativo, ho deciso di lavorare al markup dell’applicazione, costruita con React.

Ho sfruttato l’occasione per conoscere meglio questo framework, sempre più diffuso, e per esercitarmi nell’uso della convenzione BEM, sulla quale Vittorio, uno dei nostri front-end developer, realizzerà un workshop il 15 marzo durante il CSS Day a Faenza 😉

Durante il refactoring dei file CSS, ho replicato la logica costruttiva “a componenti” che possiede React. Sono stati costruiti CSS ad hoc per ogni componente dell’applicazione, migliorando notevolmente la gestibilità del codice markup, precedentemente molto più complessa.

 

Next step?

Ormai è più di un anno che lavoro in ideato e, tra i progetti su cui ho lavorato, Sortello è quello a cui forse sono più riconoscente. È stato uno dei primi a cui ho lavorato con gli altri ideatos, in un team eterogeneo nato dalla volontà di fare crescere il progetto fino ad evolverlo in un prodotto.

Il tempo che ho dedicato mi ha permesso di conoscere meglio i miei colleghi, sfruttare le mie competenze progettuali precedentemente acquisite, consolidandole; oltre a sperimentare e formarmi sullo sviluppo HTML e CSS.

Sono convinto che dedicare tempo a progetti che non siano clienti, come in questo caso, sia una cosa molto importante per la formazione sia personale che collettiva.

Anche per questo motivo, il lavoro su Sortello non si ferma qui: stiamo già portando novità sull’applicazione e ne abbiamo in cantiere altre per il futuro, stay tuned!