DatoCMS
Design Lead · 2023 – presente · SaaS / Headless CMS

Da €5M a €6.5M ARR: research, IA, design

Information ArchitectureDesign SystemUX ResearchDark Mode
€6.5M ARR
3.5B API calls/mese
65% EBIT margin
Mockup dell'interfaccia DatoCMS con Dark Mode attivo

Sfida

DatoCMS era diventata un SaaS globale con clienti in tutto il mondo ma senza una funzione di design dedicata. Nel 2023, le crepe erano visibili: la navigazione aveva tre voci "Settings" in conflitto, il sistema cromatico non rispettava gli standard WCAG, e il marketplace plugin viveva completamente fuori dal prodotto, invisibile alla maggior parte degli utenti. Nessuno era responsabile del tutto. E si vedeva.

Deliverable

  • Ridisegno navigazione globale (IA a due livelli)
  • Dark Mode + palette WCAG AA generata in OKLCH
  • Plugin discovery in-CMS con installazione diretta

Approccio

Ho assunto il ruolo di Design Lead part-time, embedded nel team, senza strati di management. Lavoriamo su cicli Shape Up di 6 settimane: tempo fisso, scope variabile, ogni ciclo produce feature in produzione, non documentazione. Nel 2023 ho ridisegnato l'architettura informativa e la navigazione globale, introducendo una navigazione a 2 livelli (progetto → environments) rimuovendo ambiguità lessicali e riorganizzando i contenuti. Nel 2024 ho ridisegnato la plugin discovery, portando il marketplace dentro il CMS. Nel 2025, informato dalle attività di ricerca, ho indirizzato le attività di integrazione dell'AI. Nel 2026 ho definito il substrato teorico (sia HLS che OKLCH) alla base della generazione automatica della palette colori che consente il light/dark mode.

Come ci siamo arrivati

  1. IA e navigazione globale

    L'interfaccia aveva diverse voci "Settings" nella toolbar: una per il progetto, una per l'environment, una per il profilo utente, e poi altre ancora stessa etichetta, contesti diversi, confusione garantita. Ho ridisegnato la navigazione con un sistema a due livelli separati: Project Toolbar (brand, environment switcher, impostazioni globali) ed Environment Toolbar (Content, Media, Schema, Configuration, Playground). La separazione ha eliminato l'ambiguità strutturale e reso il CMS navigabile da editor non tecnici senza dover capire l'architettura multi-ambiente. Il labelling è stato cambiato dopo aver verificato con user testing le migliori opzioni in ogni contesto.

    Ridisegno della navigazione globale: Project e Environment Toolbar
  2. Sistema cromatico

    La palette è generata algoritmicamente in OKLCH, uno spazio colore perceptually uniform dove la lightness percepita cresce in modo lineare, eliminando i salti visivi tipici di HSL. Per ogni valore di Hue, un algoritmo di binary search trova il chroma massimo che garantisce WCAG AA (4.5:1) su sfondo bianco e nero, senza approssimazioni manuali. Light e Dark Mode (la feature più richiesta) emergono dalla stessa scala: due sottoset di step, scelti per ruolo semantico, non ridefiniti da zero.

    Dark Mode e sistema token a tre livelli in DatoCMS
  3. Plugin discovery in-CMS

    Il marketplace plugin era un sito esterno: gli utenti non scoprivano le estensioni disponibili, e l'installazione richiedeva un cambio di contesto completo. Ho ridisegnato l'esperienza come modal in-CMS con sidebar di navigazione per categoria, ricerca, schede plugin con badge di popolarità e stato installazione, e dettaglio inline con README dal repository GitHub. Il marketplace è ora dentro il prodotto: zero redirect, installazione in un click.

    Plugin discovery modal in-CMS con navigazione per categoria

Risultati

L'ARR è cresciuto da €5M a €6.5M. Il team è passato da 9 a 13 persone. L'EBIT margin ha raggiunto il 65%, top 5% nel SaaS globale. Le API call mensili hanno raggiunto 3.5 miliardi. La nuova navigazione è in produzione dal 2023, invariata. Il prodotto è più coerente, più accessibile e strutturalmente più solido di quando ho iniziato. Il lavoro si accumula.

Hai un progetto in mente?

Sono disponibile per progetti, retainer e sessioni di advisory. Di solito rispondo entro 24 ore.

Parliamo del tuo progetto
Prototype Production