Accessible Signup Form for SaaS Platform
🧩 Project Overview
For the Accessible Signup Form for SaaS Platform challenge, I designed a desktop signup experience for TaskFlow, a project management SaaS that helps teams plan, track, and deliver work in one place.
I enjoy working on SaaS products and productivity tools, so I used this project to focus on something that often gets overlooked — making the first interaction with a product both accessible and effortless.
Instead of redesigning an existing platform, I created the flow from scratch to ensure accessibility, usability, and visual clarity were built into the experience from the beginning.
🎯 Objectives
- Design a clear and conversion-friendly desktop signup form
- Follow WCAG 2.1 AA accessibility standards
- Reduce cognitive load with proper labels and helpful guidance
- Make the experience simple, familiar, and keyboard-friendly
♿ Accessibility Approach
Accessibility decisions were part of the core design, not an afterthought.
- The page starts with a clear heading and context so screen reader users understand where they are.
- Inputs use persistent labels instead of placeholders to avoid confusion.
- High-contrast focus states make keyboard navigation visible and reliable.
- All text and UI elements meet the 4.5:1 contrast ratio for readability.
- Error messages are specific, placed near the relevant field, and remain visible until resolved.
- Inputs and buttons use a comfortable height to improve scanning and interaction.
These choices align with key WCAG guidelines for contrast, focus visibility, labels, and error identification.
🧠 Usability Decisions
The layout follows a familiar SaaS authentication pattern so users don’t have to think.
- A single-column form improves scanning
- Related fields are grouped logically
- Helper text prevents mistakes before they happen
- A strong primary button keeps the main action clear
The goal was to make the form feel fast, simple, and stress-free.
🏁 Outcome
The result is a desktop signup experience that is clean, inclusive, and easy to complete.
It supports keyboard navigation, communicates errors clearly, and follows accessibility best practices without adding visual complexity.
This project reflects how I approach SaaS design — simple, structured, and accessible for real users from the very first screen.
Reviews
2 reviews
This is a strong and thoughtful submission. You’ve clearly approached accessibility intentionally, not as an afterthought. Persistent labels, inline validation, visible password requirements, and clear error messaging show maturity in both usability and WCAG awareness. 👏
Here are a few refinement-level observations to elevate it further:
1. Visual Rhythm & Spacing
The spacing between the main heading and subheading feels slightly disproportionate compared to the spacing between the subheading and the first input. It’s subtle, but refining vertical rhythm would strengthen hierarchy and overall polish.
2. Error Color Intensity
The red used for error states is highly saturated and appears in multiple elements at once (border, text, icons). While it likely meets contrast standards, the concentration makes the interface feel visually heavy. Consider softening the tone or reducing its surface area while maintaining WCAG compliance.
3. Confirm Password State Clarity
There’s a logical inconsistency between the password field (which shows unmet requirements) and the confirm password field (which appears filled but shows no validation state).
If the primary password is invalid, how is confirm password handled?
Clarifying the validation logic here would strengthen system consistency and reduce ambiguity.
4. “Get help” Placement
The placement of “Get help” feels slightly disconnected from the form experience. It currently reads as an afterthought. Positioning it closer to the form container or beneath the CTA would make its relationship to the task clearer.
Solid work. It's clear that accessibility was a priority here, not an afterthought. Persistent labels, inline password validation with a requirements checklist, and a specific error message on the email field are things that genuinely help users. Joanne rightly pointed out one of the key issues the "Confirm password" field looks as if it's been correctly filled, even though the main password doesn't meet the requirements yet. That's a logical inconsistency worth clarifying.
I also agree with the observation about the red. It appears simultaneously on the border, text, and icons, which feels a bit overwhelming. Keeping just the border + text error message would be enough.
As for the split-screen layout. The left side with the form is clean and readable, but the gradient on the right is very decorative and doesn't carry any content. That's fine for a SaaS marketing aesthetic, though it's worth considering whether a value prop or product context could do more work there.
This project shows a strong design foundation and genuine WCAG awareness. That's not a given among junior designers. Refining the validation states and visual hierarchy will take it to the next level. Keep pushing in this direction!
You might also like
Beautify Login page WCAG principles
edX Sign-Up Page Redesign
Design Prioritization Workshop
Notion Login Page Accessibility Optimization
Sanyahawa - Landing page Design
Healthy Dashboard
Visual Design Courses
UX Design Foundations
Introduction to Figma
Design Terminology
