Accessible Sign-Up Form for Evolve Storefront
For this project, I created a signup page for a new SaaS platform that prioritizes accessibility, inclusivity, and ease of use. The goal was to develop a user-friendly experience that meets WCAG 2.1 standards, ensuring a smooth, accessible signup process for everyone.
WCAG Accessibility Compliance
This design adheres to WCAG 2.1 guidelines to promote accessibility and inclusivity:
- Text and Contrast: All text and interactive elements meet a contrast ratio of 4.5:1 or higher, providing clarity and readability across all devices.
- Keyboard Navigation: Users can complete the signup process using only the keyboard, supporting users with mobility challenges.
- Clear Error Messages: Inline error messages are concise and descriptive, providing guidance on corrections to help users fix input errors quickly.
- Responsive Layout: The form layout adapts to both desktop and mobile screens, maintaining a consistent experience across devices.
- Alt Text and ARIA Labels: Alt text and ARIA labels are used for images and form fields, ensuring compatibility with assistive technologies like screen readers.
Rationale Behind Design Choices
The design choices in this project are grounded in accessibility, usability, and a clean visual aesthetic:
- Accessibility: Every component on the signup page is accessible to screen readers and supports assistive tech users, ensuring an inclusive experience for individuals with visual impairments.
- Usability: The form fields are clearly labeled and logically arranged, which minimizes cognitive load and allows users to complete the signup process smoothly. Social login options provide an additional convenience.
- Visual Design: High-contrast colors, clear typography, and generous whitespace create a modern, inviting interface that aligns with brand standards while enhancing readability.
- Presentation: I showcased the design across both desktop and mobile formats, highlighting the responsiveness and accessibility features. The project desktop view is designed to be interactive, allowing users to explore the signup flow and experience the accessible elements firsthand.
This project is submitted under the design brief: Accessible Signup Form for SaaS Platform [https://app.uxcel.com/design-briefs/accessibility].
Tools used
From brief
Topics
Share
Reviews
5 reviews
Thanks for your sub, Shea!
I love the cleanness and balanced color palette. I would love to see also the mobile version.
If I have to be picky, I would only say that the pairing of the see/not see icon for the password is better to change the closed eye with a banned eye for the intuitive purpose.
Great vibes!
Hey Shea,
Accessibility clearly took the main attention here, and it's great to see how well you've addressed that. The contrast ratios and clear error messaging make the form accessible and easy to navigate. The inline error messages are concise, descriptive, and helpful.
However, I noticed the mobile design is not included, or I can not access it. Adding those would give a more complete view of how the signup works across devices. Overall, your design decisions shine, especially in usability and accessibility.
Decent work thought here, nice
Hi Shea,
Great work on designing for accessibility and adding a clear explanation for each feature. This is excellent work and I am here to provide that rating as well!
Best,
Ruben/ Product design & research
As per UI accessibility it is totally on point but if we remove the context of accessibility, I find a lot of UX errors here as:
- Inconsistent CTA Language: The form title uses “Create Your Account,” but the button says “Sign Up.”
- Button Icon-Only Design: Relying solely on the Google and Apple icons without additional text can be confusing, especially for new users or users unfamiliar with these options. Adding labels like “Sign up with Google” and “Sign up with Apple” would make the options more accessible and reduce guesswork.
- "Log In" Link Placement and Emphasis: The “Log In” link is under-emphasized and could be missed by users who are returning to log in rather than sign up. A separate “Log In” option at the top of the form or even a dedicated button would make it more obvious and reduce the likelihood of users mistakenly signing up again.
- Consistency in Font and Style: The form could benefit from uniform typography and style choices. For example, the “Log In” link font size and color should match other links or buttons to create a cohesive look and feel.
- Logo and Tagline Emphasis: The left section with the "Evolve Storefront" logo and tagline takes up significant visual space without offering much functional value. It could be streamlined or condensed, especially in the desktop layout, to prioritize the sign-up form itself.
- Form Title and Subtitle Confusion: The phrase "Create Your Account" is clear, but the placement of the "Already have an account? Log in" link right below it is problematic. It visually competes with the form title, causing potential confusion about the purpose of the form. Consider placing the “Log in” link at the top right or beneath the form to reduce visual clutter and clarify the primary action.
Hope it helps.
You might also like
Sojo NFT Marketplace
Heuristic Evaluation of Revolut Mobile App
Hulu Through My Eyes - A Cinematic UI Exploration (unofficial)
From Idea to Full-Stack Web App
Docto
Fundraising Website
Visual Design Courses
UX Design Foundations
Introduction to Figma
Design Terminology
