Il design del nuovo sito di Chiara Mangili

La biologa nutrizionista Chiara Mangili mi ha incaricato la progettazione del suo nuovo sito web www.chiaramangili.com, per dare ancora un’ulteriore spinta alla crescita del suo business da nutrizionista che, dopo pochi anni, ha già avuto una grande espansione.

Oltre a questo, mi ha richiesto di creare una sezione blog per la pubblicazione delle sue ricette, per dare consigli utili ai suoi clienti, ma soprattutto trovarne di nuovi.

Questo progetto mi ha regalato delle soddisfazioni, perchè di fronte ho trovato un cliente motivato a creare un bel lavoro; e che ha seguito, corretto, e migliorato il progetto insieme a me, è stato un lavoro che si può definire a quattro mani.

Il cliente

Chiara Mangili è una ragazza residente nella provincia di Bergamo che, terminati gli studi in Biologia, ha deciso di specializzarsi nel campo nutrizione.

Un grande aiuto nella sua crescita, è stato il tirocinio che ha svolto al Centro Tumori Di Milano, dove è entrata in contatto con una grande realtà e che gli ha dato una grande spinta nel scegliere la giusta strada.

Appena terminato tutto il percorso di specializzazione, si butta a capofitto nel mondo del lavoro, facendo consulenze ed ampliando il suo business nel giro di pochissimi anni.

Durante il suo percorso decide di aprire anche un profilo instagram dove condividere le sue idee, consigli e ricette per creare una community.

Questo ha aiutato la crescita del suo business e l’ha portata a togliersi tante soddisfazioni.

Il tutto è abbinato a una grande forza di volontà ed a una continua voglia di crescere e specializzarsi.

Il progetto

Il progetto è un sito web che è anche il giusto luogo per le ricette e i consigli pubblicati da Chiara, quindi un vero e proprio spazio personale dove il cliente può ampliare la community, che è già attiva sul profilo Instagram di Chiara.

Come primo passo sono partito facendo una bozza della struttura del sito su Adobe XD, per avere un’idea di come posizionare le parti del contenuto.

Come secondo passo, ho scelto un CMS che mi permettesse di avere a disposizione un’editor con widget personalizzabili e che potesse farmi cambiare font e colori con grande rapidità.

E la scelta non poteva che ricadere su WordPress, il CMS più utilizzato nel mondo, e che da un paio di anni ha Gutenberg come editor.

Quest’ultimo permette di creare interfacce senza scrivere righe di codice HTML, CSS E PHP.

Come mai questa scelta nonostante sia un web designer?

La risposta è abbastanza facile..

Perchè in un futuro anche il cliente possa inserire articoli, pagine, immagini senza aver l’obbligo di saper i linguaggi programmazione appena citati, e senza per forza

OItre a questo, Chiara ha voluto realizzare una sezione blog, per pubblicare le ricette che sono presenti sul profilo instagram.

Il tema WordPress: Kadence

Come detto nel paragrafo precedente, ho scelto WordPress CMS, visto la sua grande flessibilità e le innumerevoli features.

Per chi è esperto di WordPress sa benissimo che per avere un sito dal design moderno bisogna scegliere un tema.

Detta in parole semplici..Il tema è la grafica del sito web realizzato con WordPress.

Per questo progetto ho scelto il tema Kadence che ha moltissimi vantaggi:

  • Page Builder che permette di creare pagine responsive
  • Starter Layout per avere già dei layout di esempio già pronti all’utilizzo
  • Tante impostazioni per creare color palette
  • Utilizzo dei migliori Google Fonts, che sono ben leggibili su tutti i dispositivi
  • Grande numeri di widget da inserire nelle pagine.

Kadence è uno dei temi che utilizza al meglio Gutenberg, che è l’editor moderno di WordPress che ha sostituito quello classico.

Permettendo di creare layout delle pagine senza avere grandi conoscenze dei linguaggio di programmazione.

Il progetto: homepage

La prima pagina che ho progettato è stata la home, che è dove arriva la maggior parte dei visitatori del sito web.

Ho ho strutturato la pagina con una sezione Hero abbinata ad uno slogan per attirare l’occhio dell’utente, e che potesse descrivere al meglio quello 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; qui si vedono tutto quello che offre una consulenza fatta da Chiara Mangili.

Il layout di questa sezione è caratterizzato da tre righe formate da tre colonne; ogni colonna contiene un box con un’icona che descrive ogni singolo servizio offerto dalle consulenze di Chiara.

Questo è importante perchè può portare il visitatore a cliccare sui contatti per prenotare una visita, quindi l’ho inserita subito in homepage con uno sfondo caratterizzato da un colore diverso rispetto alle altre sezioni della pagina.

La sezione intro della bio nella homepage
La sezione dei servizi nella homepage

