AI Writing Assistant (CMS Internal Tool)

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

5 months

Impact

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

a cell phone on a bench
a cell phone on a bench
a cell phone on a bench

Overview

As a Product Designer at Viewport, I led the design and integration of advanced AI writing features into our existing CMS tool, which is 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.

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.

Results

  • Reduced ideation time by 40%, especially for time-sensitive or recurring content.

  • 70% of editors reported faster self-editing, and the adoption rate within 3 weeks was 92%.

  • Articles using engagement suggestions saw a 12% increase in average 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.

Research

Conducted interviews with 6 senior editors to understand workflow pain points. (I’ll just highlight the key points here, but we discovered some fantastic and unexpected insights that guided us to an excellent solution!)

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 


The Opportunity

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

Tech Stack & API Integration (for Developers) 

Before designing the AI features, the process involved several rounds of research with our engineering team to determine which proposals were unfeasible and which were viable for product deployment. Many adjustments were made based on technical constraints and considerations, facilitating the development of the most straightforward solutions for the API.

Feature

Tech / API

Smart Content Generation, Translation

OpenAI GPT-4 (via API)

Grammar, Tone, Rewrites

Grammarly Text Editor SDK

UI Toolbar 

Custom React Component

Readability Metrics 

Hemingway-like custom logic, spaCy

Overview

As a Product Designer at Viewport, I led the design and integration of advanced AI writing features into our existing CMS tool, which is 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.

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.

Results

  • Reduced ideation time by 40%, especially for time-sensitive or recurring content.

  • 70% of editors reported faster self-editing, and the adoption rate within 3 weeks was 92%.

  • Articles using engagement suggestions saw a 12% increase in average 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.

Research

Conducted interviews with 6 senior editors to understand workflow pain points. (I’ll just highlight the key points here, but we discovered some fantastic and unexpected insights that guided us to an excellent solution!)

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 


The Opportunity

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

Tech Stack & API Integration (for Developers) 

Before designing the AI features, the process involved several rounds of research with our engineering team to determine which proposals were unfeasible and which were viable for product deployment. Many adjustments were made based on technical constraints and considerations, facilitating the development of the most straightforward solutions for the API.

Feature

Tech / API

Smart Content Generation, Translation

OpenAI GPT-4 (via API)

Grammar, Tone, Rewrites

Grammarly Text Editor SDK

UI Toolbar 

Custom React Component

Readability Metrics 

Hemingway-like custom logic, spaCy

Design

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

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

a cellphone leaning against a wall
a cellphone leaning against a wall
a cellphone leaning against a wall

Morning Brew - Subscription experience

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

a cell phone on a table
a cell phone on a table
a cell phone on a table

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.

a cell phone on a table
a cell phone on a table
a cell phone on a table

AI Alternative Diet 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 of the Day

Developed a reusable HTML/CSS component

Morning Brew Daily Email

Developed a reusable HTML/CSS component library for Morning Brew, enabling editors to quickly build and scale newsletters for new brands. Components included cards, image modules, time-stamps, market updates, native ads, social toolbars, and interactive buttons—streamlining production and ensuring design consistency across campaigns.

Viewport's Daily News Brands

Developed a reusable HTML/CSS component

a cell phone on a table
a cell phone on a table
a cell phone on a table

Newsletter Subscription Sweepstakes

Big Recipe partnered with HexClad to launch a sweepstakes, and I designed a sign-up flow to attract entries and showcase the website’s value.

CareNest self-service dashboard to manage listings, view insights, and optimize their visibility through AI feedback

Web-based platform designed to make it easier for families to find quality, licensed board-and-care homes and more rewarding for facility owners

Ticket-Assigning Flow

Partnered with Bizzabo’s B2B SaaS product team to design a tailored solution for CDO Magazine’s ticketing flow, improving usability, reducing error rates, and enabling tickets to be assigned 60% faster.

Mindspan

Newsletter and App for mental health, longevity, and actionable science

Copyright 2025 by Dazzle Creates

Copyright 2025 by Dazzle Creates

Copyright 2025 by Dazzle Creates