Datlas - sito istituzionale WordPress su misura

Il nuovo sito istituzionale di Datlas, il gruppo che accompagna le imprese enterprise nella trasformazione digitale dei processi operativi, nasce dal rifacimento di datlasgroup.com e dal contestuale passaggio al dominio datlas.it. Partendo da un design Figma pressoché completo, ho sviluppato un sito istituzionale WordPress su misura, con un tema interamente custom pensato come una piattaforma editoriale più che come una semplice traduzione in codice delle interfacce.

Il mio ruolo è andato oltre lo sviluppo. Ho affiancato il cliente, il team UX/UI, il team IT e i referenti SEO in tutte le fasi tecniche del progetto: analisi del design, accessibilità, progettazione dell'esperienza editoriale, integrazioni, infrastruttura e migrazione del dominio, fino alla messa online.

Dal design Figma a un'interfaccia accessibile

L'interfaccia è stata sviluppata con un approccio pixel-perfect rispetto ai layout Figma, su un'architettura modulare a componenti costruita con PHP, HTML semantico e Tailwind CSS. La fedeltà visiva, però, era solo una parte del lavoro: durante l'implementazione ho analizzato anche gli aspetti di accessibilità che il design originale non esplicitava, segnalando al cliente e al designer le criticità emerse e traducendole in soluzioni tecniche coerenti con l'identità visiva di Datlas.

In questo modo l'accessibilità è diventata parte integrante dello sviluppo dell'interfaccia, e non un intervento successivo da applicare a sito finito. Il confronto con il team UX/UI è stato continuo e ha riguardato in particolare questi ambiti.

• Navigazione completa da tastiera, con skip link per saltare direttamente al contenuto
• Stati di focus visibili e coerenti con il linguaggio visivo del brand
• Gestione corretta degli elementi interattivi, dai menu a tendina ai pulsanti
• Struttura semantica delle pagine e gerarchia dei titoli rispettata
• Comportamento accessibile dei componenti, anche nelle versioni mobile
• Verifica del contrasto e della leggibilità dei testi

Un page builder proprietario con Carbon Fields

Per dare al cliente autonomia nella gestione e nell'evoluzione del sito ho realizzato un page builder proprietario basato su Carbon Fields, senza ricorrere a page builder commerciali. Le pagine si compongono a partire da una libreria controllata di sezioni flessibili e componenti atomici, ognuno con la propria anteprima visiva, così che la redazione sappia cosa sta inserendo prima ancora di compilare i campi.

L'architettura editoriale prevede due modalità distinte, pensate per tenere separati i contenuti ordinari da quelli che richiedono una composizione più articolata.

Un backend WordPress costruito sui processi del cliente

L'amministrazione di WordPress è stata estesa e semplificata per adattarla ai processi reali di Datlas. Ogni funzionalità dedicata nasce da un'esigenza concreta emersa durante il progetto, e tutto ciò che non serviva è stato rimosso o disabilitato per ridurre il rumore nel pannello.

Osservatorio al posto degli articoli

Il post type standard degli articoli è stato sostituito da Osservatorio, il contenuto editoriale con cui Datlas pubblica analisi e riflessioni sui processi operativi. Struttura e tassonomie, a partire dai temi, seguono il modello informativo del sito invece di adattarsi a quello generico di un blog.

Posizioni aperte: una sezione careers governata dallo stato

Per un gruppo che cresce attraverso le persone, la sezione careers è uno degli snodi più visitati di un sito istituzionale, e anche uno dei più delicati da gestire nel tempo. Le posizioni nascono, vengono condivise su LinkedIn e sui portali di annunci, ricevono candidature e poi si chiudono. Ho progettato la gestione delle posizioni aperte in WordPress come un post type dedicato, raggiungibile sotto /careers/, in cui un solo dato, lo stato della posizione, decide cosa vede l'utente, cosa vede il motore di ricerca e cosa compare nel resto del sito.

Una scheda strutturata per la redazione

Ogni posizione si compila da una scheda con campi strutturati per sede, team, seniority e tipologia di contratto, a cui si aggiunge la riga di riepilogo che compare sotto il titolo nell'elenco pubblico. Il corpo dell'annuncio si costruisce invece per sezioni ripetibili, come il ruolo in breve, le attività, i requisiti, l'offerta e il processo di selezione.

Per ogni sezione la redazione sceglie il livello del titolo, ma il sistema non permette di saltarne uno: un titolo di quarto livello inserito subito dopo uno di secondo viene riportato automaticamente al terzo. È un vincolo piccolo, che mantiene corretta la gerarchia dei titoli su ogni annuncio a vantaggio sia degli screen reader sia della lettura da parte dei motori di ricerca.

Sul frontend la scheda separa i dati essenziali, raccolti in una colonna con la call to action di candidatura, dal testo dell'annuncio, così che chi arriva da un link condiviso capisca in pochi secondi dove, in quale team e con quale contratto lavorerebbe.

Dalla scheda al modulo di candidatura

Ogni posizione è associata a un'area della candidatura. Quando l'utente clicca su Candidati ora, il modulo si apre con il campo Posizione di interesse già preselezionato, riducendo i passaggi e la possibilità di errore. Il modulo raccoglie dati di contatto, seniority, curriculum in PDF o DOCX, profilo LinkedIn e portfolio facoltativi e la motivazione, con la presa visione dell'informativa dedicata ai candidati.

Ogni invio finisce nell'archivio delle richieste del backend e attiva due comunicazioni automatiche: la notifica al team HR con tutti i dati del modulo e la conferma di ricezione al candidato, entrambe gestite dal mailer integrato descritto più avanti.

