Florish Accessibility Signup Form
This project presents a mobile login and signup form for Florish, a SaaS platform, designed using WCAG 2.1 accessibility principles to support a wide range of users.
Platform & Device
- Platform: Florish (SaaS)
- Device: Mobile
Accessibility Considerations
- Visible labels for all input fields
- Adequate color contrast for text and actions
- Clear helper text to explain inactive states
- Descriptive error feedback not reliant on color alone
- Appropriately sized touch targets and spacing
- Password visibility toggle for input verification
- Logical navigation order with visible focus states
Rationale
The design applies accessible form patterns in a simple mobile layout, ensuring users can complete login and signup tasks clearly and efficiently.
Interaction
Includes disabled and enabled button states, focus indicators, and password visibility controls.
Reviews
1 review
Great job on the detailed validations and error states. I also really like the animations you added in the prototype. Looks nice!
One thing I’m curious about is the decision to show the Sign up CTA twice on the Log in screen, while on the Sign up screen there is only one Log in CTA. I’d be interested to understand the reasoning behind that choice and whether it’s intentional or something worth revisiting.
Have you considered placing the “Forgot password” link closer to the password input fields ? Grouping it might make it feel more connected and easier to find, as part of the same logical group.
You might also like
Notion - Accessibility Color System
Blip - Esport app design (Light & Dark UI)
Reimagining Asana's Color System
Customer Journey Map for a Co-Working Space
Latios - Free Portfolio Template for UX/UI Designers
Workspace Booking Flow - UI/UX Design
Visual Design Courses
UX Design Foundations
Introduction to Figma
Design Terminology
