A settembre 2019 sono stato assunto come UX/UI Designer per lavorare per Spot Educação .

Il progetto che mi è stato assegnato era un prodotto B2B rivolto a scuole a basso budget alla ricerca di una soluzione perfetta per le loro ansie di apprendimento dell'inglese. L'obiettivo principale di Go Bilingual era quello di avvicinare tali scuole con un'applicazione amichevole rivolta ai loro insegnanti e dirigenti, fornendo la nostra esperienza quando si trattava di imparare l'inglese a basso costo.

Il concetto prometteva molte funzionalità. Ma cos'era davvero? Quali sono stati i nostri utenti, i loro viaggi? Quante cose potremmo effettivamente sviluppare in così poco tempo?

Qui tratterò il nostro viaggio fino ad ora, tutto ciò che abbiamo imparato dallo sviluppo e dalla progettazione del prodotto e il futuro che immaginiamo per esso.

1. Scoperta

Non appena ho iniziato a lavorare per Spot Education , le cose si sono messe male: avevamo un'idea sul concetto, ma ancora non esisteva; Non ne sapevamo nulla a parte il fatto che doveva avere alcune funzionalità, ma anche questo non è stato facile. Il sentiero era nebbioso e pieno di incertezze. Non sapevamo chi fosse il nostro utente finale; non sapevamo se molte di queste funzionalità sarebbero state effettivamente praticabili nel nostro MVP ; non sapevamo nemmeno se il prodotto sarebbe stato scritto in un'architettura completamente nuova, costruita da zero, o se ne avremmo clonato uno esistente, da un prodotto già funzionante della nostra azienda chiamato Edify , e partire da lì.

Scoprire cosa fosse il nostro prodotto è stato davvero importante; Quindi la nostra azienda ha assunto un aiuto esterno sotto forma di Grito.cc .

Grito è un'agenzia di design digitale di Rio de Janeiro, Brasile. Il loro obiettivo era fornire una soluzione agile e piacevole ai nostri problemi. Hanno svolto alcune ricerche con insegnanti e professori e hanno preparato tutto per il nostro sprint di progettazione . Ci avrebbero anche fornito 6 schermi per applicazioni desktop e mobili, sulla base di questo esercizio e della nostra etica e direzione del design.

Partendo da zero, abbiamo iniziato a discutere su cosa il nostro prodotto avrebbe dovuto essere, avere e cosa non sarebbe stato e non avrebbe avuto. Abbiamo redatto quattro personaggi, tutti insegnanti, di diversa estrazione, età e posizione sociale. La cosa principale che il nostro esercizio di ricerca ed empatia ci ha mostrato è che uno dei principali problemi degli insegnanti era che sentivano il bisogno di avere un supporto più professionale e anche di essere più in contatto con contenuti importanti e pertinenti mirati alle loro esigenze di insegnamento. Volevano migliorarsi come professionisti.

Internamente, abbiamo sentito il bisogno di contemplare anche i problemi dei dirigenti scolastici e degli amministratori; quindi abbiamo fatto le nostre ricerche e abbiamo trovato la nostra persona, qualcuno che avrebbe utilizzato la nostra applicazione internamente, gestendo il personale, prenotando gli ordini e altro ancora.

Quindi, sostanzialmente, avevamo due prodotti in uno: una Extranet, utilizzata da amministratori e gestori; e un portale per insegnanti, utilizzato dagli insegnanti e, eventualmente, dagli studenti. Quindi siamo partiti progettando e sviluppando entrambi.

2. Definizione

Quindi, come svilupperemmo e progetteremmo le nostre applicazioni? Quale tecnologia verrebbe utilizzata? Come sarebbe stato il design? Dopo lo sprint di progettazione, la nostra ricerca e le nostre esigenze aziendali, come definiremmo i nostri prodotti?

