Roll20 Accessible Sign-Up Page Redesign

Hiya! Many thanks for taking the time to view my project, looking forward to receiving feedback. 🌹

Project Summary: Redesign of Roll20 Signup Page Form

Project Overview

The goal of this redesign project was to enhance the usability, accessibility, and overall user experience of the Roll20 signup page form. The updates focused on ensuring compliance with accessibility standards, improving user feedback mechanisms, refining error messaging, and streamlining the form’s layout to create a more intuitive and efficient sign-up process.

Key Adjustments

1. Accessibility Enhancements:

• Color Contrast Adjustments: Updated the color scheme to meet WCAG AA and AAA standards, ensuring that text and important elements have sufficient contrast against their backgrounds. This change improves readability and accessibility for users with visual impairments.

1. Field Input States:

• Clear Input States: Implemented distinct visual indicators for empty, focused, and error states of form fields. This includes clear borders, background changes, and labels to guide users through the form and highlight where corrections are needed.

1. Instant Feedback and Validation:

• Real-Time Validation: Introduced instant feedback for input fields, providing immediate validation and guidance as users complete the form. This feature helps users correct errors on-the-fly, reducing frustration and improving form submission accuracy.

1. Microcopy and Error Messages:

• Refined Microcopy: Enhanced the clarity and tone of instructional text and error messages. Updated microcopy to be more user-friendly and supportive, ensuring that users understand exactly what is required and how to resolve any issues they encounter.

1. Form Length Optimization:

• Reduced Form Length: Shortened the form by consolidating input fields and re-evaluating required information. The form now fits within a single screen view, eliminating the need for scrolling and creating a more seamless and accessible user experience.

Impact

The redesigned signup page form is expected to deliver a more inclusive and efficient registration process. By adhering to accessibility standards and improving real-time feedback, users will benefit from a more intuitive and supportive experience. The streamlined form layout enhances user engagement by reducing friction and cognitive load during the signup process.

This redesign aligns with Roll20’s commitment to accessibility and user-centered design, setting a new standard for the platform’s user experience.