✍️ 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. A text cursor will appear.
The user can modify text, images, or formatting.
The user can publish at any time with an Publish button always available, even if nothing has changed.
The system confirms when changes are successfully published.
The system shows autosave every time the user changes something.
When the user leaves without publishing the document, the Publish button status changes as a signal that some content was not published.
When publishing, the dialog shows when was the last time it was last published and if there are changes to published.
When the user clicks the "last time it was published," the versions list will be opened.
When the user clicks "changes to publish," the changes will be highlighted in the document.
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."
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.
The user can click in any place and start typing or editing.
The system shows autosave every time the user changes something.
Video prototype
🪜 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, all changes will be saved and user can keep editing and Publish when he is ready.
⚠️ 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
🟠 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.
📋 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 " Duplicate Document with history" -> Branching
The user can "Delete a document"→ The document will be deleted with a warning modal explaining the consequences.
The user can " Duplicate Document with history" -> Branching
See prototype option A: Progressive locations selector
See prototype option B - More breadcrumb connected just one selector.
The user can "Delete a document"→ The document will be deleted with a warning modal explaining the consequences.
🪜 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 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.
⊕ 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.
📄 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.
The user can apply formatting such as bold, italic, underline, headings, lists, text color, highlight color, font size, and other available style options.
🪜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