✍️ User Story: Start Editing Contents
As an editor I want to open and edit existing content so that I can update, or improve it.
✅ Acceptance criteria
The user can click in any place and start typing or editing.
The user can modify text, images, or formatting.
The user can publish any time with an Publish button always available even if nothing changed.
The system confirms when changes are successfully published.
The system shows autosave every time the user changes something.
When user leaves the document the DRAFT badge appears in it as a signal that some content was not published.
When user returns a banner at the top says when the draft is from, with Discard and Publish now right there. The edited paragraph is highlighted so they see exactly what changed.
Important notes:
Save vs publish — this is the key tension. Right now the flow forces a binary: publish or discard. But users naturally want a third state: "I'm done for now, save my draft, I'll publish later."
In a multi-user context, Discard isn't really "throw away my work" — it's closer to "revert to the last published version", which is a much more meaningful and specific action. That's a different mental model entirely.
User lands in a document
User can click in any place and start typing or editing.
Users gets versions conflict notification
User reviews versions
🪜 Basic flow
User navigates to the content.
User does click in any area to start editing and the text cursor appears with the block in soft green.
User makes changes.
User clicks Publish.
System updates the content and shows confirmation.
User leaves the document without publishing changes, changes will autosaved.
User returns the document, it will have information with latest changes highlighted and option to publish or discard.
⚠️ Edge Cases
User lacks permission to edit → Do not show "Publish" button
User lacks permission to edit → Do not show "New" button
User lacks permission to edit → Options in 3 dots button list will vary
Network error during publishing → show retry option.
New version created → a toast communicating new versions to review
🟠 UI considerations:
Improve buttons contrast color, in this design screen a propose an updated version of Primary, Secondary and Subtle button.
Update the autosave text to be always visible when document has a cover photo.
📋 User Story: Explore contextual document options
As an editor I want to explore document contextual options so that I can use relevant actions related to the document.
✅ Acceptance criteria
The user can click on the 3 dots button for doc. options, available next to Publish button.
The user can see "Versions history"→ A versions history will open on the right side.
The user can edit "Document Settings" → Edit or add cover, change publication date, ... will open on the right side (by now).
The user can "Share link" → Creating a link that can be shared by pasting it. What is shared is the latest published version.
The user can "Duplicate document"→ It opens the duplicated document right away to start editing.
The user can "Export document"→ It exports a MD and PDF version.
The user can see "Child documents"→ All child documents of this document will be shown (what we called directory today, change name, is too technical)
The user can "Delete a document"→ The document will be deleted with a warning modal, "Are you sure you want to delete this document?" Delete (red) Cancel (secondary).
The user can create a "Document Branch"
Document branch -> Duplicate with history.
See how dialog is much easier to understand for the user with clear components, guiding the actions and a clear CTA.
Same Dialog concept for "Move" and "Duplicate"
See prototype:
🪜 Basic flow
User clicks the 3 dots button
A dialog opens bellow the button with a list of option
User selects one of the options of their interest
User closes the dialog by clicking outside in desktop or in the X icon in mobile.
⚠️ Edge Cases
User lacks permission to edit → Options in 3 dots button will vary just showing:
Share link
Export document
Draft / never published — Share link should be greyed out or not shown since there's no public URL yet.
Doc is already a branch: branching a branch is probably not allowed. If document is already a branch, option could be replaced by "View source document"
Doc has no children: Shows empty state
🟠 UI considerations:
Update copy as in design for more clarity of what the actions are, ie: Document version -> Versions history
Directory -> Child documents
Update icons as in design for more clarity of what actions are.
Update order of the actions by priority and group with deleting always at the end.
⊕ User Story: Simplify content insertion within documents (WIP)
As a user I want to add content to a document through a clear and consistent interaction. So that I can create documents and content quickly without confusion,duplicate controls or unnecessary steps
✅ Acceptance Criteria
The user can add new content from a single consistent insertion control + or /
The user can insert content anywhere within the document structure.
The user can add, replace, resize, move, or remove documents easily.
The user can apply formatting such card, link, to documents.
The user can add content between existing blocks, at the top, or at the end of a document.
Empty states provide a clear way to start adding content.
🪜Basic Flow
User opens a document.
User clicks the insertion control where they want to add content.
User selects content type (document, image, video, text, etc.).
Content is inserted at the selected location.
User edits formatting or reorganizes content.
User moves child documents if needed.
Changes autosave automatically.
User clicks Publish when ready.
📄 User Story: Modify text, images, or formatting (WIP)
As an editor I want to modify text, images, or formatting in a document So that I can update and improve the document’s content and appearance.
✅ Acceptance Criteria
The user can click on any editable area of the document and start editing immediately.
The user can update existing text and add new text.
The user can add, replace, resize, move, or remove images.
The user can apply formatting such as bold, italic, underline, headings, lists, text color, highlight color, font size, and other available style options.
Changes appear instantly within the document.
🪜Basic Flow
User opens a document.
User clicks into a text block, image, or content area.
User makes changes directly.
User continues editing anywhere else in the document.
User clicks Publish.
System publishes the updated document.
Do you like what you are reading?. Subscribe to receive updates.
Unsubscribe anytime