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

I designed this mobile login and sign-up flow following WCAG 2.1 AA accessibility principles, focusing on clarity, usability, and reduced cognitive load. The form uses clear labels, simple instructions, and high-contrast buttons to ensure content is easy to perceive, while large touch targets and a single-column layout support smooth mobile interaction. I chose an email-first, step-by-step flow to prevent errors and avoid overwhelming users by only showing essential information at each stage. Plain language, consistent layouts, and features like password visibility toggles and third-party sign-in options help make the experience more understandable, inclusive, and user-friendly.

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

Reviews

1 review


Hi Jessy,

This is such great work! Well done.

I think this design would have a very strong accessibility score

A few thoughts though..

It's possible that the font size of the input labels may be quite small and difficult to read for certain users with visual impairments. Perhaps, making the input label's font size to be the same as the placeholder's font size could do the trick.

Also, the 'x' icon used on the email input field looks enabled even when the user has not typed anything in the field. This gives the impression that the user can remove the entire input field rather than clear the content in the input. If it's a necessary feature, then I think there should be a distinction between when there's no input to clear (disabled) and when there is an input (enabled).

On the UX: Consider adding a back button on the password page or a way for the user to go back to the previous page if they, perhaps, want to change the email they entered.

In all, I think this design is simple, solid and accessible.

Keep up the great work.


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