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, but disable when there are no changes.
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.
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.
Do you like what you are reading?. Subscribe to receive updates.
Unsubscribe anytime