Poiché il prodotto era già stato venduto, abbiamo iniziato a discutere se fosse redditizio progettare un'intera nuova architettura da zero o semplicemente clonarne una esistente già utilizzata da uno dei prodotti dell'azienda, Edify . I responsabili delle decisioni hanno optato per quest'ultimo, poiché avevamo un programma serrato e dovevamo consegnare l'extranet il prima possibile.

Allo stesso tempo, stavamo anche iniziando a definire come sarebbe stato il Portale del Maestro; una soluzione web responsive per i nostri insegnanti, dove sarebbero in grado di avere una guida professionale e tutoraggio dai nostri pedagoghi.

Quindi, in pratica, tutte quelle decisioni e definizioni sensate ci hanno permesso di sviluppare e progettare il prodotto in modo bidirezionale e ci hanno anche permesso di iniziare i nostri sprint e cicli di prodotto. Mentre ero incaricato di progettare il prodotto nel suo insieme e vedere il quadro generale, gli sviluppatori avevano il compito di costruire da zero in base alle nostre decisioni.

3. Progettazione

Allacciate le cinture perché questo sarà lungo.

Non appena abbiamo avuto il via libera per iniziare a sviluppare e progettare il prodotto, ho creato un file Figma chiamato " Go Bilingual Design System ". Inizialmente, non avevamo molto su cui lavorare; quale sarebbe il concetto del nostro sistema di progettazione? Quali erano i nostri obiettivi nello sviluppo di tale sistema?

Prendendo spunto da Atomic Design , ho deciso di iniziare con le nostre Icone , dato che sono l'elemento più piccolo di cui il nostro prodotto avrebbe bisogno. Dopo alcune ricerche, mi sono imbattuto in un eccellente sistema di progettazione della gente di Akveo , Eva . Le icone di questo sistema di progettazione avevano la rotondità e la leggibilità che stavamo cercando, quindi erano l'abbinamento perfetto. L'unica differenza, tuttavia, è che abbiamo stabilito una regola di base quando si utilizzano le icone; invece di avere due set di icone, abbiamo deciso di rendere disponibile un set e l'altro come set di interazione, il che significa che ogni volta che si interagisce con un'icona in un modo specifico, all'utente verrà mostrata un'eventuale seconda icona.

Dopo aver deciso quali sarebbero le nostre icone — e dato che non ci sarebbe bisogno di progettarle da zero — il passo successivo sarebbe quello di guardare il nostro marchio, il suo logo, i valori e l'identità visiva, dato che i sistemi di design di solito prendono un approccio diverso, più aperto e fluido allo sviluppo e al design del marchio.

L'identità visiva di Go Bilingual è stata progettata per la prima volta dai ragazzi di Quintal . Il manuale che ci hanno fornito includeva il logo e alcune applicazioni, la tavolozza dei colori, con opzioni primarie e secondarie e tipografia, con Panton come opzione primaria e Open Sans come secondaria. Tuttavia, i team aziendali hanno ritenuto che il loro approccio fosse troppo "allegro", "giovane" e "colorato" e questo non era necessariamente il nostro obiettivo, poiché i principali utenti del nostro prodotto sarebbero stati i dirigenti scolastici e gli insegnanti. Avevamo bisogno di un'identità visiva più sobria, in cui i nostri utenti si sentissero più a loro agio ea proprio agio nell'usare il prodotto per lunghi periodi di tempo. Abbiamo anche pensato che un prodotto digitale dovesse essere più flessibile e fluido per quanto riguarda i suoi sistemi, e la sua identità visiva dovrebbe riflettere questo.

Abbiamo deciso di allungare i colori del progetto; solo tre tonalità principali potrebbero essere buone per un grande progetto di design di stampa, ma non è abbastanza quando si tratta delle sfumature che un progetto digitale deve comprendere, almeno nella mia esperienza. Quindi quello che abbiamo fatto è stato prendere ognuno dei colori principali e creare tre diverse sfumature basate su di essi e abbiamo anche aumentato il numero di toni principali e secondari. Un'altra regola che abbiamo definito era che fosse possibile qualsiasi numero di gradienti tra uno qualsiasi dei due colori del nostro set, rendendo il nostro design fluido ed estremamente versatile.

Il nostro nuovo logo è stato sviluppato internamente; era solo una rivisitazione del vecchio, concentrandosi maggiormente su gradienti e contorni, apportando quindi un aspetto più moderno al nostro marchio. Abbiamo anche legato il concetto alla base dell'intero Design System mentre stavamo dando un'occhiata al nostro logo ed è qui che è nata l'idea "Lattice" . Poiché tutti i nostri sistemi dovevano essere facili da costruire e altamente gestibili, abbiamo pensato a un reticolo, una griglia aperta, in cui le idee potessero essere collocate, sviluppate e progettate liberamente e in continua evoluzione.

Crediamo veramente nei design e nei sistemi fluidi e negli ambienti in continua evoluzione.

Con il nostro set di temi Design System , abbiamo iniziato a progettare i nostri componenti e ogni singolo bit che sarebbe stato presente nelle nostre applicazioni digitali. Abbiamo preso ciò che è stato appreso dal nostro sprint di progettazione e tutto ciò che è stato prodotto fino a quel momento e abbiamo iniziato la produzione, cercando di essere coesi e lavorando attorno alle linee guida impostate. Credo che la progettazione e lo sviluppo del prodotto riguardino la coesione e la tematizzazione; qualcosa che ho portato dai miei giorni come game designer e art director che è ancora valido fino ad oggi e sono contento che noi, come azienda, seguiamo le stesse premesse.

4. Consegna

Quindi è arrivato il momento, dopo un lungo ciclo di progettazione e sviluppo, di consegnare il nostro prodotto. Quali sono esattamente le funzionalità che sono finite sul nostro prodotto e come ha funzionato?

Il nostro prodotto è stato sviluppato utilizzando Ruby per il suo back-end e React per il suo front-end ei nostri sviluppatori hanno utilizzato le linee guida stabilite dal sistema di progettazione per implementare il nostro Portale dell'insegnante .

Il nostro MVP avrebbe una pagina di destinazione , che mostrerebbe i valori e la missione del nostro prodotto e ciò che cercheremmo di ottenere; una pagina delle tendenze , dove l'utente potrà vedere, guardare, leggere e ascoltare contenuti pensati esclusivamente per insegnanti, educatori e professori; una pagina delle risorse , dove troverai la totalità dei contenuti creati dai nostri pedagoghi; una pagina del percorso di sviluppo , dove gli insegnanti potranno imparare a diventare professionisti ancora migliori seguendo i nostri corsi specializzati; e una pagina talk to us , dove gli stessi utenti potrebbero contattarci e risolvere le loro domande e ansie.

Ci è voluto un po' per sviluppare l'intero prodotto poiché aveva molte funzionalità, ma alla fine tutto ha funzionato bene ed eccolo qui; Portale dell'insegnante di Go Bilingual , nella sua piena gloria.

Le esigenze aziendali sono in continua evoluzione e Go Bilingual è stato interrotto quando Spot Educação è diventato Edify Education . Tuttavia, tutto il lavoro e l'impegno che ci sono stati profusi sono stati mostrati qui e siamo davvero orgogliosi di ciò che abbiamo realizzato. Il nostro MVP è stato davvero difficile da produrre e abbiamo avuto un sacco di sfide lungo la strada, ma immagino che sia così che siano la progettazione e lo sviluppo del prodotto, ed è stato piuttosto divertente e avvincente dal punto di vista professionale. Non solo, questo progetto getta le basi per molti prodotti all'interno dell'azienda.

Il sito principale di Go Bilingual era http://www.gobilingual.com.br/ , ma al momento è offline poiché il prodotto non esiste più. Puoi ancora accedere al Portale dell'insegnante qui: http://teachersportal.gobilingual.com.br/ . Grazie per aver letto!