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

Editing support inside the document

Writing Assistant brings AI editing support directly into the document, so users can work on selected text without switching to a separate chat or losing the surrounding context.

The UX Challenge

Keep AI editing clear and connected

  • Make AI editing feel connected to the document
  • Make it clear exactly what text is being edited
  • Support multiple actions without overloading the interface
  • Keep original content and AI output visually distinct

My Role

I designed how in-document editing and AI assistance work together: select content, trigger an action, review the result, and keep writing in the same place.

Core Workflow

From selection to reviewed output

The interaction rule is simple: selection communicates intent. Users highlight text, choose an AI action, review the generated result, and continue editing in the same workspace.

  1. Add or open a document
  2. Highlight the text to edit
  3. Choose an AI action
  4. Review the generated output
  5. Continue editing in 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 longer text into a shorter version for faster review.

Bulletize

Transforms dense text into structured points for easier scanning.

Process

I designed the experience as a repeatable loop: select, act, review, continue. That keeps the interaction easy to understand while leaving room for additional AI actions over time.

Interaction Strategy

The assistant works as a contextual editing layer rather than a separate destination. It supports the document by making common AI transformations available at the moment they are needed.

Selection-Based Input

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

Action-Based Editing

  • Common AI transformations are explicit actions
  • Users do not need to write a new prompt for every task
  • The action set remains easy to scan and extend

Review Before Applying

  • Generated output appears separately from the source
  • Original content stays visible
  • The user remains in control of the final text

Final Solution

AI editing that stays inside the document

Editing and AI assistance stay inside the document. Selected text is the input, actions stay explicit, and generated content is reviewed before anything is applied.

That keeps the loop short: select → choose action → review → continue editing, instead of sending people into a separate chat.

Outcome

Assistance that stays inside the draft

Users can revise, compare, and keep writing without leaving the document.

New editing actions can be added later without changing how the user works: select text, choose an action, review the result.

See something you’d challenge?

I like talking through design decisions. If you would have approached something differently, I’d like to hear it.