Reddit Ads - Saas Sign-up page

Overview:

The goal of this project was to enhance the accessibility and user experience of the Reddit Ads sign-up form by addressing key usability issues. The original design presented several challenges, including non-compliance with WCAG accessibility standards, inefficient layout, and poorly designed call-to-action (CTA) elements. These factors not only affected the general user experience but also created barriers for users with disabilities.

Key Issues:

1. Accessibility Errors:

• The page did not meet WCAG (Web Content Accessibility Guidelines) standards.
• Missing labels for form inputs, which made navigation difficult for screen readers.
• Insufficient color contrast, making it hard for visually impaired users to read the text.
• Poor focus and error states, lacking visual cues and clarity when users interacted with fields.

1. Unoptimized Spacing and Structure:

• Overly spaced form elements resulted in a scattered layout, impacting usability.
• The primary CTA (Call to Action) was pushed below the fold, reducing visibility and interaction.
• There was no clear distinction between Login and Sign-Up switching, causing confusion for users.

1. Unprioritized CTA:

• The size and boldness of the primary CTA button were too small and lacked visual prominence.

1. Missing AutoFill Suggestions:

• AutoFill was missing, which could assist users with disabilities (both temporary and permanent) by reducing the manual effort required for input.

Implemented Solutions:

Accessibility Improvements:

1. Label Placement:

• Moved password suggestions and labels to fixed positions outside of form fields for better visibility and access by screen readers.

1. Color Contrast Enhancements:

• Increased the color contrast of labels and field borders to meet WCAG AA guidelines, ensuring readability for all users, especially those with visual impairments.

Usability and UX Enhancements:

1. Focus and Error States:

• Improved focus indicators by widening field borders and adding color contrast to make them stand out when active.
• Added warning and confirmation icons for better form validation, ensuring users can easily identify errors and correct them without confusion.

1. Primary CTA Improvement:

• Increased the size and boldness of the primary CTA button to make it more visible and encourage interaction.
• Repositioned the CTA above the fold, making it the focal point of the page and reducing user frustration.

Conclusion:

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