Aperta o chiusa: il ciclo di vita della posizione

Lo stato si imposta da un box laterale con due sole opzioni, Aperta e Chiusa. A questo si affianca una data di chiusura automatica facoltativa: la posizione resta aperta fino al giorno indicato compreso e si chiude da sola il giorno successivo, mentre per riaprirla basta svuotare o spostare la data. Nell'elenco del backend una colonna dedicata mostra a colpo d'occhio lo stato di ogni annuncio.

La SEO delle posizioni chiuse

Il punto più interessante del progetto careers riguarda cosa succede quando un annuncio si chiude. Eliminare la pagina avrebbe prodotto errori 404 sui link già condivisi e sui portali che la citano; lasciarla indicizzata come se nulla fosse avrebbe invece mantenuto nei risultati di ricerca un annuncio non più valido. Ho quindi legato al solo cambio di stato un comportamento diverso della stessa URL.

Chi arriva su una posizione chiusa non trova un vicolo cieco: la pagina dichiara che l'annuncio non accetta più candidature, propone la candidatura spontanea e mostra subito l'elenco delle posizioni aperte in quel momento. Il follow mantiene il valore dei link verso quelle posizioni, mentre il noindex e l'esclusione dalla sitemap fanno uscire progressivamente l'annuncio scaduto dai risultati di ricerca.

Privacy e documenti legali con iubenda

L'integrazione di iubenda è gestita direttamente dal tema: il sistema di consenso resta quello del provider, mentre il design del cookie banner è stato personalizzato per renderlo coerente con l'interfaccia Datlas. Anche i documenti legali si adattano al contesto in cui vengono aperti. Visitata normalmente dal browser, la stessa pagina usa il layout completo del sito; caricata come embed all'interno del sistema di gestione del consenso, restituisce soltanto il contenuto legale, senza header, footer né script di terze parti non necessari.

Email transazionali e gestione delle richieste

Il flusso precedente usava Mailchimp esclusivamente come strumento tecnico di invio, senza sfruttarne le funzioni di marketing automation. Ho riprogettato questa parte integrando un mailer dedicato direttamente nell'applicativo: il sito gestisce in modo più lineare le richieste, i relativi trigger e l'invio delle comunicazioni transazionali, mentre il controllo sui template e sulle personalizzazioni stilistiche resta nel backend.

Il template contenitore si modifica con un'anteprima che simula la resa su telefono, tablet e desktop, e ogni trigger, dalla richiesta di informazioni alla candidatura, ha i propri testi per la notifica al team e per la risposta automatica a chi ha compilato il modulo.

Tutte le richieste vengono archiviate nel backend, con filtri per modulo, data e pagina di provenienza ed esportazione in CSV, così che il team abbia un registro unico anche indipendentemente dalle caselle di posta.

Sito bilingue e workflow di traduzione via Excel

Il tema è predisposto per la gestione dei contenuti in italiano e in inglese con Polylang. Il nodo critico, in un sito costruito con un page builder, è la quantità di campi da tradurre: per questo ho realizzato un workflow basato su Excel che permette di lavorare sulle traduzioni senza intervenire manualmente su ogni singolo campo dei componenti.

Sicurezza e infrastruttura

Il progetto è stato consegnato insieme alla relativa infrastruttura server. Mi sono occupato della configurazione dell'ambiente, della messa in produzione e delle misure operative di sicurezza: backup giornalieri verso un provider esterno, configurazione dei servizi di invio email, disabilitazione delle funzionalità non utilizzate e gestione tecnica del rilascio e dei puntamenti.

L'accesso a WordPress è protetto da autenticazione a due fattori, con codice via email, app di autenticazione e codici di ripristino tra i metodi abilitati. Ogni utente configura in autonomia il proprio secondo fattore dal profilo, senza dipendere dall'amministratore.

Migrazione da datlasgroup.com a datlas.it

La pubblicazione del nuovo sito ha coinciso con una migrazione di dominio e con una revisione dell'architettura dei contenuti, due eventi che, sommati, rappresentano il momento più rischioso per la visibilità organica di un sito istituzionale. Insieme ai team IT e SEO ho costruito una mappa completa dei reindirizzamenti, con redirect 301 per i contenuti trasferiti e risposte 410 per quelli dismessi, tradotta in regole sul web server Caddy.

Il mio ruolo ha incluso il supporto tecnico durante la migrazione, la configurazione del mailer e il coordinamento tra sviluppo, UX/UI, SEO e infrastruttura, fino ai puntamenti necessari alla messa online.

Il risultato

Datlas dispone oggi di un sito istituzionale WordPress sviluppato su misura ma progettato per restare estendibile e amministrabile nel tempo. La redazione lavora con una libreria di componenti coerente con il design system, con strumenti editoriali costruiti sui propri processi e con una sezione careers che governa da sola indicizzazione, sitemap e visibilità di ogni annuncio. Il tutto poggia su un'infrastruttura configurata per gestire contenuti, comunicazioni, traduzioni e le future evoluzioni del progetto.

Ti serve un sito istituzionale WordPress su misura?

Se devi rifare il sito della tua azienda partendo da un design esistente, migrare un dominio senza disperdere il lavoro SEO fatto negli anni o dare alla redazione strumenti costruiti sui vostri processi, posso affiancarti con lo stesso approccio raccontato in questo caso studio: tema custom, accessibilità trattata come requisito e un backend che lavora per chi lo usa.