Accessible Signup & Login Flow [Mossy App]
A clean and accessible authentication flow designed for a SaaS platform. The project explores best practices in login, registration, and password recovery, focusing on inclusivity and usability.
The flow includes:
- Clear input fields and form labels
- Error handling and validation messaging
- Accessible color contrasts and button states
- Password reset and recovery screens
The result is a simple, natural onboarding experience that prioritises accessibility while maintaining a modern and friendly visual style.
Tools used
From brief
Topics
Share
Reviews
3 reviews
This is really well done, Melissa!
The design is clean and easy on the eye.
I dropped a comment on the Figma file:
"While this might be a lean way to show feedback on the user's action, I feel it can easily be missed if the user does not pay attention."
This is in relation to the micro-interaction for the button on the Forgot Password modal.
However, the design is superb!
Melissa, this is a really solid flow — clean, accessible, and user-friendly. I especially like how you simplified the login/signup decision by letting the system guide based on email. The only thing I’d watch is making the feedback on actions more noticeable so users don’t miss it. Great work!
Great job, Melissa. The interface looks beautiful.
I'm wondering what would happen if I click skip. Is it possible to use the app without an account?
Then the user should know what are the benefits of having an account.
Log in and Sign up are in the same screen, so I suppose it identifies by email if the user already has an account, right?
The fields are excellent, well labeled, with helpful placeholders and accessible validation.
Bravo!
You might also like

Blip - Esport app design (Light & Dark UI)

Notion - Accessibility Color System

Reimagining Asana's Color System

Customer Journey Map for a Co-Working Space

Latios - Free Portfolio Template for UX/UI Designers


![Accessible Signup & Login Flow [Mossy App]](https://users-content.uxcel.com/4b7d4a6f-9cd9-4533-9bc7-8bb621033bc8/briefs/accessible-signup-login-flow-mossy-app-cover-9125-1756114618435.jpg)
![Accessible Signup & Login Flow [Mossy App] 1](https://users-content.uxcel.com/4b7d4a6f-9cd9-4533-9bc7-8bb621033bc8/briefs/accessible-signup-login-flow-mossy-app-6860-1756114618435.jpeg)