Dopo la sezione dei servizi, ho inserito gli ultimi articoli che sono stati pubblicati nella sezione del blog, dove si trovano le ricette che sono state create da Chiara Mangili.

Anche questa sezione potrebbe sembrare banale, ma in realtà non lo è, perchè il potenziale cliente che arriva sul sito vuole vedere anche i consigli e le ricette prima di 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 e che sono collegate alla pagina della Biografia.

Scorrendo in basso, poi ho inserito delle icone che collegano il sito 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, che è dove si trova la biografia e una presentazione della Dottoressa Mangili.

Qui ho deciso di tenere una grafica pulita ed essenziale come nella home; perchè le informazioni devono essere presentate in modo chiaro, senza lasciar dubbi al cliente.

Anche in questa pagina, si trova una sezione hero con uno slogan corto ma che descrive al meglio ciò che si trova in questa parte del sito.

La hero section presente all’inizio della pagina Chi sono

Subito dopo ho progettato una sezione che descrive al meglio ciò che è Chiara Mangili e ciò che sono le sue idee dietro al suo business, che è in continua espansione.

Subito dopo si trovano 3 sezioni molto simili tra di loro che descrivono le esperienze e le passioni che hanno segnato il percorso della Dottoressa:

  • La prima spiega quanto l’esperienza al Centro Tumori sia stata importante per il percorso lavorativo
  • La seconda da un bel focus sulla passione dello sport, ambito in cui si vuole specializzare
  • La terza è dedicata al percorso formativo prima di intraprendere la carriera da consulente
L’esperienza al Centro tumori di Chiara
Il percorso di studi di Chiara

Infine la parte finale della pagina è dedicata a dove si trovano gli studi 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à entrare in contatto con lei per avere informazioni.

Altri consulenti invece cercano, inseriscono il form solo nella pagina contatti, invece lei ha voluto metterlo sui più pagina per ‘spingere’ il visitatore all’azione.

Il form che è presente nella pagina Chi sono

Il form è stato creato grazie ai blocchi del page builder di Kadence che nelle impostazioni di questo elemento, ti permette di inserire i nomi delle label di ogni input e la mail del mittente.

Così facendo, si crea un form senza avere grandi conoscenze dei linguaggi di programmazione.

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 quali inserire.

Il progetto: le visite

La terza pagina che ho progettato è quella dedicata alle visite.

A come si svolgono, a cosa offrono e come prenotarle.

Come nelle altre pagine, anche qui ho inserito subito una sezione hero per dare coerenza al design del sito, sempre pulito ed essenziale.

Qui ci sono tutte sezioni dal design molto 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:

  • Fase di Anamnesi
  • Analisi della composizione corporea
  • Elaborazione di un piano alimentare
  • Monitoraggio progressi

Dopo queste sezioni ho inserito sempre un form di contatto, perchè dopo la descrizione del percorso, è giusto inserire un form che dia possibilità di mettersi subito in contatto con la Dottoressa per fissare un’appuntamento.

Il progetto: i contatti

Questa è l’ultima pagina che è stata creata e che ha 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 Chiara.

Le sezioni di questa pagina sono tre e hanno una grafica coerente, rispettando tutta la grafica del sito web.

Gli icon box nella pagina contatti
Il form nella pagina contatti

La prima è una sezione con 4 box caratterizzati da delle icone e che rappresentano:

  • Il numero di telefono di Chiara Mangili, per entrare in contatto direttamente.
  • L’indirizzo mail, in caso si volesse scrivere senza usufruire del form di contatto
  • la pagina ufficiale di Chiara su Facebook
  • Il profilo ufficiale di Chiara, dove vengono pubblicate le ricette e i consigli

La sezione successiva è molto simile ad una che si trova nella pagina Chi sono che descrive dove si può trovare Chiara e dove esercita le consulenze.

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

Un’esempio di come viene visualizzata la pagina Ricette

Come tutti i siti realizzati con WordPress, anche www.chiaramangili.com si trova la sezione blog, dove vengon o pubblicati gli articoli su ricette e consigli alimentari.

Per ora sono presenti alcuni articoli di ricette, ma sicuramente questa pagina si arricchirà di articoli interessanti anche su altre tematiche per aiutare i pazienti.

E’ una pagina che è caratterizzata da una struttura a due colonne che sui dispositivi mobile si adatta e diventa a 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.

Ed è anche un grande mezzo per chi pubblica gli articoli, perchè possono già dimostrare il loro valore e quello che possono offrire ai clienti.

Testimonianza del cliente

A progetto realizzato il cliente è stato soddisfatto, Chiara con il sito online riesce a comunicare al meglio online, 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 reinderizzare i followers che erano interessati a iniziare il proprio percorso di corretta alimentazione con Chiara Mangili.

Lascia una risposta

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *