Grammarly sign-up accessibility optimization

Overview:

This project focused on improving the accessibility and overall user experience of Grammarly sign-up page. The original design contained several accessibility barriers and usability issues that not only disrupted the user journey but also posed challenges for users with disabilities.

Key Issues:

• Accessibility errors: The page did not meet WCAG standards, with issues such as insufficient color contrast and poor error and focus states. Floating labels and error text are hard to read, especially for people with disabilities. After error, field border is double lined with focus and error state colors, making it confusing.
• Hidden fields: At first, you can only see the email field. As the field gets active, other fields are shown. Such a thing can cause anxiety for users.
• Excessive newsletter/terms & condition message: One-third of the sign-up page was used for terms and conditions and newsletter, and both were below CTA and automatically agreed. Users are not given a choice to decline the newsletter.
• Unclear requirements: There is no requirement mentioned for input fields except for password. In case of error states, error text, “Required” is the error for all fields. The errored password field only displays a minimum character length requirement. Detailed requirements (e.g., lowercase letter, uppercase letter, number, special character) are not displayed, making it hard for users to make a strong password.

Solutions:

Accessibility Improvements:

• Floating labels are replaced by labels outside the input fields with an asterisk showing all inputs are required.
• Eligible text size and color contrast for terms and conditions and newsletter subscription, making it easier to read.
• Clear color contrast of field border for each state and removing double lined border.

Enhanced User Experience:

• All fields are displayed upfront so that users know what is required of them. There is no need to hide as there are only three input fields.
• Concise text for terms & conditions and newsletter subscription. Adding checkbox to give user choice to choose subscription and agree to terms & conditions.
• Clear input field requirements are provided to users. Email structure and proper requirements for passwords making it easier for users to enter correct input

Conclusion:

This project illustrates the importance of considering accessibility and user experience in all aspects of design. Using, simple yet effective changes, the sign-up page was made more accessible, user-friendly, and respectful of users' mental well-being.