Francesco D'Agostino
Digital Designer

Design system e web design per sito giemme.it

Redesign sito web per gestione contenuti e campagne marketing

Servizi
Progetto
Cliente
In breve:

Progetto di redesign e sviluppo del nuovo sito web di Giemme, azienda leader nella produzione di merchandise personalizzato in Italia. All’interno della strategia di marketing dell’azienda, il sito ricopre il ruolo di hub centrale che raduna tutti i contenuti (che vengono poi rielaborati e riportati nei vari canali) in una veste grafica coerente.

Team:
Deliverables:
  • Analisi sito esistente e siti benchmark concorrenti
  • Wireframe e sitemap contenuti del nuovo sito
  • Progetto UI del sito e Design System
  • Implementazione del sito su CMS WordPress e sviluppo tema custom
  • Guida all’utilizzo del sito
Link esterni:
Screenshot della hero section dalla home page del sito giemme.it in versione desktop
Screenshot della hero section dalla home page del sito giemme.it in versione mobile

Progetto e obiettivi

Un centro operativo per comunicazione e marketing

L’obiettivo principale del sito web di Giemme srl è quello di fungere da hub centrale in cui vengono radunati, nella forma più completa ed estesa, tutti i contenuti che verranno rielaborati e redistribuiti nei vari canali di marketing.

La Giemme si occupa di progettare e produrre una vasta gamma di gadget e merchandising promozionale. Il sito rispecchia l’ampiezza del catalogo di prodotti e servizi offerti e mette ordine nei relativi contenuti, dividendoli in diversi “content type” tra cui catalogo prodotti, catalogo servizi, portfolio, sezione notizie ed una sezione in cui curare delle landing page per esigenze di marketing e adv più specifiche.

UI Design

Design System

Per guidare lo sviluppo dell’interfaccia utente del sito è stato creato un Design System che, riprendendo il lavoro svolto sulla Brand Identity di Giemme, definisce le regole che i vari componenti del tema devono seguire secondo il seguente schema:

Elementi base: font, colori, spaziature, separatori.

Blocchi: pulsanti, immagini, icone, blocchi di testo, ecc.

Pattern: insiemi di più blocchi che formano delle sezioni complete.

Template: definiscono i layout di pagine intere con contenuti specifici come: archivi di contenuti, casi studio, singole pagine di servizi e articoli del blog.

Qui di seguito alcuni tra blocchi e pattern progettati per il sito.

Pulsante principale
Titoli principali
Pulsante secondario
Citazioni
Card pagine catalogo
Card casi studio portfolio
Menù del sito in versione mobile

Implementazione

Mappa contenuti e CPT

Per rendere più facile l’interazione con i contenuti – sia internamente all’azienda in fase di produzione e pubblicazione, sia esternamente agli utenti che si affacciano per la prima volta sul sito – sono stati realizzati una serie di Custom Post Types con campi, categorie e tag specifici che guidano nell’inserimento dei contenuti e consentono di richiamarli facilmente tramite query dove necessario lato front-end.

Tra questi ci sono casi studio del portfolio, catalogo prodotti, elenco servizi, lavorazioni svolte, post per notizie ed eventi. 

Header con menù del sito in versione desktop

Implementazione

UI sito web

Alcune sezioni e pagine dal sito web ultimato.

Implementazione

Landing page per campagne di marketing

Oltre ai CPT illustrati in precedenza, è stata creata anche una serie di template che permette ai commerciali e collaboratori lato marketing e SEO dell’azienda di creare landing page da usare per campagne specifiche.

Posiziona il mouse o fai tap sull'immagine per scorrere la landing page

Risultati

Aumento conversioni e interesse sul sito

Il confronto tra il primo semestre con il nuovo redesign rispetto allo stesso semestre dell’anno precedente mostra un incremento dei contatti ricevuti tramite il sito, un generale maggiore coinvolgimento e interazione del pubblico con i contenuti oltre a un aumento delle visite sul sito da dispositivi mobile.

Tempo di permanenza sul sito
+ 0 %
Visite da dispositivi mobile
+ 0 %
Numero di contatti su form del sito
+ 0 %
Posiziona il mouse o fai tap sull'immagine per scorrere il sito
Posiziona il mouse o fai tap sull'immagine per scorrere il sito
Menù mobile sito web giemme.it

Hai in mente un progetto simile?

Contattami per realizzarlo insieme!

Casi studio simili