Destructive Modal

Example below is from the volunteer application process.

Challenge

Inform users that they could lose their progress.

Solution

Use clear language in the modal and for CTA buttons.

How I Helped

  • Collaborated with UX designers on the entire flow of the updated volunteer application.

  • Spoke with developers about different use cases and when data could be lost.

  • Presented copy options to design team and incorporated feedback into final designs.

 

Application already as a pop-up. The destructive modal is displayed if the user clicks ‘x’ on the application or clicks outside of the application pop-up before submitting.
  • I changed header copy to add more clarity
  • CTAs were swapped so that the primary action would be to go back to the application, and I added 'Yes' and 'No' to reassure the user of their options. ('Cancel' can be confusing in this situation.)
  • Both 'Leave' and 'Discard' were presented for feedback, but I advocated for 'Leave', which sounds less harsh.
After learning that some data could be saved, copy suggestions were made for two scenarios. The final versions clearly explain what will happen in each scenario if they leave.