software design | cms | writing tools
El Confidencial: Content Management System Modernization
El Confidencial designs, builds, and maintains its own custom CMS used daily by journalists, columnists, and freelancers. After 15 years on a legacy in-house system, the product, engineering, and design teams undertook a full modernization of the CMS. As lead designer on the project, I drove the end-to-end design effort, focusing on improving writing efficiency, integrating new AI tools to automate repetitive tasks, and resolving significant technical and usability limitations.
Project objectives
The objectives of the product were multifold, with requirements from multiple shareholders across different domains of the company.
Editorial
- Provide a smooth, modern writing tool
- Reduce friction and time spent on tedious tasks (linking, tagging, inserting media)
- Create a tool writers want to work inside from start to finish
- Standardize and centralize use of AI tools
Business
- Increase quality of articles published (fewer grammatical errors, more relevant linked articles, more videos)
- Increase quantity of articles published by reducing time to publication
- Improve SEO performance of articles published
Product
- Enable new AI-powered editorial tools
- Improve publishing efficiency
- Modernize the tech stack
- Enhance security
- Increase adoption and satisfaction among journalists
Previous CMS
The previous CMS had numerous UX issues, from an outdated visual layout, to confusing, icon only buttons, to a small, unusable text editor.
Research Process
Benchmarking
We conducted an extensive benchmarking of numerous other CMS’s and writing softwares, such as Notion, ArcXP, WordPress, Medium, and Substack, annotating user flows, interactions, and AI integration.
User Story Mapping
We audited and prioritized a list of all current CMS features, and then conducted a User Story Mapping exercise to segment quarterly releases of each feature.
User interviews and testing
We held in - depth interviews with multiple stakeholders to get feedback early and often, ensuring that our designs met the needs of our core users.
Insights
Need for a clean, modern text editor
The legacy text editor was too small, lacked autosave, and couldn't display images inline. Many journalists wrote in Google Docs or Word and pasted text in, forcing tedious reformatting.
Enthusiasm for automation of tedious tasks
Inserting images, quotes, and related articles was a slow, manual process. A key goal was to streamline this workflow and leverage AI to automate repetitive formatting tasks.
Inconsistent AI workflows among writers
Journalists used AI inconsistently across a range of external tools. The new CMS aimed to centralize AI workflows, positioning the platform as the primary hub for company-wide AI tools.
Performance issues and instability caused lost work and frustration
Frequent system instability led to lost work and widespread frustration. Improving reliability and performance was an essential priority alongside the UX redesign.
Multimedia workflow friction was a productivity killer
Uploading and embedding multimedia was slow and unintuitive, creating friction as the organization pushed to expand video-driven storytelling.
Workflow Continuity vs. UX Evolution
We balanced meaningful UX improvements with familiar interaction patterns, minimizing the learning curve and ensuring smoother adoption across editorial teams.
Speed is non-negotiable for breaking news
The last-minute desk's zero tolerance for friction directly shaped the rollout strategy. Any disruption to their workflow risked missing breaking stories, making them the last team to adopt rather than the first.
Proximity to users is a rare advantage
Having journalists in the same building enabled informal, continuous feedback that most product teams never get. Problems surfaced quickly and fixes could be validated just as fast.
Workarounds were symptoms, not preferences
Writers weren't avoiding the CMS by choice. The old editor made in-editor writing genuinely painful, and the real design goal was making the native experience good enough that external tools became unnecessary.
Early sketches and wireframes
Early designs prioritized replicating the existing CMS fields to evaluate whether their distribution and hierarchy were effective. One of the main challenges was fitting the fields and multimedia selection intuitively within the available screen space, balancing clarity with functionality.
Final Design
The editor combined shadcn styling with a WYSIWYG interface that mirrored the final published layout, while AI-powered features accelerated the entire content workflow from drafting to publication
Editing interface matches the structure of published articles
The new layout mirrors the published article, placing fields, multimedia, and the text editor in the same positions as the live page.
Live article on site
CMS Editor
More intuitive multimedia selection and editing flows
Users can browse images with metadata, select single or multiple assets, and visually choose article layouts — all from one streamlined interface.
Automated insertion of related news articles using AI suggestions
A vector-based RAG suggests related articles based on content, reducing manual search time and improving recirculation.
Card-based spelling, style and grammar checker
A custom style and grammar checker ensures adherence to El Confidencial's stylebook, with a card-based system for accepting or rejecting each suggestion.
In-line A.I. commands
Smart inline commands let users rewrite, shorten, or adjust tone — all guided by El Confidencial's stylebook.
Precise and well-documented Design System
Tokenized styles and reusable components ensure consistency across features. A hybrid MUI/Shadcn approach pairs MUI's feature depth with Shadcn's simplicity, while Figma Make integration enables instant prototype creation.
Outcomes
Phased adoption across the newsroom
Rollout began with a small group of trusted journalists, then expanded section by section. Starting with Culture and Vanity allowed the team to iterate before reaching higher-stakes teams like the breaking news desk.
Significant reduction in style and spelling errors
Since Argos became a required step before every publication, measurable decreases in style and spelling errors have been recorded across published articles.
Positive reception across the newsroom
Journalists described the new CMS as noticeably more modern and a smoother writing experience. The improved editor reduced the need for workarounds like writing externally and pasting in.
Built for continuous improvement
An integrated bug reporting system and direct access to journalists in the same building enabled fast iteration cycles post-launch, with new capabilities added in response to real adoption patterns.
Key editorial workflows noticeably faster
Multimedia insertion, related article linking, formatting, and spell checking all became measurably quicker. Journalists no longer needed to leave the editor for tasks that previously required switching between tools.
A scalable foundation for what comes next
The design system and modular CMS architecture established a platform for future feature development — one that will move significantly faster as AI-powered development tools mature.