Brilliant: Sign-Up Page Accessibility Optimization

Overview:

This project aimed to enhance the accessibility and user experience of the Brilliant sign-up page. The original page, while functional, presented various challenges that impacted ease of use, especially for individuals with disabilities. The goal was to create a smoother, more inclusive sign-up process while addressing common pain points related to accessibility and usability.

Key Issues:

• Accessibility shortcomings: The sign-up page lacked WCAG-compliant design elements, including proper labeling, color contrast, and intuitive focus and error states.
• Separate name fields: Requiring users to fill out both first and last names created unnecessary complexity in the form, potentially slowing down completion rates.
• Vague password requirements: Users weren't given clear password guidelines up front, leading to confusion and frustration as errors only appeared after submission.
• Lack of real-time validation: The absence of inline error validation forced users to complete the entire form before receiving feedback on mistakes, creating friction in the user journey.
• Inconsistent design elements: The sign-up form used varying styles and error-handling methods compared to other forms on the platform, leading to an inconsistent user experience.

Implemented Solutions:

Improved Accessibility:

• Fixed labels outside the fields: Labels were placed outside input fields to ensure they remained visible while users typed, making the form easier to navigate.
• Enhanced color contrast: The contrast between text, input borders, and background was increased to meet WCAG AA standards, improving visibility for users with visual impairments.
• Streamlined name field: The two separate fields for first and last names were merged into a single "Full Name" field, simplifying the form and making it quicker to complete.

User Experience Enhancements:

• Inline error validation: Real-time feedback was introduced, providing users with immediate notifications when errors occurred, reducing frustration and improving overall flow.
• Clear password requirements: Password criteria, such as length and character type, were displayed as users entered their password, ensuring clarity and reducing mistakes.
• Improved focus and error indicators: The form was updated with clearer focus states, highlighted borders, and error icons, helping users quickly identify where to correct mistakes.

Additional Considerations:

• Emotional impact: By making the form more intuitive and reducing frustration, the redesign helped alleviate potential anxiety, particularly around the password field and error handling.
• Clear communication: Requirements for account creation were made transparent, with clear messaging to guide users through the process without confusion or frustration.

Conclusion:

This project underscores the value of prioritizing accessibility and user-centric design. By making thoughtful changes to the Brilliant sign-up page—such as improving feedback mechanisms, enhancing contrast, and simplifying fields—the page became more accessible, consistent, and user-friendly. These improvements ensure that users, including those with disabilities, can engage with the platform more easily, resulting in a more inclusive experience overall.