Caso di Studio - michaelacarrot.com
1 - La Panoramica
Prodotto
Sito vetrina + Blog + Costruttore di post CMS
Sito Web
michaelacarrot.comContributi
Matteo Peroni: Sviluppatore Web / Web Designer / Ingegnere Web
Gabriele Bessi: Sviluppatore Web / Web Designer / Ingegnere Web
William Bardon: Sviluppatore Web / Web Designer / Ingegnere Web
Introduzione
Michaela Scalisi è una travel blogger e skater svizzera.
Ha cambiato brand identity a Novembre 2022 e si è rivolta a noi per creare:
- Una nuova Landing page che le permette di presentarsi e presentare il suo lavoro a potenziali partners.
- Una sezione Blog che racchiude tutte le esperienze maturate dai suoi viaggi.
- Un'applicazione web per creare e gestire in modo facile e veloce i post del blog.
2 - La Sfida
Obiettivi
- Sito vetrina con UI e UX studiata per permettere una navigazione e organizzazione dei contenuti efficiente.
- SEO ottimizzata sito web e singoli post.
- Applicazione web per la creazione dei post che sia user-friendly, veloce, scalabile e piacevole da utilizzare.
Scadenza
01/2023
Michaela ha raggiunto i 100k followers su Instagram, avendo un trend in netta crescita vuole creare una landing page e blog in linea con la sua nuova brand identity e che abbia una organizzazione e fruizione dei contenuti immediata e chiara.
Inoltre, dato che i precedenti strumenti utilizzati per la creazione dei post risultavano poco intuitivi e dispendiosi in termini di tempo e di energia, è nata la necessità di creare una Web App che le permette di creare i contenuti in maniera veloce ed efficiente.
3 - Il Processo
Prima di pensare al design del blog abbiamo effettuato una ricerca dei web-blog più famosi constatando quanto i loro contenuti siano spesso male organizzati preferendo una maggiore interazione rispetto alla fruizione dei contenuti in maniera semplice e rapida.
Con questo blog abbiamo adottato l'approccio inverso, valorizzando una navigazione chiara e semplice e creando un prodotto dalla facile fruizione da parte dell'utente.
Per il processo di design abbiamo utilizzato Figma confrontandoci spesso con Michaela, ecco alcuni spunti e concept di design.
4 - La Soluzione
Sito vetrina + Blog
Il sito web ha un design semplice con delle particolarità che lo rendono accattivante come l'uso frequente delle shapes e del font serif.
La palette di colori scelti è in linea con i topics prinicpali trattati Michaela richiamando la natura, il benessere, l'armonia e l'esplorazione.
Tutti i contenuti sono disponibili sia in lingua inglese che in tedesco dato che tra i followers di Michaela una buona fetta parla tedesco.
Sito vetrina
La hero section è mutata più volte durante il processo di creazione, il risultato finale è quello che soddisfa maggiormente tutti in quanto da risalto alla bellissima illustrazione di Michaela mentre fa quello che ama.
Uno degli obiettivi era quello di organizzare al meglio i contenuti in modo da renderli il più accessibili possibili all'utenza.
Abbiamo quindi raggruppato in tre categorie i contenuti e posti in tre carte subito dopo la hero section in modo risaltarne la visibilità.
Continuando con il concetto di clean che accompagna tutta la Landing abbiamo organizzato le informazioni relative all'about e al work in una sezione con scroll orizzontale che non risulta immediatamente visible nella pagina principale.
In questo modo le informazioni meno rilevanti vengono consultate solo se l'utente è realmente intenzionato lasciando il layout della pagina principale pulito con le informazioni e azioni principali.
Il form di contatto è accessibile sempre dalla cta posta nella navbar e con l'implementazione di un captcha anti-spam.
Abbiamo aggiunto anche un fallback nel caso di errori durante l'invio della mail, in quel caso è possibile inviare una mail manualmente tramite il client di posta dell'utente, così anche in caso di disservizio non vengono perse le richieste di contatto.
Blog Post
I post sono il cuore del blog, vengono suddivisi in chapters che risultano consultabili sulla sinistra in ogni punto di lettura del post.
Sulla destra e al termine della lettura vengono prensentati altri post che sono correlati a quello corrente.
In alto è presente una barra di progresso di lettura del post.
Al termine del post abbiamo implementato la sezione commenti per generare maggior engagement da parte dell'utenza.
Costruttore di post CMS
Nell'applicazione di gestione è stato investito la maggior parte del tempo in quanto tutti gli strumenti sono stati programmati da zero seguendo le esigenze di Michaela.
Questo consente il 100% della personalizzazione e da la possibilità di implementare nuove features senza vincoli che al contrario avremmo avuto utilizzato i tools già presenti sul mercato.
L'applicazione risulta brandizzata Mouth dato che si tratta di un pacchetto che funziona stand-alone e costruito in modo tale da poter essere utilizzato per altri progetti che hanno come scopo la creazione di contenuti.
Loggati nell'applicazione si presenta la dashboard che riepiloga i principali tools creati:
- Post Editor: CMS che permette di gestire i post che poi vengono visualizzati sul blog.
- Media Gallery: tool creato per fornire una gestione migliore ed unificata di tutti i file media usati all'interno dei post.
- Newsletter: in questa sezione è possibile consultare tutti gli utenti che hanno aderito ad essa.
Media Gallery
Funziona come un vero e proprio file explorer in cui è possibile creare cancellare e spostare i media.
All'interno delle cartelle si possono caricare con drag&drop i media file che vengono ottimizati per la fruizione sul web grazie ad un algoritmo di nostra creazione.
Con questo tool i file non rischiano di andare persi e non occupano memoria non trovandosi sul pc dell'utilizzatore.
Inoltre il cliente ha la possibilità di organizzare a proprio piacimento la struttura delle cartelle.
Lista dei post
In questa schermata vengono divisi i post nelle categorie e sotto-categorie presenti anche sul sito web.
Qui è possibile avere un'overview generale dei contenuti e compiere le azioni di aggiunta, modifica, clonazione e cancellazione post.
Post Editor
Il Post Editor è il tool maggiormente utilizzato da Michaela, per questo motivo abbiamo fatto si che si avvicinasse il più possibile alle sue esigenze.
Abbiamo dato focus sulla facilità e divertimento dell'utilizzo e sulla velocità nella creazione dei post.
Strumenti di creazione post
Sono presenti 3 layout da cui partire per creare il post: sezione intera, due colonne, tre colonne.
Informazioni del post
In questa schermata sono consultabili e modificabili le informazioni generali del post.
Qui è possibile scegliere l'immagine copertina, associare le categorie e sottocategorie e aggiungere i tag che permettono una migliore precisione dei post relazionati.
Lo status del post può essere:
- Draft: post non ancora visibile sul blog.
- Published: post pubblicato e visibile sul blog.
- Published with Draft: post pubblicato e visibile sul blog che ha delle modifiche effettuate non ancora pubblicate.
5 - Il Risultato
Fantastico!
Ultra veloce!
Excited!
Super!
Michaela è molto soddisfatta del lavoro, abbiamo facilitato di molto la sua parte di creazione contenuti web, ora è molto più piacevole per lei scrivere un nuovo post.
La Web App manager è facilmente estendibile dato che è stata programmata senza l'uso di plug-in e librerie esterne.
Il sito ha una buona UX e secondo i feedback che abbiamo raccolto dagli utilizzatori risulta user-friendly e organizzato in modo chiaro ed efficiente.