La biologa nutrizionista Chiara Mangili mi ha contattato per progettare il suo nuovo sito web www.chiaramangili.com, per dare un’ulteriore spinta alla crescita del suo business da nutrizionista che, dopo pochi anni, ha già avuto una grande crescita.
Oltre a questo, mi ha richiesto di creare una sezione blog per la pubblicazione online delle sue ricette e di consigli utili per la sua community, e per attirare nuovi clienti.
Questo progetto mi ha regalato delle belle soddisfazioni e mi ha fatto crescere perchè di fronte ho trovato un cliente motivato a creare un bel progetto; e che ha seguito e migliorato il progetto insieme a me, passo per passo.
Il cliente
Chiara Mangili è una ragazza residente nella provincia di Bergamo che, terminati gli studi in Biologia, ha deciso di specializzarsi nel campo della nutrizione.
Un grande aiuto nella sua crescita umana e professionale, è stato il tirocinio svolto al Centro Tumori Di Milano, dove è entrata in contatto con una grande realtà dandogli motivazioni e una grande spinta nel scegliere la sua professione..
Dopo aver conseguito la laurea specialistica, si butta a capofitto nel mondo del lavoro, facendo consulenze.
In pochissimo tempo vede crescere rapidamente il numero di consulenze, e questo va di pari passo con la sua formazione continua che le permette di aumentare le competenze.
Ed è in quel momento che decide di aprire un profilo instagram dove condividere idee, consigli e ricette per creare una community, che gli sarebbe sicuramente servita per continuare a crescere professionalmente.
Passo dopo passo comincia a postare sempre più posts, la community cresce e di pari passo aumentano ancora le richieste di consulenza, molti utenti le scrivono messaggi per chiedere consigli e ricette per migliorare il benessere personale.
Tutto questo è abbinato a una grande forza di volontà e ad grande passione per il proprio lavoro che la porta a spingersi sempre oltre il limite.
Il progetto
Il progetto è la realizzazione del sito web istituzionale che è il ‘contenitore’ dove Chiara si presenta e dove pubblica tutte le sue ricette e consigli, raccolti in questi anni di lavoro con i propri clienti.
Il primo processo è stato realizzare una bozza della struttura del sito su Adobe XD, per avere un’idea di come organizzare il contenuto e le informazioni importanti in modo tale che l’utente riesca a trovarle subito e a n on abbandonare il sito.
Il secondo passo è stato scegliere il CMS più adatto al progetto e che potesse mettere a disposizione widget e blocchi personalizzabili per avere un’interfaccia grafica facilmente personalizzabile in qualsiasi momento.
La scelta non poteva che ricadere su WordPress, il CMS più utilizzato nel mondo che da un paio di anni ha rivoluzionato il suo editor di testo, trasformandolo in un’editor a blocchi adatto per designer e creativi.
L’editor si chiama Gutenberg e grazie ad esso i designers possono creare interfacce senza possedere grandi competenze in HTML, CSS E PHP.
A questo punto la domanda può sorgere spontanea: come mai questa scelta nonostante sia un web designer con buona esperienza?
La risposta è abbastanza facile..
Perchè in futuro il cliente diventi autonomo nel creare articoli, pagine, immagini senza essere obbligato a contattare un designer per qualsiasi modifica o correzione.
Il passo seguente è stato scegliere la giusta palette di colori, che rispecchiasse al meglio ciò che Chiara volesse comunicare; i colori dovevano essere tendenti al pastello, perchè sono i colori preferiti e trasmettono pace e fiducia.
Successivamente sono partito a realizzare l’interfaccia grafica, utilizzando il tema Kadence che è uno dei più utilizzati su WordPress.
Terminato anche quest’ultima fase; mi sono dedicato a impostare tutta la sezione di blog, dove Chiara pubblicherà ricette, notizie e consigli.
Il tema WordPress: Kadence
Come detto nel paragrafo precedente, ho scelto WordPress per realizzare l’interfaccia, grazie alla grande flessibilità e le innumerevoli features.
E come tema ho scelto Kadence, che negli ultimi anni è stato scaricato da tantissimi utenti della community di WordPress.
La scelta è ricaduta su questo tema perchè ha moltissimi vantaggi tra cui:
Kadence è uno dei temi che sfrutta le grandi potenzialità dell’editor Gutenberg, mettendo a disposizione moltissimi blocchi e componenti pronti all’utilizzo e facilmente personalizzabili.
Permettendo di creare layout delle pagine senza avere grandi conoscenze dei linguaggio di programmazione.
Il progetto: homepage
La prima pagina progettata è la homepage, dove arriva la maggior parte dei visitatori del sito web, quindi si deve subito colpire l’attenzione con belle immagini e frasi d’impatto.
Ho strutturato la pagina con una sezione Hero abbinata ad uno slogan per attirare l’occhio dell’utente, e che potesse descrivere in poche parole quella che è l’attività di Chiara Mangili.
La sezione successiva è caratterizzata da una foto di Chiara abbinata a una breve descrizione che porta il visitatore alla pagina Chi Sono per scoprire di più sulla biografia.
Successivamente si arriva alla sezione dei servizi; dove si trovano tutte le info sui servizi delle consulenze fatte da Chiara, per tutti gli uenti che volessero fissare un appuntamento per cominciare il percorso.
Il layout di questa sezione è caratterizzato da tre righe formate, rispettivamente, da tre colonne; ogni colonna contiene un box con all’interno un’icona che descrive il singolo servizio.
Questo è importante perchè può portare il visitatore a cliccare sui contatti per poi prenotare una visita, quindi l’ho inserita subito in homepage con uno sfondo caratterizzato da un colore diverso rispetto alle altre sezioni, per risaltare l’importanza.
Dopo la sezione dei servizi, ho inserito una sezione con gli ultimi articoli che sono stati pubblicati nel blog, dove si trovano le ricette create da Chiara Mangili e pubblicate anche su Instagram.
Anche questa sezione potrebbe sembrare banale, ma in realtà non lo è, perchè il potenziale cliente arrivando sul sito vuole vedere anche i consigli e le ricette e non sempre sono interessati subito a prenotare una consulenza.
Oppure può tornare utile ai clienti abituali, che stanno cercando nuove ricette per tenersi in forma.
Infine c’è una sezione con le foto di Chiara, che sono collegate alla pagina della Biografia.
Infine scorrendo in basso, ho inserito delle icone che sono collegate ai profili di Instagram e Facebook, i due social network più utilizzati da Chiara.
Il progetto: la biografia
Dopo la homepage, ho progettato la pagina Chi sono, dove si trova la biografia e una presentazione della Dottoressa Mangili.
Qui ho deciso di tenere una grafica pulita ed essenziale già presente nella homepage; perchè le informazioni devono essere presentate in modo chiaro, senza lasciar dubbi al cliente, perchè se le informazioni sono confuse poi l’utente abbandonerà velocemente il sito.
Anche in questa pagina, si trova una sezione hero con uno slogan corto ma che descrive al meglio il contenuto.
Successivamente ho progettato una sezione che racconta al meglio ciò che è Chiara Mangili e quelle che sono le idee, i principi dietro alla sua attività, che è in continua espansione.
Subito dopo si trovano 3 sezioni molto simili tra di loro con tutte le esperienze e le passioni che hanno segnato il percorso della Dottoressa:
Infine la parte finale della pagina è dedicata a dove si trovano i centri con cui lavora Chiara, oltre ad un form che permette ai clienti di contattarla direttamente.
Quest’ultimo elemento, è stato richiesto esplicitamente da Chiara, perchè voleva che i potenziali clienti, appena letto la biografia, potessero già avere l’opportunità in contattarla per avere maggiori informazioni.
I suoi competitors inseriscono il form solo nella pagina contatti, invece lei ha voluto che fosse inserito su più pagine per ‘spingere’ il visitatore all’azione.
Questo form è stato creato grazie ai blocchi del page builder di Kadence che nelle impostazioni di questo elemento, permette di inserire i nomi delle label di ogni input e la mail del mittente.
Così facendo, si crea un form senza perdere troppo tempo ed avendo la massima resa.
Nonostante il design semplice e pulito, su questa pagina sono state fatte molte modifiche prima di arrivare alla proposta definitiva, perchè le esperienze di Chiara sono molte e bisognava selezionare al meglio quelle da inserire.
Il progetto: le visite
La terza pagina che ho progettato è quella dedicata alle visite; a come si svolgono, cosa offrono e come prenotarle.
Come nelle altre pagine, anche qui ho inserito subito una sezione hero per dare coerenza al design del sito, che deve essere pulito ed essenziale.
Qui ci sono tutte sezioni dal design simile tra di loro, sempre con immagine affiancata da un testo descrittivo.
Sono sezioni che descrivono le fasi principali dei percorsi fatti con Chiara per raggiungere un benessere e un equilibrio fisico:
Dopo queste sezioni ho inserito sempre un form di contatto, perchè dopo la descrizione del percorso, è giusto inserire un form che dia la possibilità di mettersi subito in contatto con la Dottoressa per fissare un’appuntamento.
Il progetto: i contatti
Questa è l’ultima pagina che è stata creata, è caratterizzata da meno elementi grafici rispetto alle altre, ma ciò non vuol dire che sia meno importante.
Come si può dedurre dal nome della pagina ho inserito tutti le informazioni utili per contattare la Dottoressa Chiara Mangili.
Le sezioni di questa pagina sono tre e hanno una grafica coerente, rispettando tutta la grafica del sito web.
La prima è una sezione con 4 box che contengono delle icone che rappresentano:
La sezione successiva è molto simile ad una già presente nella pagina Chi sono, qui si trovano le informazioni sugli indirizzi dei centri in cui si svolgono le visite ed controlli.
Infine ho inserito un’altro form di contatti che ha un design differente da quello che si trova nella pagina Chi sono.
Il progetto: il blog
Come tutti i siti realizzati con WordPress, anche in www.chiaramangili.com si trova la sezione blog, per rendere leggibili gli articoli su ricette e consigli alimentari. come se fosse un diario.
Per ora sono presenti alcuni articoli di ricette, ma sicuramente questa pagina si arricchirà di altri contenuti interessanti anche su altre tematiche per aiutare il percorso dei pazienti.
E’ una pagina che è caratterizzata da una struttura a due colonne che sui dispositivi mobile si adatta e diventa ad una colonna.
Queste due colonne hanno al loro interno delle card con la thumbnail di ogni singolo articolo, una piccola preview del contenuto ed un un link che porta alla pagina di dettaglio.
Il blog è una sezione importante, perchè vengono pubblicate risorse completamente gratuite, che possono essere consultate da tutti.
Testimonianza del cliente
A progetto realizzato, il cliente è stato soddisfatto, Chiara con il sito online riesce a comunicare al meglio, non solo facendosi conoscere al pubblico ma anche pubblicando piccoli articoli sulle ricette che ogni settimana prepara.
Negli ultimi anni, Chiara è riuscita a fare crescere sensibilmente il proprio business, ed aveva bisogno di un sito web con cui poter ampliare il proprio giro di clientela sfruttando il grande potenziale della comunicazione online.
Inoltre con il proprio profilo Instagram in costante crescita, aveva bisogno di avere un sito dove rimamdare i followers che erano interessati a iniziare il proprio percorso di corretta alimentazione.
