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

User Research, IA and Strategic Design for a global SaaS

Information ArchitectureDesign SystemUX ResearchDark Mode
€6.5M ARR
3.5B API calls/month
65% EBIT margin
DatoCMS interface mockup with Dark Mode active

Challenge

DatoCMS had grown from a startup to a global SaaS with worldwide clients, but until 2023 had no dedicated internal design and research function. As a result the interface had accumulated structural inconsistencies: ambiguous navigation with several conflicting "Settings" entries, a colour system non-compliant with WCAG accessibility guidelines, and a plugin marketplace entirely external to the product, causing significant discoverability issues.

Deliverables

  • Global navigation redesign (two-tier IA)
  • Dark Mode + WCAG AA palette generated in OKLCH
  • In-CMS plugin discovery with direct installation

Approach

I took the Design Lead role part-time, embedded in the team without management layers. We work in 6-week Shape Up cycles: fixed time, variable scope, every cycle ships production features — not documentation. In 2023 I redesigned the information architecture and global navigation, introducing a two-tier navigation (project → environments), removing lexical ambiguities and reorganising content. In 2024 I redesigned plugin discovery, bringing the marketplace inside the CMS. In 2025, informed by research activities, I directed AI integration work. In 2026 I defined the theoretical substrate (both HLS and OKLCH) behind the automatic colour palette generation that enables light/dark mode.

How we got there

  1. IA and global navigation

    The interface had several "Settings" entries in the toolbar: one for the project, one for the environment, one for the user profile, and more — same label, different contexts, guaranteed confusion. I redesigned navigation with a clear two-tier separation: Project Toolbar (brand, environment switcher, global settings) and Environment Toolbar (Content, Media, Schema, Configuration, Playground). The separation eliminated structural ambiguity and made the CMS navigable by non-technical editors without needing to understand the multi-environment architecture. Labelling was changed after validating the best options in each context through user testing.

    Global navigation redesign: Project and Environment Toolbar
  2. Colour system

    The palette is generated algorithmically in OKLCH — a perceptually uniform colour space where perceived lightness grows linearly, eliminating the visual jumps typical of HSL. For each Hue value, a binary search algorithm finds the maximum chroma that guarantees WCAG AA (4.5:1) on white and black backgrounds — no manual approximations. Light and Dark Mode — the most-requested feature — emerge from the same scale: two subsets of steps, chosen by semantic role, not redefined from scratch.

    Dark Mode and three-layer token system in DatoCMS
  3. In-CMS plugin discovery

    The plugin marketplace was an external website: users weren't discovering available extensions, and installation required a full context switch. I redesigned the experience as an in-CMS modal with category sidebar navigation, search, plugin cards with popularity badges and installation state, and inline detail with the README pulled from the GitHub repository. The marketplace is now inside the product: zero redirects, one-click install.

    In-CMS plugin discovery modal with category navigation

Outcome

The new navigation has been in production since 2023 without structural changes. The product grew from €5M to €6.5M ARR with the team growing from 9 to 13 people and an EBIT margin of 65% — top 5% globally among SaaS companies. Monthly API calls reached 3.5 billion, confirming the system's resilience.

Have a project in mind?

Available for projects, retainers, and advisory sessions. I typically respond within 24 hours.

Talk about your project
Prototype Production