Logo of UI Challenges
Sign in

Gallery

See what others have created

Save draft
AW

anosha_waniya

@anosha_waniya

EasySaaS

Save draft

Design the save-draft control for a content editor. Place it where users will notice it during editing, without making it compete with the primary workflow. This is not a full editor; focus on the save affordance and the feedback around it.

Show the default unsaved state, the in-progress saving state, and the saved confirmation state. The user should be able to tell at a glance whether their draft is still changing, has been saved, or needs attention. Keep the language short and specific.

Include one failure state for when saving does not complete. Preserve the user's entered content, explain what happened in plain language, and provide a clear retry action. If you add motion or icon changes, they should support the status change, not replace it.

What to deliver

  • Design the save-draft control in the editor header or footer
  • Show the saved, saving, and unsaved states
  • Add a clear confirmation message after save
  • Include a recovery state for save failure or retry
  • Show how draft state persists while the user keeps editing

Animate the save button to briefly glow or change form after a draft is saved; this creates a rewarding feeling for the user.