CASE STUDY

Writing Assistant

A selection-based document editing workflow where users highlight text and apply AI actions without leaving the editor.

Role Product Designer
Focus UX + UI
Tools Figma
Writing Assistant document editor and assistant panel overview

Project Context

Writing Assistant keeps editing support inside the document. Users do not need to jump into a separate chat to improve text.

Challenge

  • Make AI editing feel connected to the document
  • Help users understand exactly what text is being edited
  • Support several actions without overloading the UI
  • Keep original content and AI output visually separated

My Role

I designed the interaction model and interface structure for the workflow, focusing on how users select content, trigger an action, and review the result without losing context.

Core Workflow

The interaction rule is simple: selection equals intent. Highlight text, choose an action, review output.

  1. Add or open a document
  2. Highlight the paragraph to edit
  3. Choose an AI action
  4. Review the generated output
  5. Continue editing inside the same workspace

AI Action States

Three compact states show how the same selected text can be transformed in different ways.

Translate

Converts selected text into another language while keeping the original document visible.

Summarize

Condenses long paragraphs into shorter, easier-to-read content.

Bulletize

Transforms dense text into structured bullet points for faster scanning.

Process

I designed the flow as a loop: select, act, review, continue. It feels intuitive now and leaves room for future actions.

Interaction Strategy

The assistant panel works as a contextual editing layer. It does not replace the document editor; it supports it by making common AI transformations available at the moment they are needed.

Selection-Based Input

  • The highlighted text becomes the active input
  • No copy-paste is required
  • The user always knows what content is being edited

Action-Based Editing

  • Translate, Rewrite, Make Formal, Bulletize, Summarize, and Adapt to Doc
  • Actions reduce prompt-writing effort
  • The system stays easy to scan and use

Review Before Applying

  • The generated output appears separately
  • The original document remains visible
  • The user stays in control of the final text

Key UX Decisions

  • Used text selection as the main trigger because it clearly communicates user intent
  • Kept document and assistant visible side by side to preserve context
  • Placed AI actions as buttons to reduce friction
  • Separated original text from AI output to avoid confusion
  • Designed the assistant panel to support additional editing actions over time

Final Solution

  • Created a clearer AI editing workflow inside the document environment
  • Reduced copy-paste friction by connecting AI actions directly to selected text
  • Improved user control by showing outputs before applying changes
  • Built a flexible assistant structure that can support more actions over time

Outcome

The editor now supports writing decisions in real time, with AI actions placed exactly where users revise, compare, and continue drafting. This made the feature feel less like a side tool and more like a natural part of the writing process.

Back to Work