Enhancing CMS with AI-Powered Writing Tools

Integrated an AI writing feature into our CMS tool to help editors and writers create more engaging, polished, and accessible content, all while preserving speed and creativity.

Role

Product Design Lead

Timeline

12 weeks

Impact

User Satisfaction Score: 89% Faster Content Creation: 70%

Overview

As a Product Designer at Viewport, I led the design and integration of advanced AI writing features into our existing CMS tool — a platform similar to Sanity and Contentful tailored for editorial teams. The goal was to support editors and writers in creating more engaging, polished, and accessible content, while maintaining speed and creativity. Stage 2. Design Strategy

Formulated a redesign strategy that prioritizes a simplified user flow, enhanced data visualization for goal tracking, and new features to foster community engagement among users. Developed a detailed design roadmap, categorizing changes into short-term fixes and long-term enhancements, to guide the redesign efforts effectively.

The Problem

Research: Conducted interviews with 6 senior editors to understand workflow pain points.

Editorial teams struggle with a complex, outdated internal CMS tool that hinders content creation and lacks intelligent assistance. Some editors struggled with writer’s block, inconsistencies in tone, lack of engagement, and time-consuming editing cycles. They frequently toggled between the CMS and third-party writing tools (e.g., Grammarly, Hemingway), disrupting their workflow and slowing content production.

Existing CMS Problem

No AI Integration - Users manually switch between 3-5 different tools for writing, editing, and optimization, breaking their creative flow.
Poor Collaboration - Editorial teams struggle with version control and real-time collaboration, leading to 40% longer content production cycles.
No Readability checker (audience pain points) - Readability analysis is conducted to assess the clarity of a text. Lack of Clarity and Accessibility. Less engaging content, some paragraphs and sentences are too long and complex

Objective

Design and integrate AI-powered writing assistance directly within our CMS to:

Boost editorial productivity
Optimize content for reader engagement
Maintain consistent brand voice
Deliver real-time insights and improvements

Overview

The Problem

Research: Conducted interviews with 6 senior editors to understand workflow pain points.

Existing CMS Problem

No AI Integration - Users manually switch between 3-5 different tools for writing, editing, and optimization, breaking their creative flow.
Poor Collaboration - Editorial teams struggle with version control and real-time collaboration, leading to 40% longer content production cycles.
No Readability checker (audience pain points) - Readability analysis is conducted to assess the clarity of a text. Lack of Clarity and Accessibility. Less engaging content, some paragraphs and sentences are too long and complex

Objective

Design and integrate AI-powered writing assistance directly within our CMS to:

Boost editorial productivity
Optimize content for reader engagement
Maintain consistent brand voice
Deliver real-time insights and improvements

Smart Content Generation

Generate ideas based on a specified topic. By entering a subject of interest, you will receive a title, subtitle, and content, which can serve as a foundation for developing straightforward content.

Writers can now enter a topic or working title and instantly receive:
Content outline suggestions
Draft intros
Talking points and keyword suggestions

Floating Toolbar with AI Functions

A new AI feature in the toolbar enhances writing by refining text, correcting spelling, translating, adjusting tone, and finalizing sentences.

Key functions:

Tone adjustments (e.g., more casual, more authoritative)
Grammar and spellcheck (powered by Grammarly API)
Sentence rewriter (“Make it punchier”)
Translation for multilingual audiences

Engagement Optimization

AI suggestions to enhance your writing’s impact by emphasizing key points, encouraging the addition of relevant information, and customizing your message for your audience.

Real-time AI suggestions help writers:

Rewrite for higher click-throughs
Add engaging lead-ins
Improve emotional resonance using NLP sentiment analysis

Readability Analysis

Content structure and flow recommendations

Inline guidance on structure and clarity:

Highlights dense paragraphs
Flags passive voice and jargon
Suggests section breaks and visual hierarchy

Content Writing Insights

Word count, reading time, and content metrics

Displays real-time content health indicators:

Estimated reading time
Word count
Skimmability and structure score
Internal/external link density

Usability Testing

Pain Points Identified:
Suggestion Overload: 3 users felt overwhelmed by multiple AI suggestions
Loading States: 2 users were unsure if AI was processing their requests
Keyboard Shortcuts: 8 users requested keyboard shortcuts for frequent actions
Undo Functionality: 4 users wanted clearer undo options for AI changes

Critical Usability Issues:
Issue 1: Suggestion Prioritization
Problem: Users struggled to identify which AI suggestions were most important
Severity: Medium (affected 25% of users)
Solution: Implemented pop-up walkthrough tool tip
Issue 2: AI Processing Feedback
Problem: Lack of clear loading states caused user uncertainty
Severity: Low (affected 17% of users)
Solution: Added animated loading indicators and estimated processing times
Issue 3: Keyboard Navigation
Problem: Power users wanted keyboard shortcuts for AI features
Severity: Medium (affected 67% of users)
Solution: Implemented keyboard shortcuts (Cmd+K for AI menu, Cmd+E for enhance)

Post-Test Improvements
Immediate Changes Made:
Suggestion Hierarchy: Added confidence scoring and visual ranking
Loading States: Implemented progress indicators for AI processing
Keyboard Shortcuts: Added hotkeys for primary AI functions
Undo Clarity: Enhanced undo functionality with change previews

Design Iterations:
Before: Generic list of AI suggestions After: Ranked suggestions with confidence scores and impact indicators
Before: Silent AI processing with no feedback After: Animated loading with "Generating Cool Stuff..." messaging
Before: Mouse-only interaction After: Full keyboard navigation support

Impact

Reduced ideation time by 40%, especially for time-sensitive or recurring content.
70% of editors reported faster self-editing, and adoption rate within 3 weeks was 92%.
Articles using engagement suggestions saw a 12% increase in avg. time-on-page.
Improved content scores across Flesch Reading Ease by an average of 18 points
Helped editors benchmark and optimize during the writing process, not just at final review.

Outcome

By embedding AI directly into the editorial workflow, we not only saved time but also significantly improved content quality and consistency. The experience felt natural — like writing with an invisible co-editor — which accelerated adoption across departments.

“It’s like Grammarly, but smarter and made just for our kind of writing.” – Senior Editor”
Qualitative Feedback

"It has transformed how our team approaches content creation. The AI suggestions feel like having a senior editor available 24/7." - Editorial Director

"The floating toolbar is genius. It's like having writing superpowers without leaving my flow state." - Senior Content Creator

"Our content performance has improved dramatically. The engagement optimization actually works." - Head of Content Marketing

Other projects

Heartland Cooking - AI Alternative Diets Feature

AI Alternative Diet Recipe Feature to generate alternative recipes or substitute ingredients for popular dietary considerations. These options allow users to modify recipes for dietary needs by swapping meat-based dishes for plant-based or healthier alternatives and then swapping them back.

Taste Of Home - Recipe Product Page

This project was to redesign a recipe page to optimize it for search engines, increase revenue from affiliate links, and create a clean, user-friendly layout.

Morning Brew - Onboarding Design

This project is to redesign the onboarding process to increase the conversion rate to registered users by 30%. I've work with UXR to can help me identify new opportunities for product development based on user needs and behaviors.