Error state & validation
Error state & validation
Embedded Files
Project overview
Project overview
The challenge
The challenge
For critical project invites, users could select a contact with an invalid email address without a warning, causing silent email failures.
The initial screen mockup included repetitive text and confusing buttons that could further confuse users. The Product Designer asked me to rework the copy to make it obvious that users needed to correct the email addresses.
(Generalized to protect proprietary data.)
My strategy
My strategy
Created distinct action buttons to clarify choices.
Stated the consequences so users know ignoring the error means the contact is removed.
Provided context by adding the specific person and company name directly above the input field.
Reviewed with the Product Designer to pivot the copy when product constraints changed the capabilities.
Writing sample - before & after
Writing sample - before & after
Before - Draft
Before - Draft
Header: Contact <NAME> has invalid email
Description: The email for <NAME> is invalid. Update to the correct email to ensure the contact receives your invite.
Field label: Email
Placeholder text: <current email>
Button 1: Don't update email and send
Button 2: Update email and send
After - Redesigned
After - Redesigned
Header: Update contact's email?
Description: The selected contact has an invalid email address. Update their email before sending your invite, or the contact will be removed.
Field label: <Contact name>
Placeholder text: <current email>
Button 1: Remove contact
Button 2: Update email
Impact & takeaways
Impact & takeaways
Eliminated a frequent, silent failure that frustrated users and left them guessing.
Created a friction-free path for users to fix the issue quickly with clear, simple steps.
Protected data integrity by making sure users save clean, accurate contact information.
Page updated
Google Sites
Report abuse