Accessible Sign-up and Login Page for Relume

Overview:

This project aimed to enhance the accessibility and usability of the Relume sign-up page. The original design had several accessibility gaps, including poor focus states, forced newsletter subscriptions, and limited login options, making it less inclusive for users with disabilities.

Key Issues:

• Strict name requirements – Users were required to enter both first and last names, which could discourage quick exploration of the app.
• Accessibility errors: The page did not fully meet WCAG standards, with problems like poor focus indicators .
• Forced newsletter subscription: Users were automatically subscribed without an option to opt out.
• Limited login options – There was no way to sign up or log in using third-party accounts like Google or Facebook.
• Delayed error messages – Users only saw password validation errors after submitting the form, leading to frustration.
• Lack of password visibility toggle – Users couldn’t see their password while typing, increasing the chance of errors.

The redesign has :

• Added third-party login buttons for a faster and more flexible sign-in process.
• Increased contrast on input fields to meet WCAG AA standards.
• Merged “First Name” and “Last Name” fields into a single “Full Name” field.
• Improved focus indicators and error messages by increasing contrast, adding warning icons, and refining borders.
• Added a password visibility toggle to reduce input errors.
• Made the newsletter subscription optional with a checkbox.
• Introduced real-time password validation to provide instant feedback.

Conclusion:

This project demonstrates how small yet impactful design improvements can enhance accessibility and usability. By resolving accessibility issues, improving form interactions, and giving users more control, the sign-up process became more intuitive and inclusive. These changes ensured a smoother and more user-friendly experience.