<?xml version="1.0" encoding="utf-8"?>

In this project, I designed an accessible sign-up page for a SaaS product called LearnPy. The primary goal was to ensure the sign-up process is easy to use and accessible to everyone, including individuals with disabilities, following the Web Content Accessibility Guidelines (WCAG).

LearnPy Signup page 1

The form is straightforward with a clean design, making it easy for users to understand and fill out the required information.

Error messages are clear and specific, informing users exactly what needs to be corrected.

LearnPy Signup page 2

Labels are clearly associated with their respective input fields, ensuring users with screen readers can navigate the form effortlessly.

Placeholder text within input fields provides additional guidance.

A password strength indicator helps users create strong passwords, enhancing both security and usability.

LearnPy Signup page 3

Users can navigate through the form using only their keyboard, which is essential for users with motor disabilities.

LearnPy Signup page 4

The color contrast between the text and background meets WCAG standards, ensuring readability for users with visual impairments.

This commitment to accessibility not only enhances user experience but also increses the potential user base by making the product more inclusive.

Tools used

Adobe AfterEffects
Figma
Adobe Photoshop

From brief

Topics

Share

Share your insights — leave a project review and help others grow their skills

Reviews

3 reviews


Great job, Surya 👏 I like how you focused on WCAG compliance and built clear flows with strong labels, error states, and keyboard navigation. The design feels inclusive and straightforward, making the signup process accessible without adding complexity. 🚀


Thanks Surya, you've broken down your process here and have shown how the form complies to WCAG and in the GUI (which we often forget about!).


The design is impressive, but I believe the flows should be more comprehensive. Include additional explanations and page examples for a clearer understanding.


12 Claps
Average 4.0 by 3 people
5 claps
4 claps
3 claps
2 claps
1 claps
<?xml version="1.0" encoding="utf-8"?>