Problem or limitation
The current sign-up modal has several UI and usability issues that affect the overall user experience, particularly on smaller screens.
Observed issues include:
-
Overlapping Optional Labels
The "Optional" text overlaps with the First Name and Last Name field labels.
This creates visual clutter and reduces readability.
-
Broken Sign-In Section Layout
The "Already have an account?" section is misaligned.
The "Sign in" link wraps into two lines instead of appearing inline.
-
Development Mode Banner Visibility
The "Development mode" footer is highly prominent and distracts users from the primary sign-up flow.
It appears more visually dominant than important form elements.
-
Low Text Contrast
Welcome text, helper text, and some labels have insufficient contrast against the dark background.
This impacts accessibility and readability.
-
Mobile Layout Constraints
First Name and Last Name fields appear cramped in the current two-column layout.
The modal occupies most of the screen height, reducing visual balance on mobile devices.
Proposed solution
Improve the sign-up modal with the following UI and UX enhancements:
High Priority
Fix positioning of optional field indicators by displaying them as: First Name (Optional), Last Name (Optional)
Ensure proper spacing and alignment between labels and input fields.
Fix the sign-in section layout so that: Already have an account? Sign In, appears on a single line.
Hide or significantly reduce the visibility of development-related banners in production environments.
Increase text contrast for descriptions, labels, and helper text to improve readability and accessibility.
Improve mobile responsiveness by: Stacking name fields vertically on smaller screens, Maintaining adequate spacing between form elements.
Additional Improvements
Improve password visibility icon contrast and touch target size.
Add password requirements/helper text.
Add disabled and loading states for the Continue button.
Improve visual hierarchy between logo, heading, form content, and footer.
Ensure consistent border radius and spacing across all controls.
Add focus states and accessibility improvements compliant with WCAG guidelines.
Alternatives considered
Another possible approach would be to keep the existing layout and only fix the overlapping labels and sign-in alignment issues.
However, addressing the broader responsiveness, accessibility, and visual hierarchy concerns would provide a more polished and production-ready experience while reducing future UI maintenance.
Use case
This would help when:
New users create accounts from mobile devices.
Users rely on clear form labels and accessibility-friendly interfaces.
Teams want a more professional onboarding experience.
Developers prepare the application for production deployment and public usage.
The proposed improvements would reduce visual confusion, improve accessibility, and increase sign-up completion rates by providing a cleaner and more intuitive registration flow.
Additional context
Observed from the current sign-up modal:
Optional labels overlap field labels.
Sign-in link wraps incorrectly.
Development mode banner is visually distracting.
Form text contrast is lower than recommended accessibility standards.
Mobile layout feels cramped and could be optimized for smaller screens.
Problem or limitation
The current sign-up modal has several UI and usability issues that affect the overall user experience, particularly on smaller screens.
Observed issues include:
Overlapping Optional Labels
The "Optional" text overlaps with the First Name and Last Name field labels.
This creates visual clutter and reduces readability.
Broken Sign-In Section Layout
The "Already have an account?" section is misaligned.
The "Sign in" link wraps into two lines instead of appearing inline.
Development Mode Banner Visibility
The "Development mode" footer is highly prominent and distracts users from the primary sign-up flow.
It appears more visually dominant than important form elements.
Low Text Contrast
Welcome text, helper text, and some labels have insufficient contrast against the dark background.
This impacts accessibility and readability.
Mobile Layout Constraints
First Name and Last Name fields appear cramped in the current two-column layout.
The modal occupies most of the screen height, reducing visual balance on mobile devices.
Proposed solution
Improve the sign-up modal with the following UI and UX enhancements:
High Priority
Fix positioning of optional field indicators by displaying them as: First Name (Optional), Last Name (Optional)
Ensure proper spacing and alignment between labels and input fields.
Fix the sign-in section layout so that: Already have an account? Sign In, appears on a single line.
Hide or significantly reduce the visibility of development-related banners in production environments.
Increase text contrast for descriptions, labels, and helper text to improve readability and accessibility.
Improve mobile responsiveness by: Stacking name fields vertically on smaller screens, Maintaining adequate spacing between form elements.
Additional Improvements
Improve password visibility icon contrast and touch target size.
Add password requirements/helper text.
Add disabled and loading states for the Continue button.
Improve visual hierarchy between logo, heading, form content, and footer.
Ensure consistent border radius and spacing across all controls.
Add focus states and accessibility improvements compliant with WCAG guidelines.
Alternatives considered
Another possible approach would be to keep the existing layout and only fix the overlapping labels and sign-in alignment issues.
However, addressing the broader responsiveness, accessibility, and visual hierarchy concerns would provide a more polished and production-ready experience while reducing future UI maintenance.
Use case
This would help when:
New users create accounts from mobile devices.
Users rely on clear form labels and accessibility-friendly interfaces.
Teams want a more professional onboarding experience.
Developers prepare the application for production deployment and public usage.
The proposed improvements would reduce visual confusion, improve accessibility, and increase sign-up completion rates by providing a cleaner and more intuitive registration flow.
Additional context
Observed from the current sign-up modal:
Optional labels overlap field labels.
Sign-in link wraps incorrectly.
Development mode banner is visually distracting.
Form text contrast is lower than recommended accessibility standards.
Mobile layout feels cramped and could be optimized for smaller screens.