Natura — Headless CMS Redesign for Retail E‑commerce

Headless without headaches: how we turned a fragile storefront into a modular CMS the marketing team could ship with the same‑day confidence of a design system they already knew.

Replatforming the storefront to a headless setup while turning the design system into reusable CMS components so the content team could publish confidently without developer handoffs.

We converted repeatable UI modules into a governed component library mapped to the CMS. Marketing could assemble new pages in hours with brand consistency built in.

Role

UX & Product Design Consultant @ Cloud District

Client & Market

Natura, Retail e‑commerce, Spain & EU.

Timeline

2021

Who might find this case interesting?

Product and engineering leaders planning a headless migration who want real content velocity without sacrificing safety. This shows how to translate a living storefront into a modular system that teams can actually run.

Design teams building a design system that is more than a sticker sheet. This example maps components to CMS structures, with naming, validations, and governance that keep pages consistent over time.

E‑commerce who need predictable publishing, consistent brand execution, and a foundation for experimentation. It outlines a path to faster page creation, clearer ownership, and fewer surprises in production.

Jump to Project's Media and Screenshots ->

Overview

Natura asked Cloud District to modernize their content stack and give non‑technical teams more control over the storefront. The goal was a headless CMS that reflected real brand modules, not just templates. I focused on translating the current site into a clear information architecture and a modular design system that the CMS could understand, so publishing became faster, safer, and more consistent.

Strategic Discovery Focus

I audited every page type, navigation pattern, and UI module in the live site to discover the true building blocks. I mapped these blocks to a proposed content model and documented naming, states, and constraints. With stakeholders, I validated authoring workflows, governance, and definition of done. This alignment let us treat the design system as a source of truth for both Figma and the CMS.

Project Constraints

• Live e‑commerce with no downtime tolerance.
• Legacy templates and scattered content ownership.
• Limited developer bandwidth for ongoing content requests.
• No public performance metrics available. These constraints guided a lean approach that favored reuse, clarity, and safe authoring.

Approach

• Module inventory and IA: Catalogued modules, variants, content types, and relationships.
• Design system in Figma: Tokenized styles and created components that mirrored CMS entries and blocks.
• Content model and governance: Defined fields, validations, and editorial guidelines to prevent drift.
• Authoring experience: Produced page recipes and examples, so editors could assemble layouts with confidence.
• UI improvements: Added new modules and refined patterns where the audit revealed gaps.

Outcome

The team gained a self‑serve publishing workflow that reduced dependency on front‑end cycles and improved brand consistency across pages. The CMS reflected real UI modules, which made experimentation and iteration faster. The design system became a shared contract between design, content, and engineering, lowering risk and speeding up delivery.

Deliverables

• Information architecture and page‑type documentation.
• Module inventory with states, rules, and content requirements.
• Figma design system aligned with the headless CMS model.
• Authoring guidelines, page recipes, and governance notes.
• New and refined UI modules ready for implementation.

Lesson Learned

Treat the design system and the CMS as one product. Use the same names and rules for components, states, and content. When both speak the same language, teams ship faster and consistency holds.

Good governance beats one-off heroics. Clear validations, required fields, and page recipes cut rework and protect the brand without reviewing every change.

Treat the authoring experience like a first-class interface. Give editors instant preview, safe defaults, scheduling, and rollback. That investment saves more engineering time than any new module.

Adoption is change management. Live walkthroughs, office hours, and short how-to videos build confidence far better than long manuals.

Measure the workflow, not just the page. Track time from brief to publish, module reuse, and production defects. Those numbers keep the system honest and improving.

Model just enough. If the schema is too rigid, teams stop experimenting. Keep a documented escape hatch so one-off pages don’t break the system.